Vue使用富文本编辑器

本人用vue使用富文本编辑器踩了很多坑，特记下供大家借鉴。

一.选取编辑器

刚开始使用的是kindeditor，在npm社区中找到了适用于vue的版本vue-kindeditor。存在如下缺陷：文档不全、网上资料不全、npm社区实例过于简单、上传图片不能控制图片尺寸。

最终换用了wangEditor，优点：文档齐全（有具体vue用法实例）、网上资料多、上传图片可以控制尺寸。

个人推荐wangEditor，官网wangEditor - 轻量级web富文本编辑器

二：实例代码

前端vue

html:
<div class="ArticleDetail">
  <div ref="editor" style="text-align:left"></div>
</div>

js:
<script>
  import axios from 'axios';
  import {Loading} from 'element-ui'
  import E from 'wangeditor'
  var editor;

  export default {
    name: "WriteArticle",
    data: function () {
      return {
        Title:'',
        Content:''
      }
    },
    mounted:function(){
      var That = this;
      editor = new E(this.$refs.editor);
      editor.customConfig = {
        onchange:function(html){
          That.Content = html
        },
        uploadImgServer: '/api/UploadImg', // 上传图片到服务器
        uploadFileName : 'Content', //后端使用这个字段获取图片信息
        uploadImgMaxLength : 1 , // 限制一次最多上传 1 张图片
      } 
      editor.create()
    }
  }
</script>

后端node.js

Express.post('/UploadImg',function (Request,Response) {
  var From = new Formidable.IncomingForm();
  //设置保存 文件路径
  var TargetFile = Path.join(__dirname, './Public/');
  From.uploadDir = TargetFile;

  From.parse(Request, function (err, fields, files) {
    if (err) throw err;
    var FilePath = files.Content.path;    //此content由前端uploadFileName设置
    var NewPath = Path.join(Path.dirname(FilePath), files.Content.name);
    FS.rename(FilePath, NewPath, function (err) {
      if (err) throw err;
      var MyJson = {
        errno: 0,
        data:['http://localhost:8888/' + files.Content.name]
      };
      Response.json(MyJson);
    });
  });
});

三：代码高亮

用了wangEditor才发现，3.0版的不支持代码高亮。可是我的应用场景是我的博客，必须要有代码高亮功能，无奈换掉编辑器。

经过一番对比又选了一个叫mavon-editor的基于vue实现的MakeDown编辑器。好处是使用真滴方便，而且可以与别的MarkDown编辑器实现直接复制文本。Github地址如下hinesboy/mavonEditor，按文档操作即可

需要注意的地方是一般使用富文本的都是管理端，客户端拿到MarkDown格式的数据需要使用maked组件转成html格式的数据来展示。客户端还需要引用一个样式如下

<link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css" rel="stylesheet">

还需要在展示数据的容器上加上一个class，如：

<div class="markdown-body" v-html="Article.Content">{{ Article.Content }}</div>

四：演示地址

我博客管理端文章管理页面就用的wangEditor

管理端演示地址：注意找文章管理页面

用户端演示地址：孙权的博客，博客里的文章都是富文本编辑器编辑哒。

代码github地址：博客管理端代码

我还用原生JS写了一个小游戏：贪吃蛇，欢迎大家来玩