wangEditor 是一款基于原生 JavaScript 封装,开源免费的富文本编辑器,支持常规的文字排版操作、插入图片、插入视频、插入代码等功能,同时提供多样化的扩展功能(如字体、颜色、表情、代码、地图等插件),支持插件化开发和自定义配置。该编辑器简洁易用,功能齐全,可广泛应用于各种 Web 项目中。
以下实战记录,基于wangEditor V5版,说明文档:传送门
一、编辑器基本配置
wangEditor 从 V5 版本开始,工具栏配置和菜单配置(如配置颜色、字体、链接校验、上传图片等)分离了。
1.编辑器自适应CSS
#editor—wrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container {
border-bottom: 1px solid #ccc;
}
#editor-container {
height: 500px;
}
2.构建编辑器容器
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
3.配置项设置
//配置项
const {createEditor, createToolbar} = window.wangEditor
const editorConfig = {
MENU_CONF: {},
placeholder: 'Type here...',
onChange(editor) {
const html = editor.getHtml()
//console.log(html)
}
}
const editor = createEditor({
selector: '#editor-container',
html: '',//预置内容
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
uploadVideoShow: false,
mode: 'default', // or 'simple'
})
4.获取内容
$("#btn").click(function () {
const html1 = editor.getHtml()
console.log(html1);
});
【注意】 HTML 内容必须是 wangEditor 生成的(即 editor.getHtml() 返回的) HTML 格式,不可以自己随意写。HTML 格式非常灵活,wangEditor 无法兼容所有的 HTML 格式。例如,wangEditor 可以识别 hello 为加粗,但无法识别 hello 等其他加粗方式。
二、上传图片配置
1.前端配置
//上传图片
editorConfig.MENU_CONF['uploadImage'] = {
server: 'up.php',
maxFileSize: 1 * 1024 * 1024, // 1M
allowedFileTypes: ['image/*'],
// 单个文件上传失败
onFailed(file, res) {
console.log('上传失败', res)
},
}
2.后台API接口配置
up.php文件(未做上传逻辑展示)
- 正常返回
$res = ["errno" => 0,
"data" => [
"url" => "20230613110558393.jpg"
]
];
die(json_encode($res));
- 异常返回
$res = [
"errno" => 1,
"message" => "失败信息"
];
die(json_encode($res));
三、隐藏上传视频
1.获取工具栏按钮
console.log(toolbar.getConfig().toolbarKeys);
2.排除菜单
- 如果仅仅想排除掉某些菜单,其他都保留,可以使用 excludeKeys 来配置。 可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置;
- 如果你想排除某个菜单组,可通过toolbar.getConfig().toolbarKeys 找到这个菜单组的 key;
//工具栏配置项
const toolbarConfig = {}
//排除菜单
toolbarConfig.excludeKeys = [
'uploadVideo' // 排除菜单组,写菜单组 key 的值即可
]
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
uploadVideoShow: false,
mode: 'default', // or 'simple'
})
总结
一直使用layui作为前端的配合组件,但是随着功能需求的不断增加。layedit富文本编辑器在2.8版本中彻底放弃了,只好寻找其他的富文本编辑器。
- wangEditor 从 V5 版本开始,有较大的技术更新;
- wangEditor 有详细的中文文档,以及中文交流环境;
- wangEditor 内置了所有常见的富文本操作功能,能满足绝大部分使用需求。直接配置使用即可,无需再二次开发;
- wangEditor 有丰富的 API 和足够的扩展性,允许你自定义开发菜单、模块、插件等;
- wangEditor 开源多年,大量用户使用和反馈,已经解决了很多问题;
@漏刻有时