vue 富文本 WangEditor基本使用

npm下载

npm i wangeditor --save

import E from "wangeditor";
 data() {
    return {
       phoneEditor: "",
    };
  },
 mounted() {
    // wangeditor
    this.phoneEditor = new E("#websiteEditorElem");
    // 上传图片到服务器，base64形式
    // this.phoneEditor.customConfig.uploadImgShowBase64 = true;
    // 隐藏网络图片
    // this.phoneEditor.customConfig.showLinkImg = false;
    this.phoneEditor.config.menus = [
      // 菜单配置
    'head', // 标题
     'bold', // 粗体
     "fontSize", // 字号
     "fontName", // 字体
     "italic", // 斜体
     "underline", // 下划线
     "strikeThrough", // 删除线
     "foreColor", // 文字颜色
     "backColor", // 背景颜色
     'link', // 插入链接
     'list', // 列表
     'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      "redo", // 重复
    ];
    // 创建一个富文本编辑器
    this.phoneEditor.create();
    //console.log(this.phoneEditor.config.menus);
    // 富文本内容
    this.phoneEditor.txt.html();
  },
   methods: {
   submitForm(formName) {
   //this.phoneEditor.txt.html() 富文本内容
      if (this.phoneEditor.txt.html().length > 700) {
        this.$message({
          message: "公司描述超出限制",
          type: "warning",
        });
        return;
      }
   	}
   },