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

目录

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

vue使用ueditor组件(cdn)

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

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

component组件代码：

在使用页面

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

使用代码：

                 
     

 

 
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和配置都是从父组件传入的。定义组件：

4.使用组件：

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

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

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

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

总结

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