1，首先把官网下载的Ueditor资源，放入静态资源src/static中。(我这下载的是1.4.3.3 Jsp 版本的[UTF-8版])，官网下载地址：https://ueditor.baidu.com/website/download.html
2018-12-12_091429.png
2，修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下图：
2018-12-12_092032.png
3，在vue项目中的main.js中引入js和css
//富文本ue需要的js和css
import'../static/Ueditor/ueditor.config.js'
import'../static/Ueditor/ueditor.all.js'
import'../static/Ueditor/lang/zh-cn/zh-cn.js'
import'../static/Ueditor/ueditor.parse.min.js'
4,配置一个全局的组件
<comment>
# 组件注释
此组建需要
defaultMsg=====>富文本内容（最好是后台返回什么这里就是什么）
defaultMsg: {
type: String
},
config=====>富文本的配置项（详细见:http://fex.baidu.com/ueditor/#start-config）
config: {
type: Object
}
</comment>
<template>
<div class="Ue">
<!--editor的div为富文本的承载容器-->
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'Ue',
components: {},
data() {
return {
editor: null,
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
watch: {},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
}
},
computed: {},
created() {
},
mounted() {
},
destroyed() {
this.editor.destroy();
}
</script>
5,在组建中引用
<template>
<div class='foot'>
<UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
<button @click="getUEContent()">获取内容</button>
</div>
</template>
<script type="text/javascript">
import UE from '../components/Ueditor/Ue'
export default {
name: 'foot',
components: {
UE
},
data() {
return {
defaultMsg: null,
config: {
initialFrameWidth: null,
initialFrameHeight: 350
}
}
},
props: {},
watch: {},
methods: {
getUEContent() {
let content = this.$refs.ue.getUEContent();
this.$notify({
title: '获取成功，可在控制台查看！',
message: content,
type: 'success'
});
console.log(content)
}
},
computed: {},
created() {
},
mounted() {
this.defaultMsg = '<img src="/static/img/Logo_touming.aacdf29.png" alt="">'
},
destroyed() {
}
}
</script>
这样其实已经ok了，不过会报出后台配置项的错，如图：
1110357-20170915104106157-1552111700.png
出现此种现象的原因是配置ueditor的图片以及文件的后台上传接口不正确；
如果Ueditor不需要使用文件以及图片的上传则在ueditor.config.js中进行如下配置：（将serverUrl注释掉）
// 服务器统一请求接口路径
// serverUrl: URL + "jsp/controller.jsp",
以后将不会再出现上述报错，但是也将无法进行图片的上传：如下图：
1110357-20170915104117907-234721436.png
如果Ueditor需要使用文件以及图片的上传则在ueditor.config.js中进行如下配置：
// 服务器统一请求接口路径，配置的服务端接口
serverUrl: "http://127.0.0.1:9999/api/UE",
//或者如果使用了代理，则可以如下进行配置
serverUrl: "/api/ue",
好了配置就说到这，下一篇再介绍ue+plupload前端上传图片
