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

在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>

效果:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容