富文本编辑器ueditor初探

柔光的暖阳◎ 2022-07-12 07:40 241阅读 0赞

ueditor是百度开源的一款富文本编辑器，官网是：[http://ueditor.baidu.com/website/][http_ueditor.baidu.com_website]

我们下载最新版本1.4.3.3，解压下来目录结构如下：

![Center][]

lib包在jsp文件夹下、剩余的4个文件夹是需要的js和css。

**1：引入资源**

5个jar包：

![Center 1][]

引入需要的js和css(除jsp文件夹外，其他4个文件夹资源都需要引入)

![Center 2][]

将config.json和controller.jsp引入，二者需放在同一目录下。

**2：在页面里使用**

<!DOCTYPE html>
    <html>
      <head>
        <title>testUeEdit.html</title>
        <meta name="keywords" content="keyword1,keyword2,keyword3">
        <meta name="description" content="this is my page">
        <meta name="content-type" content="text/html; charset=UTF-8">
        
     
     <script type="text/javascript" src="../js/ueEdit/ueditor.config.js"></script>
     
     <script type="text/javascript" src="../js/ueEdit/ueditor.all.js"></script>
      <script type="text/javascript" charset="utf-8" src="../js/ueEdit/lang/zh-cn/zh-cn.js"></script>
    <script>
       //初始化
      var ue = UE.getEditor('editor');
      </script>
      </head>
      <body>
       <div>
        <h1>完整demo</h1>
        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>

此时文字编辑、表情都可以正常使用。

**3：后端配置**

控件的配置在ueditor.config.js

上传图片、附件、视频等等的配置在config.json里。

此时只需要修改ueditor.config.js里的serverUrl指向controller.jsp文件,controller.jsp会调用config.json里的配置去使用UeEdit自带的上传插件去上传文件。

上传功能需要我们在config.json里配置好文件的访问前缀、上传保存路径及文件命名格式。上传完图片后，图片会自动显示在编辑器里。

如此之后编辑器的基本功能文字编辑、图片上传、表情等等就ok了。

Tips: 在插入html的时候一定要等ueEdit初始化完成才可以：

varue = UE.getEditor('editor');
          ue.addListener("ready",function () {
             ue.execCommand('insertHtml',value);
          });

[http_ueditor.baidu.com_website]: http://ueditor.baidu.com/website/
[Center]: /images/20220711/8057e090f295406d9d66290b0518f0c6.png
[Center 1]: /images/20220711/322f05fb3a254171b4734b219739dba8.png
[Center 2]: /images/20220711/fdaee7f166824ad18e759dfe0769bc98.png