富文本编辑器UEditor

最新推荐文章于 2024-09-18 15:16:46 发布

放肆！

最新推荐文章于 2024-09-18 15:16:46 发布

阅读量662

点赞数 1

分类专栏：学习积累文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/weixin_44641846/article/details/114225572

版权

积累同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

学习

28 篇文章 0 订阅

订阅专栏

富文本编辑器UEditor

富文本编辑器，Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。
UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器，具有轻量、可定制、注重用户体验等特点。

展示结果如下：

添加图片文字：

在这里插入图片描述

引用配置
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，编辑器源码文件。

简单使用：

引用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>

关于配置的修改
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);
      }
```
相关配置还有很多，比如自定义工具栏等等，参考解释。
需要注意的是：配置文件要放在编辑器源码文件之前引用，否则没有效果。相当于有了环境，再去写代码。
提供一个包：

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

提取码：t4qy
其他的富文本编辑器：

TinyMCE

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

CKEditor

官网: https://ckeditor.com/

等等…