vue中富文本编辑器的使用

vue-wangeditor在vue2.0上封装的组件，为方便使用vue2.0的开发者封装。

1、安装

npm install --save vue-wangeditor

2、在项目中直接使用

<template>
  <div v-if="isEdit">
              <vue-wangeditor
                ref="editor"
                id="editor"
                v-model="form.content"
                :menus="menus"
                height="300"
                width="100%"
              />
            </div>
    <div v-else v-html="form.content" />
</template>

import vueWangeditor from 'vue-wangeditor'
export default {
  components: {
    vueWangeditor
  }
}

3、在data中配置菜单

data(){
   return{
     form: {
        content: `<div></div>`
      },
     menus:[
        'source',	// 源码模式
        '|',
        'bold',	// 粗体
        'underline',	// 下划线
        'italic',	// 斜体
        'strikethrough',	// 中线
        'eraser',	// 清空格式
        'forecolor',	// 文字颜色
        'bgcolor',	// 背景颜色
        '|',
        'quote',	// 引用
        'fontfamily',	// 字体
        'fontsize',	// 字号
        'head',	// 标题
        'unorderlist',	// 无序列表
        'orderlist',	// 有序列表
        'alignleft',	// 左对齐
        'aligncenter',	// 居中
        'alignright',	// 右对齐
        '|',
        'link',	// 链接
        'unlink',	// 取消链接
        'table',	// 表格
        'emotion',	// 表情
        '|',
        'img',	// 图片
        'video',	// 视频
        'location',	// 位置
        'insertcode',	// 插入代码
        '|',
        'undo',	// 撤销
        'redo',	// 重做
        'fullscreen'	// 全屏
    ],

   
  } 
}  
 

4、获取编辑器的内容

this.form.content = this.$refs.editor.getHtml();

5、编辑器赋值

mounted() {
    //编辑器赋值
    setTimeout(() => {
      this.$refs.editor.setHtml(this.form.content);
    }, 1000);
  },