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

总结

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

(0)

相关推荐

  • vue项目中使用ueditor的实例讲解

    以vue-cli生成的项目为例 1.static文件夹下先放入ueditor文件 2.index.html添加如下代码 <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="

  • vue引入ueditor及node后台配置详解

    最近公司的某个客户要用上我们公司的产品,他的后台管理里的富文本编辑器要求有点多,开始打算用Quill,但是发现Quill根本满足不了他的需求.在调研了市面上的富文本编辑器后,最后似乎只剩了百度的ueditor.虽然很丑~~~,不过没关系,政府网站和这种效果更搭:-D 我是不是说了什么(逃 vue引入ueditor 步骤 百度ueditor下载,随便哪个版本就好(本文章以php版为例),不需要特别全面功能的可以考虑下UM喽 将对应的文件夹放到static中 修改前端vue部分引用的ueditor.

  • vue中如何创建多个ueditor实例教程

    前言 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 具体可以参考这篇文章:http://www.jb51.net/article/118413.htm ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 最近工作中要求升级,需要

  • Vue中正确使用Element-UI组件的方法实例

    一.CDN 目前可以通过 unpkg.com/element-ui获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unp

  • vue中keep-alive内置组件缓存的实例代码

    需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • vue中使用v-model完成组件间的通信

    以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢? 即,在父组件中修改了值,子组件会立即更新. 在子组件中修改了值,父组件中立即更新. vue中有一个很神奇的东西叫v-model,它可以完成我们的需求. 使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model 父组件 <template> <div> {{fatherText}} <Child v-model="fatherText">

  • 在 Vue 中编写 SVG 图标组件的方法

    在考虑了将矢量图标从图标字体迁移到内联 SVG 的 原因 之后,我在 Vue.js 中找到了一个用 SVG 替换图标字体的解决方案,同时仍能保持使用图标字体的灵活性和易用性--能够使用 CSS 轻松改变图标的大小.颜色以及其它属性. 一种流行的方法是使用 v-html 指令和 npm 模块 html-loader 来将 SVG 导入到我们的 Vue 模板中,并在 Vue 的生命周期函数 mounted() 中修改渲染的 <svg> 元素.CSS 样式可以直接应用到 <svg> 元素

  • 在vue中封装的弹窗组件使用队列模式实现方法

    前言 由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器 什么是队列 队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue

  • 在vue中使用防抖函数组件操作

    初级 1.先写好防抖函数 /** * @desc 防抖函数 * @param {需要防抖的函数} func * @param {延迟时间} wait * @param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(timeout) i

  • vue中element 的upload组件发送请求给后端操作

    1.用到了before-upload属性, 用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输 什么都不用设置,action属性随便设置,不能为空即可! 在before-upload属性的方法中的代码如下: var _this = this; debugger; // var files=file.target.files[0]; debugger; const isJPG = file.type === "image/jpeg"; const isLt2M = fil

  • 在vue中使用inheritAttrs实现组件的扩展性介绍

    1.首先我们创建一个input组件 <template> <div class="inputCom-wrap"> <input v-bind="$attrs" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent

  • vue中的模态对话框组件实现过程

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们很有必要写成一个通用的组件形式,在需要的地方之间引用. 现在我们来动手实现一个对话框组件 ,按照之前的习惯,我们先看下实现的效果图 1.首先,通过template定义一个组件 <template id="dialog"> <div class="dialog&qu

随机推荐

其他