快速开始

如果你想用于 Vue React ，请先阅读本文，然后看这里。

创建空白编辑器

定义 html 结构

编辑器和工具栏是强制分离的，所以要定义两个 div 。

  1. <div id="toolbar-container"></div>
  2. <div id="editor-container"></div>

创建编辑器和工具栏

注意，安装 wangEditor 参考这里。

引入 wangEditor

  1. // npm 安装
  2. import '@wangeditor/editor/dist/css/style.css'
  3. import { createEditor, createToolbar, IEditorConfig, IDomEditor } from '@wangeditor/editor'
  5. // CDN 引入 css 和 js
  6. // const { createEditor, createToolbar } = window.wangEditor

创建编辑器

  1. //【注意】下面使用的 typescript 语法。如用 javascript 语法，把类型去掉即可。
  3. const editorConfig: Partial<IEditorConfig> = {}
  4. editorConfig.placeholder = '请输入内容'
  5. editorConfig.onChange = (editor: IDomEditor) => {
  6.     // 当编辑器选区、内容变化时，即触发
  7.     console.log('content', editor.children)
  8.     console.log('html', editor.getHtml())
  9. }
  11. // 创建编辑器
  12. const editor = createEditor({
  13.   selector: '#editor-container',
  14.   config: editorConfig,
  15.   mode: 'default' // 或 'simple' 参考下文
  16. })
  17. // 创建工具栏
  18. const toolbar = createToolbar({
  19.   editor,
  20.   selector: '#toolbar-container',
  21.   mode: 'default' // 或 'simple' 参考下文
  22. })

这样就创建出了一个最基本的编辑器。

快速开始 - 图1

TIP

  1. 工具栏并不是强制的，如不需要，可以不创建。这并不影响编辑器的使用。
  2. 工具栏的菜单是可以配置的，可参考配置。
  3. 其他 editor config 可参考配置。

mode 模式

编辑器内置了两种模式（区别可参考 demo快速开始 - 图2open in new window）

  • default 默认模式 - 集成了 wangEditor 所有功能
  • simple 简洁模式 - 仅有部分常见功能，但更加简洁易用

TIP

无论使用哪一种模式，都不会影响其他的配置和功能。

使用 textarea

editor changed 后，同步内容到 textarea 即可

  1. <textarea id="textarea-1"></textarea>
  2. <textarea id="textarea-2"></textarea>
  1. editorConfig.onChange = (editor: IDomEditor) => {
  2.     const content = editor.children
  3.     const contentStr = JSON.stringify(content)
  4.     document.getElementById('textarea-1').value = contentStr
  6.     const html = editor.getHtml()
  7.     document.getElementById('textarea-2').value = html
  8. }

尺寸和样式

宽度和高度

宽度都是自适应的，默认会 100% 宽度。

编辑器的高度，wangEditor 会默认设置 min-height: 300px; 给一个最小高度。其他的需要你自己定义。

  1. <div id="toolbar-container"></div>
  2. <div id="editor-container" style="height: 600px;"></div>

z-index

wangEditor 没有针对 z-index 做配置，需要你自己定义。

  1. <div id="toolbar-container" style="z-index: 101;"></div>
  2. <div id="editor-container" style="z-index: 100;"></div>

全屏

wangEditor 工具栏内置了“全屏”菜单，但使用它需要有一个条件：toolbar-container 和 editor-container 必须有同一个父元素。

  1. <style>
  2.   .full-screen-container {
  3.     z-index: 100; /* 如有需要，可以自定义 z-index */
  4.   }
  5. </style>
  7. <div class="full-screen-container">
  8.   <div id="toolbar-container"> <!-- 用于创建工具栏 --> </div>
  9.   <div id="editor-container"> <!-- 用于创建编辑器 --> </div>
  10. </div>

如果你的 html 结构无法做到上述要求，或者不想用全屏功能，可以通过工具栏配置 { excludeKeys: 'fullScreen' } 来隐藏全屏菜单。

其他

  • 可以自定义 toolbar-container 的样式和行为，实现工具栏 fixed 到顶部
  • 可以自定义 html 实现腾讯文档、语雀文档的效果，参考 demo快速开始 - 图3open in new window
  • 其他自行探索

快速开始 - 图4

一个页面多个编辑器

wangEditor 支持多个编辑器共存，正常创建即可

  1. <div>
  2.   <div id="toolbar-container-1"></div>
  3.   <div id="editor-container-1"></div>
  4. </div>
  6. <hr>
  8. <div>
  9.   <div id="toolbar-container-2"></div>
  10.   <div id="editor-container-2"></div>
  11. </div>
  1. // 创建编辑器1
  2. const editor1 = createEditor({
  3.   selector: '#editor-container-1',
  4.   mode: 'default'
  5. })
  6. // 创建工具栏1
  7. const toolbar1 = createToolbar({
  8.   editor: editor1,
  9.   selector: '#toolbar-container-1',
  10.   mode: 'default'
  11. })
  13. // 创建编辑器2
  14. const editor2 = createEditor({
  15.   selector: '#editor-container-2',
  16.   mode: 'simple'
  17. })
  18. // 创建工具栏2
  19. const toolbar2 = createToolbar({
  20.   editor: editor2,
  21.   selector: '#toolbar-container-2',
  22.   mode: 'simple'
  23. })