UEditorPlus

UEditorPlus是一款基于 UEditor 二次开发的富文本编辑器

官网地址：UEditorPlus 使用文档 (modstart.com)

功能亮点

全新的UI外观，使用字体图标替换原有图片图标
移除过时、无用的插件支持，不断完善使用体验
图片、文件、视频上传配置化定制增强
演示界面重构，右上角可直接查看当前演示界面代码
兼容现有UEditor，实现无缝切换

近期开发有用到，简单记录一下原生使用方法：

下载

首先引入UEditorPlus相关文件：

下载地址：ueditor-plus: 基于 UEditor 二次开发的富文本编辑器 (gitee.com)

下载后，以下俩个文件夹内是相关文件，可任选一个版本使用。

引入

<script type="text/javascript" src="/dist-min/ueditor.config.js"></script>
<script type="text/javascript" src="/dist-min/ueditor.all.js"></script>

位置

//这个代表你的编辑器位置  放在HTML文档中
<script id="editor" type="text/plain" style="height:300px;"></script>

启用

<script>
    var ue = UE.getEditor('editor', {
        // ... 更多配置
    });
</script>

配置

配置写到启用里面的更多配置处，配置属性可参考：UEditorPlus 配置文档 | UEditorPlus 使用文档 (modstart.com)

//写法，以toolbars(UEditorPlus 的工具栏配置为例)
<script>
    var ue = UE.getEditor('editor', {
          toolbars: [
        [
          "fullscreen", // 全屏
          "source", // 源代码
          "|",
          "undo", // 撤销
          "redo", // 重做
          "|",
          "bold", // 加粗
          "italic", // 斜体
          "underline", // 下划线
          "fontborder", // 字符边框
          "strikethrough", // 删除线
          "superscript", // 上标
          "subscript", // 下标
          "removeformat", // 清除格式
          "formatmatch", // 格式刷
          "autotypeset", // 自动排版
          "blockquote", // 引用
          "pasteplain", // 纯文本粘贴模式
          "|",
          "searchreplace", // 查询替换
        ]
      ]
    });
</script>

内容

我用的PHP直接提交的，所以要给将编辑器输入的内容不用post或get的方式去提交，而是在form表单中直接提交，但编辑器的内容无法作为input的内容，因为用的原生方法，也没仔细看教程，就用了监听的方法，监听到编辑器的内容发生改变，就赋值给某个输入框的值。

编辑器事件监听

editor.addListener("contentchange", function () {
    console.log('编辑器内容发生改变');
    var input = document.getElementById("myInput"); //获取input元素
    input.value = UE.getEditor('editor').getContent();//给input赋值编辑器的内容
})

注：

getContent()：返回编辑器的内容字符串。

getAllHtml()：取得完整的html代码(整个页面)，可以直接显示成完整的html文档。

getContentTxt()：得到编辑器的纯文本内容，但会保留段落格式

getContentTxt()：获取编辑器中的纯文本内容,没有段落格式

…..

sync()

哦吼我sha了，看了一下文档，有一个方法 sync()可以直接同步数据到表单，所以不用麻烦的用编辑器事件监听了。

同步数据到编辑器所在的form 从编辑器的容器节点向上查找form元素，若找到，就同步编辑内容到找到的form里，为提交数据做准备，主要用于是手动提交的情况后台取得数据的键值，使用你容器上的name属性，如果没有就使用参数里的textarea项

根据传入的formId，在页面上查找要同步数据的表单，若找到，就同步编辑内容到找到的form里，为提交数据做准备后台取得数据的键值，该键值默认使用给定的编辑器容器的name属性，如果没有name属性则使用参数项里给定的“textarea”项

//在 HTML 中定义一个表单元素
<input type="hidden" name="content" id="content">

//在 JavaScript 中获取编辑器实例，并调用 `sync` 方法：
<script>
  var editor = UE.getEditor('editor');
  editor.sync('content');
</script>