vue中富文本编辑器的使用

在Vue3集成富文本编辑器是一个常见的需求，特别是在构建CMS（内容管理系统）或博客平台时。富文本编辑器允许
用户以可视化的方式编辑内容，而无需手动编写HTML代码。以下是使用Vue3集成富文本编辑器的步骤和最佳实践：

1.选择合适的富文本编辑器
首先，你需要选择一个适合Vue版本的富文本编辑器。我选择的是wang
Editor5，你还可以选择其他一些流行的选项包括Quill、CKEditor和TinyMCE。这些编辑器都有Vue组件或插件，可以方便地与Vue3集成。

2.安装和配置富文本编辑器
在你的Vue项目中安装富文本编辑器组件或插件。你可以使用npm或yarn来安装依赖。根据编辑器的文档，按照步骤进行安装和配置。这通常包括引入编辑器组件、注册插件和配置选项。
富文本编辑器依赖安装 editor

yarn add @wangeditor/editor
#或者 npm install @wangeditor/editor --save

3.集成到Vue组件
将富文本编辑器集成到Vue组件中。你可以创建一个专门的编辑器组件，并在需要的地方使用它。确保将编辑器的引用传递给组件，并在模板中渲染它。你也可以将编辑器作为一个独立的工具集成到Vue应用程序中，以便用户随时打开和编辑内容。
(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)定义 HTML 结构

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

(3)引入 JS 创建编辑器

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      // 也可以同步到 <textarea>
    }
}

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>

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

​