近来在vue项目中需求使用富文本编辑器,于是将Ueditor集成进来,作为集体组件。

近来在vue项目中需求动用富文本编辑器,于是将Ueditor集成进来,作为国有组件。
在线预览:
项目地址:
记得在右上角点个赞哦~

在vue的’项目中相见了急需运用富文本编辑器的必要,在github上看了许多vue封装的editor插件,非常多对图纸上传和摄像上传的支撑并非很好,最后如故调整利用UEditor。

品种地址: 

1.放入静态资源并配备

首先把官方网站下载的Ueditor财富,放入静态能源src/static中。
必发88官网 1
修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图:
必发88官网 2

那类的文章网络有广大,作者进行了寻找、手写代码、汇总、排版,产生了那篇作品。

1.放入静态能源并铺排

2.引入

在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.js'

下载对应的UEditor源码

首先把官方网址下载的Ueditor能源,归入静态财富src/static中。

3.开销公共组件

付出公共组件,可设置填充内容defaultMsg,配置新闻config(宽度和中度等),并提供获取内容的章程。

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

首先,去官方网址络下载UEditor的源码,遵照你后台语言的差别下载对应的版本(PHP、Asp、.Net、Jsp)。

必发88官网 3

4.使用

当大家须要利用富文本编辑器时,直接调用公共组件就能够

<template>
  <div class="components-container">
    <div class="info">UE编辑器示例<br>需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg,配置信息config(宽度和高度等),可调用组件中获取内容的方法。</div>
    <button @click="getUEContent()">获取内容</button>
    <div class="editor-container">
      <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
    </div>
  </div>
</template>
<style>
  .info{
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }
</style>
<script>
  import UE from '../../components/ue/ue.vue';
  export default {
    components: {UE},
    data() {
      return {
        defaultMsg: '这里是UE测试',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        }
      }
    },
    methods: {
      getUEContent() {
        let content = this.$refs.ue.getUEContent();
        this.$notify({
          title: '获取成功,可在控制台查看!',
          message: content,
          type: 'success'
        });
        console.log(content)
      }
    }
  };
</script>

效能如下:
必发88官网 4

 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图:

5.报错

下载之后,把能源放到 /static/ue/ 静态目录下。文档结构如下:

必发88官网 5

ESlint报错

eslint报错的参谋请商酌4L 5L

必发88官网 6

2.引入

严酷情势报错

部分人采用时出现以下报错:
Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them...
以此主题材料是因为项目中的使用的babel暗中同意加多了use strict变成,可参谋

本人利用的是链接中答案的第两种格局:增添了babel-plugin-transform-remove-strict-mode,并在.babelrc里加多下列代码

{
  "plugins": ["transform-remove-strict-mode"]
}

然后就没难题了。

(我把UEditor放到了static静态目录上面,这里的文书不会被webpack装进,当然你也得以采纳性地放进src中)

在main.js中引入

编写 UEditor 编辑器 配置文件

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.js'

大家开荒
ueditor.config.js,修改个中的window.UEDITOR_HOME_UR配置,如下:

3.开采公共组件

window.UEDITOR_HOME_URL = "/static/UE/";   //指定编辑器资源文件根目录
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

付出公共组件,可设置填充内容defaultMsg,配置音信config(宽度和中度等),并提供获取内容的点子。

ueditor.config.js文本有过多陈设,能够在那边举行部分初始化的大局配置,举个例子编辑器的默许宽高级:

<template>
 <div>
  <script id="editor" type="text/plain"></script>
 </div>
</template>
<script>
 export default {
  name: 'UE',
  data () {
   return {
    editor: null
   }
  },
  props: {
   defaultMsg: {
    type: String
   },
   config: {
    type: Object
   }
  },
  mounted() {
   const _this = this;
   this.editor = UE.getEditor('editor', this.config); // 初始化UE
   this.editor.addListener("ready", function () {
    _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
   });
  },
  methods: {
   getUEContent() { // 获取内容方法
    return this.editor.getContent()
   }
  },
  destroyed() {
   this.editor.destroy();
  }
 }
