wangeditor富编辑器在node和vue前后台分离的使用

本来是想用百度的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模板文件，文件的具体内容和解释如下：

　　2.3 在线完整代码：https://github.com/13476075014/node-vue/blob/master/mynodeproject/15.TimeBlog/client/src/components/template/tem_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 , 建立一个后台接受图片上传的接口，具体代码如下：

　完整的在线代码：https://github.com/13476075014/node-vue/blob/master/mynodeproject/15.TimeBlog/server/routes/artical.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)；

四：最后的效果就如下图：

posted @ 2018-05-31 14:54 missLiuliu 阅读(1849) 评论(0) 编辑收藏举报

刷新页面返回顶部

missLiu