基于 wangEditor插件，快速上手 富文本编辑器

前言：

以下不是基于 Vue 的 Demo，若需了解更多，请访问以下网址：
wangEditorhttps://www.wangeditor.com/

1、引入 css 样式

可自定义编辑器、工具栏的尺寸、边框、z-index 等样式

<link
  href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
  rel="stylesheet"
/>
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container {
    border-bottom: 1px solid #ccc;
  }
  #editor-container {
    height: 500px;
  }
</style>

2、引入 JS 库与代码

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
  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,
    mode: 'default', // or 'simple'
  })

  const toolbarConfig = {}

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
  })
</script>

以上的  onChange 函数属于编辑器 “变化” 时所回调的函数，以方便后续能快速的收集用户所操作的内容：

可以 F12 进行查找定位到隐藏的 <textarea> 标签处，进行测试：

这里是用户输入的内容：

将 <textarea> 标签放掉隐藏后进行展示：

每次进行操作内容都会进行监听变化：

3、定义 HTML 结构

定义在哪个位置，就在哪里进行展示富文本编辑器

<div id="editor—wrapper">
  <div id="toolbar-container"><!-- 工具栏 --></div>
  <div id="editor-container"><!-- 编辑器 --></div>
</div>

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

---

---