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

目录

• vue使用ueditor组件(cdn)
• vue项目使用ueditor指南
• 基本使用
• 使用配置
• 跳坑心得
• 总结

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 即可，这样如果内容过多时就会出现滚动条，而不会撑开编辑器。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue项目中使用ueditor的实例讲解
• vue引入ueditor及node后台配置详解
• vue中如何创建多个ueditor实例教程

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！