在vue中完美使用ueditor组件(cdn)解读_Vue.js

vue使用ueditor组件(cdn)

前言：无需main.js或页面全局或局部引入，直接使用cdn将ueditor作为vue组件

请直接创建vue文件，作为组件使用。复制粘贴，即可直接使用(此篇只展示前端代码,后端大家自由选择,图片资源存放建议使用阿里云oss或者七牛云对象存储)

component组件代码：

<template>
    <script :id="randomid" name="content" type="text/plain" :style="ueditorstyle"></script>
</template>
<script>
export default {
    name: 'editor',
    props: {
        ueditorpath: {
            // ueditor 代码的路径
            type: string,
            default: '............',//cdn地址
        },
        ueditorconfig: {
            // ueditor 配置项
            type: object,
            default: function() {
                return {
                    toolbars:[['source', 'bold', 'italic', 'underline', 'removeformat', 'forecolor', 'backcolor', 'paragraph', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'simpleupload']],
                    serverurl: '............',//后台保存路由
                };
            }
        },
        ueditorstyle: {
        	type: object,
        	default: function() {
                return {
                }
            }
        },
    },
    data() {
        return {
            // 为了避免麻烦，每个编辑器实例都用不同的 id
            randomid: 'editor_' + (math.random() * 100000000000000000),
            instance: null,
            // scripttagstatus -> 0:代码未加载，1:两个代码依赖加载了一个，2:两个代码依赖都已经加载完成
            scripttagstatus: 0
        };
    },
    created() {
        if (window.ue !== undefined) {
            // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
            this.scripttagstatus = 2;
            this.initeditor();
        } else {
            // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
            this.insertscripttag();
        }
        console.log(this)
    },
    beforedestroy() {
        // 组件销毁的时候，要销毁 ueditor 实例
        if (this.instance !== null && this.instance.destroy) {
            this.instance.destroy();
        }
    },
    methods: {
        insertscripttag() {
            let editorscripttag = document.getelementbyid('editorscripttag');
            let configscripttag = document.getelementbyid('configscripttag');
 
            // 如果这个tag不存在，则生成相关代码tag以加载代码
            if (editorscripttag === null) {
                configscripttag = document.createelement('script');
                configscripttag.type = 'text/javascript';
                configscripttag.src = this.ueditorpath + 'neditor.config.js';
                configscripttag.id = 'configscripttag';
 
                editorscripttag = document.createelement('script');
                editorscripttag.type = 'text/javascript';
                editorscripttag.src = this.ueditorpath + 'neditor.all.min.js';
                editorscripttag.id = 'editorscripttag';
                let s = document.getelementsbytagname('head')[0];
                s.appendchild(configscripttag);
                s.appendchild(editorscripttag);
            }
 
            // 等待代码加载完成后初始化编辑器
            if (configscripttag.loaded) {
                this.scripttagstatus++;
            } else {
                configscripttag.addeventlistener('load', () => {
                    this.scripttagstatus++;
                    configscripttag.loaded = true;
                    this.initeditor();
                });
            }
 
            if (editorscripttag.loaded) {
                this.scripttagstatus++;
            } else {
                editorscripttag.addeventlistener('load', () => {
                    this.scripttagstatus++;
                    editorscripttag.loaded = true;
                    this.initeditor();
                });
            }
 
            this.initeditor();
        },
        initeditor() {
            // scripttagstatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
            if (this.scripttagstatus === 2 && this.instance === null) {
                // vue 异步执行 dom 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
                // 所以，我们只能在 nexttick 里面初始化 ueditor
                this.$nexttick(() => {
                    this.instance = window.ue.geteditor(this.randomid, this.ueditorconfig);
                    // 绑定事件，当 ueditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
                    this.instance.addlistener('ready', () => {
                        this.$emit('ready', this.instance);
                    });
                });
            }
        }
    }
};
</script>
 
<style>
	.edui-editor {
    	line-height: normal;
	}
</style>

在使用页面

import editor from '你的component路径/editor.vue'

使用代码：

<!--html片段 -->
<el-form-item label="奖品说明" prop="description" :error="prize.errors.description">
     <editor @ready="editorready" :ueditorstyle="ueditorstyle">            
     </editor>
</el-form-item>
 
<!-- script片段 -->
 
