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前端上傳圖片
