Vue2.0 中使用 wangEditor 富文本编辑器

王小婷

发布于 2023-09-27 08:27:07

9540

发布于 2023-09-27 08:27:07

在Vue 2.0中使用wangEditor富文本编辑器，你可以按照以下步骤进行操作：

1：首先，在Vue项目中安装wangEditor。可以通过npm或yarn来安装：

npm install wangeditor --save

2：在需要使用富文本编辑器的组件中，引入wangEditor：

import WangEditor from 'wangeditor';

3：在该组件的mounted钩子函数中，创建并初始化wangEditor实例：

mounted() {
  const editor = new WangEditor(this.$refs.editorContainer);
  editor.create();
}

4：在组件的模板中，添加一个包含编辑器的div容器，以及一个保存按钮：

<template>
  <div>
    <div ref="editorContainer"></div>
    <button @click="saveContent">保存</button>
  </div>
</template>

5：在组件的方法中，定义保存按钮的点击事件，并获取编辑器中的内容：

methods: {
  saveContent() {
    const editor = WangEditor.getEditor(this.$refs.editorContainer);
    const content = editor.$txt.html();
    // 处理保存逻辑，可以将content发送到服务器或者进行其他操作
    console.log(content);
  }
}

现在，已经成功在Vue 2.0中使用wangEditor富文本编辑器了。根据wangEditor的文档进一步了解其更多功能和配置选项了~~

demo

<template>
  <div>
    <div ref="editorContainer"></div>
    <button @click="saveContent">保存</button>
  </div>
</template>

<script>
import WangEditor from 'wangeditor';

export default {
  mounted() {
    const editor = new WangEditor(this.$refs.editorContainer);
    editor.create();
  },
  methods: {
    saveContent() {
      const editor = WangEditor.getEditor(this.$refs.editorContainer);
      const content = editor.$txt.html();
      // 处理保存逻辑，可以将content发送到服务器或者进行其他操作
      console.log(content);
    }
  }
};
</script>

效果：