import editor from '你的component路径/editor.vue'
export default {
    data(){
        return {
            ueditorstyle: {//ueditor样式
              width: '100%',
              height: '200px'
            },
        }
    },
    components:{
        editor
    },
    methods:{
      editorready (editor) {//保存ueditor内容
        this.editor = editor
        if (this.$router.currentroute.params.id > 0) this.fetch()
        editor.addlistener('afterautosave', () => {
          this.prize.data.description = editor.getcontent()
        })
      },
    },
}
 
 
<!-- 注意点 -->
this.editor.setcontent(编辑框内的数据)//设置ueditor框内内容，在编辑时使用

vue项目使用ueditor指南

基本使用

1.下载资源包

因为ueditor在npm上暂无官方依赖包，因此需要先到官网下载文件包，我下载的是jsp版本的

2.引入依赖文件

将下载后的文件夹命名为ue，并放入到项目static文件夹中，然后再main.js引入依赖文件（我这里是全局引入，也可以再使用的组件中引入）；

import '../static/ue/ueditor.config.js'
import '../static/ue/ueditor.all.min.js'
import '../static/ue/lang/zh-cn/zh-cn.js'
import '../static/ue/ueditor.parse.min'

3.初始化ueditor

我这里是单独将ueditor抽成一个组件，因此初始化时的id和配置都是从父组件传入的。定义组件：

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'ue',
  data () {
    return {
      editor: null
    }
  },
  props: {
    config: {
      type: object
    },
    id: {
      type: string
    },
    content: {
      type: string
    }
  },
  mounted () {
    this._initeditor()
  },
  methods: {
    _initeditor () { // 初始化
      this.editor = ue.geteditor(this.id,this.config)
    },
    getuecontent () { // 获取含标签内容方法
      return this.editor.getcontent()
    }
  },
  destroyed () {
    this.editor.destroy()
  }
</script>

4.使用组件：

(1).通过import引入定义好的组件；

import ue from '@/components/ueditor/ueditor.vue'

(2).在对应的位置使用组件

<el-form-item label="文章内容" prop="articlecontent">
  <ue :id=id :config=config  ref="ue"></ue>
</el-form-item>

(3).在父组件的data中定义初始化配置

// 初始化ueditor配置参数
      config: {
        initialframewidth: null,
        initialframeheight: 300
      },
      id: 'container',// 不同编辑器必须不同的id

(4).在父组件中获取编辑器内容

// 获取富文本内容
    getediotrcontent () {
      let content = this.$refs.ue.getuecontent() // 调用子组件方法
      this.articledata.articlecontent = content
    }

使用配置

如果需要使用到图片上传功能就需要进行在资源文件ueditor.config.js中正确配置资源路径和图片上传路径

资源加载路径：window.ueditor_home_url = "/static/ue/";

文件上传路径：serverurl: 后台接口地址

跳坑心得

1.开发环境正常使用，但生产环境样式文件未加载，编辑器无法正常显示，图片上传功能无法使用

（1）样式文件未加载

在开发环境我配置的资源路径是：window.ueditor_home_url = "/static/ue/";

但当我发布到生产环境时样式完全乱了。

—— 这是因为我代码不是直接放在服务器根目录，而是下级文件夹中，因此资源文件无法正确加载，因为需要开发环境和生产环境配置不同的window.ueditor_home_url，当然如果代码放在根目录，此处无需修改

（2）图片上传无法使用

—— 这是因为的在开发环境上传路径做了代理，而static文件不会被打包压缩，在生产环境请求路径就不对。

以上两个问题，我做了如下配置：

  var serverapi = '';
  if (process.env.node_env === "production" || process.env.node_env === "productiontest") { // 生产/测试环境
    window.ueditor_home_url = "/newconsole/modules/static/ue/";
    serverapi = "/newconsole/static/ue/config/getconfig"
  }else { // 开发环境
    window.ueditor_home_url = "/static/ue/";
    serverapi = "/api/static/ue/config/getconfig"
  }
 
  var url = window.ueditor_home_url || getuebasepath();
     /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏url变量。
     */
    window.ueditor_config = {
 
        //为编辑器实例添加一个路径，这个不能被注释
        ueditor_home_url: url,
        // 服务器统一请求接口路径
        serverurl: serverapi
      }

这样就可以很好的兼任开发环境和生产环境。

2.编辑器内容过多时，会将编辑器撑开拉长，体验不好

这个问题处理就比较简单了，只需要在ueditor.config.js文件中修改autoheightenabled:false 即可，这样如果内容过多时就会出现滚动条，而不会撑开编辑器。