集成富文本编辑器：wangEditor插件

介绍

富文本：带样式、多格式的文本，在前端一般使用标签配合内联样式实现。

集成富文本编辑器wangEditor插件步骤：
https://www.wangeditor.com/v5/getting-started.html

1）引入CSS定义样式
2）定义html结构
3）引入 JS 创建编辑器
4）监听内容改变，保存在隐藏文本域，便于后期收集

示例片段

引入CSS定义样式

对应到官网的：

在自己项目的html文件中增加css文件：

在自己项目的 css文件（或者直接在html的style中）增加样式：

定义HTML结构

官网的示例代码：

将示例代码拷贝到自己html文件需要的地方：

引入 JS 创建编辑器

将js代码放入自己html文件中的<script></script>标签内，或者放到单独的js文件中（在html文件中引用该js文件）：

现在在浏览器中打开html页面，就创建了一个基本的富文本编辑器：

js创建编辑器部分代码的说明

// 富文本编辑器
// 创建编辑器函数，创建工具栏函数
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(简洁功能)
  mode: 'default', // or 'simple'
})

// 工具栏配置对象
const toolbarConfig = {}

// 创建工具栏
const toolbar = createToolbar({
  // 为指定的编辑器创建工具栏
  editor,
  // 工具栏创建的位置
  selector: '#toolbar-container',
  // 工具栏的配置对象
  config: toolbarConfig,
  // 配置集成的模式，
  mode: 'default', // or 'simple'
})