基本使用
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 即可，这样如果内容过多时就会出现滚动条，而不会撑开编辑器。
好了，以上就是此次使用Ueditor的一点个人总结，希望能给遇到同样问题的小伙伴一点点帮助。
