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

 

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

 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程宝库

 1.对于从接口请求的数据尽量使用{{}}加载,而不是V-HTML。vue中的大括号会把数据解释为普通文本。通常如果要解释成html代码则要用v-html。而此指令相当于innerHTML。虽然像 ...