vue获取编辑器纯文字_Vue使用富文本编辑器

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

一.选取编辑器

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

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

二：实例代码

前端vue

html:

js:

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()

}

}

后端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 }}