vue3使用wangeditor富文本编辑器

 

npm下载

 npm i wangeditor -S         

 

在要使用的页面导入

import EWangEditor from "wangeditor";
import {onMounted, reactive} from "vue";

定义

 

 

 复制下面的代码，放到上面截图的位置即可

setup() {
    let data = reactive({});
    onMounted(() => {
      let editor = new EWangEditor("#editor");
      editor.config.uploadImgShowBase64 = true;
      editor.config.onchangeTimeout = 400;

      editor.config.customAlert = (err) => {
        console.log(err);
      };

      editor.customConfig = editor.customConfig
          ? editor.customConfig
          : editor.config;

      editor.customConfig.onchange = (html) => {
        data.editorContent = html;
        document.getElementById('in').value = html;
        console.log(html);
      };
      //以下为新增
      const menuItem = [  //工具栏里有哪些工具
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  //字号
        'fontName',  //字体
        'italic',  // 斜体
        'underline',  //下划线
        'strikeThrough',  //删除线
        'indent',  //缩进
        'lineHeight',  //行高
        'foreColor',  //文字颜色
        'backColor',  //文字背景颜色
        'link',  //链接，插入一个链接地址，如果填写了描述，则高亮显示描述。若没有，则高亮显示链接
        'list',  // 序列（有序列表、无序列表）
        'todo',  //待办事项
        'justify',  // 对齐方式
        'quote',  //引用
        'emoticon',  //表情
        'image',  //插入图片
        'video',  //插入视频
        'table',  //表格
        'code',  //代码
        'splitLine',  //分割线
        'undo',  //撤销
        'redo' //恢复
      ];

      editor.config.menus = [...menuItem]; /* 应用设置好的工具栏 */

      editor.config.colors = ["#000000", "#eeece0", "#1c487f", "#4d80bf"];  /* 文字颜色、背景色可以选择哪些颜色? */

      editor.config.fontNames = [ /* 字体工具提供哪些字体? */
        "黑体",
        "仿宋",
        "楷体",
        "标楷体",
        "华文仿宋",
        "华文楷体",
        "宋体",
        "微软雅黑",
      ];
      editor.config.height = 700;  //你可能发现这个编辑器是没法用样式调高度的?


      editor.customConfig.customUploadImg = function (files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        // 在这里进行一系列的校验
        const formData = new FormData();
        formData.append("file",files[0]);
        axios.post('http://localhost:8080/itkb/square/article/uploadArticleImage',formData,{
          'Content-type' : 'multipart/form-data'
        }).then(res=>{
          // 上传成功后的处理
          // 上传代码返回结果之后，将图片插入到编辑器中
          insert(res.data)
        },err=>{
          // 出现错误时的处理
          console.log('上传图片失败'+err.data)
        })

      }
      //新增至此
      editor.create();
    });

  }

 

使用

<div class="content">
     <p name="editor" id="editor" ref="editor" style="z-index: -1"></p>
     <el-input id="in" type="hidden"></el-input><!--绑定输入--editor输入的绑定到这个里-->
</div>

运行