富文本前端插件

富文本插件自己用到的几个,个人感觉:

1.wangeditor 3.0版本---官网

1.没有鼠标悬浮功能
2.字号自定义功能没有
3.字体/背景颜色默认有九个颜色，可以自定义
4.图片上传回调函数可成功

2.wangeditor2.0版本---官网

1.有鼠标悬浮功能
2.字号可以自定义但是标签是<font size=’7’></font>，标签font已被舍弃。
3.字体/背景颜色默认有九个颜色，可以自定义
4.图片功能没有试

3.vue-quill-editor

1.有鼠标悬浮功能
2.字号大小可自定义
3.字体/背景颜色是颜色板
4.图片上传回调函数失败(大家可以试试，如果成功欢迎分享)

4.kingEditor-不推荐

npm下载失败

5.ueditor 百度富文本插件

运行失败，一直说路径不对，放弃了......

下面写一个demo-是wangeditor 3.0版本。

安装：

npm i wangeditor -S

.vue文件

<template>
  <div>
    <div id="wangeditor">
      <div ref="editorElem" style="text-align:left;"></div>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
export default {
  name: 'wang',
  data() {
    return {
      editor: null,
      editorContent: ''
    };
  },
  mounted(){
       this.editor = new E(this.$refs.editorElem);
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = html => {
      this.editorContent = html;
      console.log(html,'html')
    };
    this.editor.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'image', // 插入图片
      'undo', // 撤销
      'redo' // 重复
    ];

    // 自定义配置颜色（字体颜色、背景色）
    this.editor.customConfig.colors = [
        'red',
        'blue',
    ]
      // 自定义字体
    // editor.customConfig.fontNames = [
    //     '宋体',
    //     '微软雅黑',
    //     'Arial',
    //     'Tahoma',
    //     'Verdana'
    // ]
 
    // 隐藏“网络图片”tab
    // this.editor.customConfig.showLinkImg = false

   // 上传图片的接口链接
    this.editor.customConfig.uploadImgServer = 'https://1025a0fb06dced8168b143c79bb8c676.m.pipedream.net'
    // 限制一次最多上传 X 张图片
    this.editor.customConfig.uploadImgMaxLength = 1
    this.editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg, result, editor){
        console.log(result,'result')
        let url = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1600225395&di=0ca91e1d779e798a5ce81a81b8e5a176&src=http://pic22.nipic.com/20120718/4499633_230508497000_2.jpg'
        insertImg(url)//url是后台返回的图片链接，此处我先用固定的一张图片链接写上
      }
    }
    this.editor.create(); // 创建富文本实例
  }
}
</script>

如图所示：

微信图片_20200928144220.png