@wangeditor/editor-for-vue

### 关于 wangeditor 在 Vue 中使用的相关信息

#### 安装依赖
为了在项目中集成 `wangeditor`，需安装特定版本的包。本次示例使用的是 `wangeditor=4.6.6` 版本[^1]。

npm i wangeditor --save

#### 创建编辑器组件
创建一个新的 Vue 组件来封装 `wangeditor` 实例化逻辑以及配置选项。下面是一个简单的例子展示如何初始化编辑器并将其挂载到页面上[^2]：

import { createEditor } from '@wangeditor/editor'
// 导入样式文件
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: 'MyEditor',
  data() {
    return {
      editor: null,
      html: '<p>欢迎使用 <strong>wangEditor</strong></p>',
    }
  },
  mounted() {
    this.editor = createEditor({
      selector: '#editor-container', // DOM容器的选择器
      config: {},
      mode: 'default' // 或者 'simple'
    })
    
    // 设置初始 HTML 内容
    this.editor.txt.html(this.html)

    // 监听内容变化事件
    this.editor.on('change', () => {
        console.log('最新HTML:', this.editor.txt.html())
    });
  },
  beforeDestroy() {
    if (this.editor == null) return;
    this.editor.destroy(); // 销毁实例
  }
}

#### 处理编辑器交互操作
可以监听编辑器的各种事件来进行自定义业务逻辑开发，比如当用户修改文档时触发保存动作；也可以调用 API 方法向富文本框内插入指定格式的数据，像文字、链接或是多媒体资源等[^3]。

<div id="editor-container"></div>
<button @click="insertText">Insert Text</button>

<script>
methods: {
  insertText(){
     const textToBeInserted = "This is a test.";
     this.editor.command.insertText(textToBeInserted);
  }
}
</script>