Vue使用富文本编辑器

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

一.选取编辑器

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

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

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

二：实例代码

前端vue

html:

  

js:

后端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格式的数据来展示。客户端还需要引用一个样式如下

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

{{ Article.Content }}