在java项目中使用umeditor

之前有介绍了ueditor的用法，可看这篇：https://www.cnblogs.com/roy-blog/p/7250668.html

umeditor是ueditor的简化版，不仅在功能，容量上进行了精简，在使用方法上面也做了简化。下面来介绍一下在项目中的使用方法。

1.下载

直接倒官网去下载：http://ueditor.baidu.com/website/umeditor.html，下载完以后把相关文件加入项目里面，如下图所示。

在java项目中使用umeditor

2.添加jar包

对于maven项目来说，由于在*仓库并没有umeditor的jar包，所以，我们需要手动的制作umeditor的jar包，具体的做法可以参考：https://www.cnblogs.com/roy-blog/p/8676285.html

添加完jar包以后，我们在pom.xml加入如下依赖。

<dependency>

            <groupId>com.baidu</groupId>

            <artifactId>ueditor-mini</artifactId>

            <version>1.1.1</version>

        </dependency>

当然还得加入上传文件的jar包依赖

        <!-- 文件上传 -->

        <dependency>

            <groupId>commons-fileupload</groupId>

            <artifactId>commons-fileupload</artifactId>

            <version>1.3.2</version>

        </dependency>

如果不是maven项目，只需要把这两个jar包（在jsp文件夹下）放入项目的lib文件夹下即可。

3.使用

使用很简单，先引入css文件:

<!--百度编辑器-->

        <link href="../static/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">

再引入js文件

        <!--百度编辑器-->

         <script type="text/javascript" src="../static/umeditor/third-party/template.min.js"></script>

         <script type="text/javascript" src="../static/umeditor/third-party/jquery.min.js"></script>

        <script type="text/javascript" charset="utf-8" src="../static/umeditor/umeditor.config.js"></script>

        <script type="text/javascript" charset="utf-8" src="../static/umeditor/umeditor.min.js"></script>

        <script type="text/javascript" src="../static/umeditor/lang/zh-cn/zh-cn.js"></script>

然后是html代码

<div type="text/plain" id="myEditor" name="blogContent" style="width:100%;height:500px;"></div>

然后是js代码：

var um = UM.getEditor('myEditor');

这样就定义了一个um对象。

如果想要回显，则用如下js代码。

        um.ready(function() {

        var temp = $('.temp').html();

        um.setContent(temp);//回显

    });

而上传图片什么的，都不需要我们去配置，甚至可以截图直接黏贴，这是比ueditor方便的地方。

总的来说是一个很简单好用的富文本编辑器，满足一般的门户回帖之类的功能足够了。

秒客网

在java项目中使用umeditor

相关文章