VUE中Ueditior富文本编辑框的使用

Ueditor富文本编辑框是一个用于界面输入大量文本的插件，并且对于用户而言，可以选择样式以及图片插入等。

1.下载相应文件

界面中使用Ueditor编辑框是通过引入的方式，所以我们需要先下载相应的插件包和代码，请于网盘自取
链接：https://pan.baidu.com/s/1G8MLUsaI-R50AGP4JhCY6g
提取码：sjbo
关于里面三部分文件在项目中位置的存放，如下：
1）static文件夹的位置存放，与src文件夹同级

2）ue.vue存放位置

3) vender文件夹存放位置

2.引用插件、配置文件

1）在main.js文件中导入Ueditor

import '../static/Ueditor/ueditor.config.js'
import '../static/Ueditor/ueditor.all.js'
import '../static/Ueditor/lang/zh-cn/zh-cn.js'

2） 网盘下载的static文件夹下的Ueditor文件夹下的ueditor.config.js文件有个serveUrl，改成自己项目的服务器地址

3）在自己的vue界面引入ue，构建组件，使用组件
引入ue

import UE from "../../../ue.vue"

构建组件

  components: {UE},

使用组件

<div id="editor">
  <!-- this.$refs.ue.getUEContent()取编辑框数据 -->
   <UE :defaultMsg="defaultMsg" :config="config" ref="ue" :placeholder="1"></UE>
 </div>

定义富文本编辑框初始属性

data（）{
	return() {
		defaultMsg: '',
		config: {
		  initialFrameWidth: '100%',
		  initialFrameHeight: 150
	    }
	}
}

3. 解除严格模式

由于第三方插件中的语法触发了严格模式，所以需要解除
1）下载安装包

npm install babel-plugin-transform-remove-strict-mode -D

2）把.babelrc中的配置为，.babelrc 文件添加配置

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

3）npm run dev

4.拓展

编辑框取值，赋值，禁用基本操作，官方文档中有讲解，但是我个人觉得不方便看
官网：https://ueditor.baidu.com/website/index.html
1）富文本编辑框本为空，输入数据后获取数据

this.$refs.ue.getUEContent()

2）初始化界面时候，要将数据渲染到编辑框

   this.defaultMsg = 从后台获取的数据
   window.UE.getEditor("editor").setContent(this.defaultMsg)   

编辑框禁用

 window.UE.getEditor("editor").setDisabled()

这些大致是最近用到的相关内容了，有问题欢迎留言哦！