</script>
,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
,initialFrameHeight:320 //初始化编辑器高度,默认320

必发88官网,4.使用

别的的参数配置,在该公文中有详实列出,大概参谋官方文书档案

当我们必要运用富文本编辑器时,直接调用公共组件就可以

将编辑器集成到系统中

<template>
 <div class="components-container">
  <div class="info">UE编辑器示例<br>需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg,配置信息config(宽度和高度等),可调用组件中获取内容的方法。</div>
  <button @click="getUEContent()">获取内容</button>
  <div class="editor-container">
   <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
  </div>
 </div>
</template>
<style>
 .info{
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
 }
</style>
<script>
 import UE from '../../components/ue/ue.vue';
 export default {
  components: {UE},
  data() {
   return {
    defaultMsg: '这里是UE测试',
    config: {
     initialFrameWidth: null,
     initialFrameHeight: 350
    }
   }
  },
  methods: {
   getUEContent() {
    let content = this.$refs.ue.getUEContent();
    this.$notify({
     title: '获取成功,可在控制台查看!',
     message: content,
     type: 'success'
    });
    console.log(content)
   }
  }
 };
</script>

开辟 /src/main.js 文件,插入上边包车型客车代码:

效率如下:

//ueditor
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.js'

必发88官网 7

付出公共组件 UE.vue

上述正是本文的全体内容,希望对大家的上学抱有帮助,也冀望我们多多帮忙脚本之家。

我们在 /src/components/ 目录下创办
UE.vue文本,作为大家的编辑器组件文件。

你只怕感兴趣的小说:

  • Vue.js结合Ueditor富文本编辑器的实例代码
  • 详解vue.js+UEditor集成
    [前后端分离项目]
  • vue项目中利用ueditor自定义上传按键作用

下边代码提供简单意义,具体运用根据要求周详该器件就能够。

<template>
  <div>
    <script type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'ue',
    data () {
      return {
        editor: null
      }
    },
    props: {
      value: '',
      config: {}
    },
    mounted () {
      this.editor = window.UE.getEditor('editor', this.config);
      this.editor.addListener('ready', () => {
        this.editor.setContent(this.value)
      })
    },
    methods: {
      getUEContent () {
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

零件暴光了三个接口:

  • value是编辑器的文字
  • config是编辑器的安插参数

在另外页面中动用该零件

简言之地创建八个内需UEditor的页面,再该页面中利用刚才封装好的UE.vue组件:

<template>
  <div>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    <button @click="returnContent">显示编辑器内容</el-button>
    <div>{{dat.content}}</div>
  </div>
</template>
<script>
  import Uediter from '@/components/UE.vue';

  export default {
    data () {
      return {
        dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {
            initialFrameWidth: 800,
            initialFrameHeight: 320
          }
        }
      }
    },
    methods: {
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
      }
    },
    components: {
      Uediter
    },
  }
</script>

功用如下:

必发88官网 8

What’s more: 服务端必要做的安排

布署完上述内容后,调整台大概会合世”后台配置项重回格式出错,上传成效将不能平常使用!”的报错,
大家在编辑器中上传图片只怕录制,也会产出响应的报错,那是因为尚未配备服务器的央浼接口,在ueditor.config.js中,对serverUrl实行安排:

// 服务器统一请求接口路径
, serverUrl: 'http://172.16.254.49:83/File/UEditor'  //地址管你们后端要去

您只怕感兴趣的稿子:

  • vue中使用ueditor富文本编辑器
  • VUE + UEditor
    单图片跨域上传作用的贯彻格局
  • vue引进ueditor及node后台配置详解
  • nodejs+mongodb+vue前后台配置ueditor的演示代码
  • vue中怎样成立多个ueditor实例教程
  • vue2.0门类中运用Ueditor富文本编辑器示例代码
  • Vue.js结合Ueditor富文本编辑器的实例代码
  • 详解vue.js+UEditor集成
    [左右端分离项目]
  • vue项目中央银行使ueditor的实例批注

相关文章