nuxt引入ueditor富本编辑器，前后端连载-CSDN博客

1.关于如何将ueditor里面的相关js文件引用到nuxt项目里？参考网站：nuxt官网文档 (zh.nuxtjs.org/)

首先,先去百度富文本编辑器官网(ueditor.baidu.com/website/)去下载ueditor 1.4.3.3 jsp 版本utf-8 然后把下下来的文件自己新建文件夹放进去（除了jsp文件夹）

(我把除了jsp的文件夹以外的所有文件放到了新建文件夹Ueditor里面，然后再把Ueditor文件夹放到nuxt的static下面，至于为何放到static里，请去看nuxt的官方文档)

然后给大家说一下nuxt引入外部js、css等文件的地方，nuxt不要向一般的vue那样在main.js里面引入外部js,nuxt引入外部文件在nuxt.config.js里面

注意;src : 'UE' 不能要 static

2.关于ueitor封装成组件统一调用及ueditor.config.js（前端主要配置文件）配置的问题

注意;'UE' 不能要 static

window.UEDITOR_HOME_URL="/UE/"
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    // console.log(URL)
    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        // , serverUrl: URL + "ue"
        ,serverUrl: "/api/ue"
复制代码

3、组件配置

<template>
    <div>
        <script :id=id type="text/plain"></script>
    </div>
</template>

<script>


    export default {
        name: "UEditor",
        props: {
            defaultMsg: {
                type: String,
                default:''
            },
            config: {
                type: Object
            },
            id: {
                type: String
            }
        },
        data() {
            return {
                editor: null
            }
        },
        mounted() {
            const _this = this;
            _this.editor = UE.getEditor(_this.id, _this.config); // 初始化UE
            _this.editor.addListener("ready", function () {
                _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
            });
        },
        destoryed() {
            this.editor.destory();
        },
        methods:{
            getContent() { // 获取内容方法
                return this.editor.getContent();
            }
        }
    }
</script>
复制代码

组件引入模版使用，一定要加v-if，不然会出现编辑器出不来的情况

<template v-if="this.defaultMsg">
    <UE :defaultMsg="defaultMsg" :config="config2" ref="ue2" :id="ue2"></UE>
</template>
复制代码

引入跟注册组件就不写出来了，读者自己加，下面是data 配置富本编辑器

data() {
    return {
      defaultMsg: '',
      ue2: "ue2",
      config2: {
        initialFrameWidth: null,
        initialFrameHeight: 400,
        //让编辑器的编辑框部分可以随着编辑内容的增加而自动长高
        autoHeightEnabled:false,
        //启用编辑器工具栏浮动
        autoFloatEnabled: true,
        maximumWords:300000, //允许的最大字符数 
        //定义工具栏
        toolbars:[["Source","Bold","Underline","JustifyLeft","JustifyCenter","JustifyRight","ForeColor","Undo","Redo","FontFamily","FontSize","InsertImage","Emotion","InsertVideo","Link","Map",'Preview','inserttable','FullScreen']],
        //关闭左下角path路径提示
        elementPathEnabled : false
      }
    };
复制代码

获取富本内容和赋值富本内容：

this.$refs.ue2.getContent()
赋值组件数据
this.defaultMsg=this.resData.details
复制代码

至此前端富本编辑器配置完成，但是会出现图片上传不了的问题

出现此种现象的原因是配置ueditor的图片以及文件的后台上传接口不正确;

如果Ueditor不需要使用文件以及图片的上传则在ueditor.config.js中进行如下配置:(将serverUrl注释掉)

// 服务器统一请求接口路径

// serverUrl: URL + "jsp/controller.jsp",

以后将不会再出现上述报错,但是也将无法进行图片的上传:如下图:

如果使用的是node的express做服务端,接口开发如下

首先下载编辑器包

npm install –save-dev ueditor

服务端项目文件中在public中增加如下目录以及文件，只要一个配置文件就行，不用改动

注:ueditor中的images文件夹是上传图片后存储的地方

nodejs中的config.js就是下载的ueditor包的jsp文件夹下config.json文件

最后在服务端配置上传模块

 1//百度编辑器配置
 2// 使用静态文件,不用就找不到路径
 3app.use(express.static(path.join(__dirname,'public')));
 4//加载ueditor 模块
 5var ueditor = require("ueditor");
 6
 7//使用模块
 8app.use("/api/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) { 
 9  // console.log('啊啊')
10  // ueditor 客户发起上传图片请求
11  if (req.query.action === 'uploadimage') {
12    var foo = req.ueditor;
13
14    var imgname = req.ueditor.filename;
15
16    var img_url = '/images/ueditor/';
17    res.ue_up(img_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
18    res.setHeader('Content-Type', 'text/html');//IE8下载需要设置返回头尾text/html 不然json返回文件会被直接下载打开
19  }
20  //  客户端发起图片列表请求
21  else if (req.query.action === 'listimage') {
22      var dir_url = '/images/ueditor/';
23      res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
24  }
25  // 客户端发起其它请求
26  else {
27      // console.log('config.json')
28      res.setHeader('Content-Type', 'application/json');
29      res.redirect('/ueditor/jsp/config.json');
30  }
31}));复制代码

重点

1 // 使用静态文件,不用就找不到路径
2 app.use(express.static(path.join(__dirname,'public')));
复制代码

最后再改一处地方，就是VUE 目录 config/index.js

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { // 设置跨域请求
    
      '/ueditor': {
        　　//后台接口地址
            target: 'http://localhost:5000',
        　　//这里可以模拟服务器进行get和post参数的传递
            changeOrigin: true,
        　　//前端所有的/ueditor'请求都会请求到后台的/ueditor'路径之下
            pathRewrite: {
        　　　　'^/ueditor': '/ueditor'
            }
        }
    },
复制代码

最后效果如下