富文本编辑器UEditor

1. 富文本编辑器，Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。

2. UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器，具有轻量、可定制、注重用户体验等特点。

   展示结果如下：

   

   添加图片文字：

1. 引用配置

   1. <script type="text/javascript" charset="utf-8" src=" ueditor.config.js"></script>
      <script type="text/javascript" charset="utf-8" src=" ueditor.all.min.js"> </script>
      <script type="text/javascript" charset="utf-8" src=" lang/zh-cn/zh-cn.js"></script>
                 

   2. easyui-lang-zh_CN.js这个语言配置文件，如果不引入这个，默认的语言是英语的。这样的话，包括日历、错误提shu示信息，都会是英文显示，加了这个，就可以线程中文了。
   3. 百度UEditor编辑器之配置文件：ueditor.config.js，配置整个编辑器的特性的方法。
   4. 百度UEditor编辑器之配置文件：ueditor.all.js，编辑器源码文件。

2. 简单使用：

   引用uediter资源文件，初始化即可使用

   <script type="text/javascript" charset="utf-8" src=" ueditor.config.js"></script>
   <script type="text/javascript" charset="utf-8" src=" ueditor.all.min.js"> </script>
   <script type="text/javascript" charset="utf-8" src=" lang/zh-cn/zh-cn.js"></script>
   
   <script type="text/plain" id=myUuediter" name="ms" style="width: 100%;height: 300px;">'可加任意内容'</script>
                       <script type="text/javascript">
                           var editor = UE.getEditor('myUuediter');//得到富文本编辑器
                           UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
                           UE.Editor.prototype.getActionUrl = function (action) {
                               if(action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo'){
                                   return '${ctx}/ueditor/saveFile';//文件的传输处理（图片、视频）
                               }else{
                                   return this._bkGetActionUrl.call(this,action);
                               }
                           }
                       </script>
              

3. 关于配置的修改
   1. 禁止div转换成p标签

      

      上传内容会把div的标签转换为p标签，没有什么影响，可改可不改

      搜索allowDivTransToP，将注释去掉并且改为false

      allowDivTransToP:false      //允许进入编辑器的div标签自动变成p标签
                 

   2. 关闭自动保存

      搜索enableAutoSave，将注释去掉并且改为false

      enableAutoSave: false   //关闭自动保存
                 

   3. 如何调整ueditor工具栏

      ueditor功能强大，但是有些功能我们是用不到的，可以在ueditor.config.js中配置。搜索"toolbars"找到工具栏配置项，删掉不必要的功能就可以了。

      

   4. 如何修改ueditor默认样式

      如果想修改编辑器默认的字体等，可以找打开ueditor.all.js，搜索editor.js中的"render:"方法

      

   5. ueditor上传图片插入正文后如何默认居中

      修改\dialogs\image\image.js文件的initAlign()和setAlign方法。

      

   6. ueditor上传图片窗口，如何实现选择图片后自动上传

   上传图片窗口操作需要先选择图片，点击“开始上传”，然后插入图片。操作过程略显繁琐，其实可以去掉“开始上传”，在选中图片后自动上传。

   首先找到dialogs/image/image.html,隐藏image.html的“开始上传”按钮。

   display：none
              

   然后修改dialogs/image/image.js文件，找到addFile方法，然后在方法结尾添加以下代码：

   function addFile(file) {
           //自动上传
           clickUpload = function () {
             $upload.click();
           }
           setTimeout("clickUpload()", 200);
         }
              

   相关配置还有很多，比如自定义工具栏等等，参考解释。
4. 需要注意的是：配置文件要放在编辑器源码文件之前引用，否则没有效果。相当于有了环境，再去写代码。

5. 提供一个包：

   UEditer：https://pan.baidu.com/s/18yZKY8t-qbNw7bZYJFVd7g

   提取码：t4qy

6. 其他的富文本编辑器：

   TinyMCE

   官网: https://www.tiny.cloud/download/

   CKEditor

   官网: https://ckeditor.com/

   等等…