本来是想用百度的ueditor编辑器来达到想要的功能的，但在使用中，感觉前后台分离上，需要引入的东西过多，不轻量；然后就去尝试用wangeditor(这个名字听着感觉有点太随意的感觉。。。。但功能上还是很严谨，很轻量的)；
官网：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
具体使用方法如下：
一：我使用的开发环境
后台是用的express生成器，生成的后台node环境；
前台是用的vue-cli的脚手架直接搭建的项目；
二：前台的配置
2.1 进入自己的前台项目，打开cmd控制台，输入 ： npm install wangeditor --save ;就完成了安装插件到自己项目中；还是很easy的；
2.2 进入src - components 新建wangEditor.vue模板文件，文件的具体内容和解释如下：
<template> <div id="myWangEditor" ref="myWangEditor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> </template> <script> import wangEditor from 'wangeditor'; //引入刚npm安装的wangeditor插件 export default({ name:"MyWangEditor", data(){ return { editorContent : "" //内容 } }, created(){ }, mounted(){ var _this = this; var editor = new wangEditor(this.$refs.myWangEditor); //实例化wangeditor
editor.customConfig = {
onchange : (html) =>{this.editorContent = html;} ,
uploadImgMaxSize : 3 * 1024 * 1024 , // 将图片大小限制为 3M
uploadImgMaxLength : 1 , // 限制一次最多上传 1 张图片
uploadFileName : 'myFileName' , //设置上传图片文件的时候，后台接受的文件名，files.myFileName;
withCredentials : true , //跨域上传中如果需要传递 cookie 需设置 withCredentials
uploadImgTimeout : 3000 , //自定义 timeout 时间，这里是设置的3秒
uploadImgServer : 'http://10.55.4.74:3000/ueditor/wangeditor/upload' , //上传到后台的接口
};
/*editor.customConfig.uploadImgParams = {//如果要自定义传一些参数，就在这里；
// 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
// 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
img_name:_this.img_name,
token: 'abcdef12345'
};*/
this.toListenUp(editor);//监听上传的各个阶段 editor.create(); }, methods:{ toListenUp:function(editor){ //监听上传图片的几个阶段，和做相应的处理 var _this = this; editor.customConfig.uploadImgHooks = { before: function (xhr, editor, files) { // 图片上传之前触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传 // return { // prevent: true, // msg: '放弃上传' // } }, success: function (xhr, editor, result) { // 图片上传并返回结果，图片插入成功之后触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 }, fail: function (xhr, editor, result) { // 图片上传并返回结果，但图片插入错误时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 }, error: function (xhr, editor) { // 图片上传出错时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, timeout: function (xhr, editor) { // 图片上传超时时触发 // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 }, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置 // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错） customInsert: function (insertImg, result, editor) { // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！） // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片： var url = result.data[0] ； //获取后台返回的图片路径 insertImg(url) ；//把图片路径展示在编辑器里面 // result 必须是一个 JSON 格式字符串！！！否则报错 } } } } }) </script> <style> </style>
2.3 前台配置基本简洁的配置就是这些，还有些参数配置，可以去看官网；
三：后台node的配置
3.1 进入后台项目文件夹 routes 新建路由js文件 ueditor.js , 建立一个后台接受图片上传的接口，具体代码如下：
var express = require('express');
var router = express.Router();
var formidable = require('formidable'); //上传图片处理的插件
var fs = require("fs"); //文件模块
var context = require('../public/javascripts/context'); //环境的一些配置
//wangeditor上传图片的地址
router.post("/wangeditor/upload",function(req,res,next){
var form = new formidable.IncomingForm();
//设置文件上传存放地址（需要先把这个文件夹，在项目中建好）
form.uploadDir = "./public/images/wang";
//执行里面的回调函数的时候，表单已经全部接收完毕了。
form.parse(req, function(err, fields, files) {
var oldpath = files.myFileName.path; //myFileName就是我们刚在前台模板里面配置的后台接受的名称；
var extname = files.myFileName.name; //因为formidable这个时候存在我们刚路径上的，只是一个path，还没有具体的扩展名，如：2.png这样的
//新的路径由组成：原父路径 + 拓展名
var newpath = "./public/images/wang/" + extname;
//改名
fs.rename(oldpath, newpath, function(err) { //把之前存的图片换成真的图片的完整路径
if(err) {
res.send({errno:1,data:[]});
};
var mypath = newpath.replace("./public","http://" + context.ip +":3000"); //context.ip是我自己设置的后台的ip名，根据环境，可以是localhost,也可以是电脑ip
res.send({errno:0,data:[mypath]}) //返回图片路径，让前端展示
});
});
})
module.exports = router; //暴露接口
3.2 在主app.js中，设置路由，让前台访问到，如下：
...........别的原有的配置，忽略。。。。
//新加：
var ueditor = require('./routes/ueditor');
app.use("/ueditor",ueditor)；
四：最后的效果就如下图：
