您的位置:首页 > 教程 > JavaScript > 在vue中完美使用ueditor组件(cdn)解读

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

2023-01-22 14:37:09 来源:易采站长站 作者:

目录vue使用ueditor组件(cdn)vue项目使用ueditor指南基本使用使用配置跳坑心得总结vue使用ueditor组件(cdn)前言:无需main.js或页面全局或局部引入,直接使用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: {
  conandroidfig: {
   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/";

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

—— 这是因为我代码不是直接放在服务器根www.cppcns.com目录,而是下级文件夹中,因此资源文件无法正确加载,因为需要开发环境和生产环境配置不同的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 即可,这样如果内容过多时就会出现滚动条,而不会撑开编辑器。

总结

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

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25