UEditorPlus富文本编辑器的基本使用
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>