wangEditor 5¶
介绍¶
- 开源 Web 富文本编辑器，开箱即用，配置简单
-
简洁易用，功能强大:快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。
-
支持 JS Vue React:不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。
功能介绍¶
全部的功能点（从左到右）
- 包括：【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表（有序、无序）、表情、图片（网络图片、本地上传）、表格、视频、代码块、返回上一步、返回下一步（但其实ctrl+z快捷键也可以）】
创建空白编辑器¶
引入编辑器（多种引入方式）¶
1.包管理工具例如node下载
- npm install wangeditor
- bower install wangEditor
2.下载源文件js引入（ https://github.com/wangfupeng1988/wangEditor/releases）
3.在线cdn引入（https://www.bootcdn.cn/wangEditor/）
- 网站链接选择版本复制引入即可
引入 CSS 定义样式¶
可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。
/* 富文本编辑器 */
#editor—wrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 500px; }
定义 HTML 结构¶
<div>
<label for="">内容：</label>
<!-- 富文本编辑器位置 -->
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
<!-- 记录富文本内容-用于表单收集 -->
<textarea name="content" class="publish-content" hidden></textarea>
</div>
引入 JS 创建编辑器¶
1.配置内容全部写在代码注释中
// 富文本编辑器
// 创建编辑器函数，创建工具栏函数
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
// 占位提示文字
placeholder: '发布文章内容',
// 编辑器变化时的回调函数
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 也可以同步到 <textarea>
// 为了后续快速收集整个表单内容做铺垫
document.querySelector('.publish-content').value = html
}
}
const editor = createEditor({
// 创建位置
selector: '#editor-container',
// 默认内容
html: '<p><br></p>',
// 配置项
config: editorConfig,
// 配置集成模式 （default 全部） （simple 简ji）
mode: 'default', // or 'simple'
})
// 工具栏配置对象
const toolbarConfig = {}
// 创建工具栏
const toolbar = createToolbar({
// 为指定的编辑器创建工具栏
editor,
// 工具栏创建的位置
selector: '#toolbar-container',
// 工具栏配置对象
config: toolbarConfig,
// 配置集成模式
mode: 'simple', // 'simple'or'default'
})