ueidtor組件的配置：
<template>
<div>
<script :id=id type="text/plain" ></script>
</div>
</template>

<script type="text/ecmascript-6">
import lc from @/assets/unit/lc;
import Api from @/assets/api/index;
import {Toast} from mint-ui;
export default {
name: UE,
data() {
return {
editor: null,
oldInner:
}
},
props: {
content: {
type: String,
default:
},
config: {
type: Object,
},
id: {
type: String
},
fileName:{
type: String
}
},
created(){
},
mounted() {
const _this = this;
_this.editor = UE.getEditor(_this.id,_this.config); // 初始化UE
//這裡ueidtor的監聽事件都需要addListener來監聽，不要用原生的addeventLister
_this.editor.addListener("ready", function () {
_this.editor.execCommand( autosubmit );
_this.editor.setContent(_this.content); // 確保UE載入完成後，放入內容。
//這裡的contentChange是自動保存，這裡設置的是延時1秒保存，如果持續出發則保存最後一次觸發的保存
_this.editor.addListener(contentChange,function () {
lc.throttle(function () {
console.log(保存內容);
const _content = _this.getAllHtml();
if(_content == _this.oldInner){return;}
Api.textUpLoad({textInner:_content,fileName:_this.fileName}).then(function (resData) {
lc.callBack(resData,function (data) {
_this.oldInner = _content;
Toast({
position:bottom,
message:JSON.parse(resData).msg
})
})
});
},1000)();
})
});
},
methods: {
getAllHtml: function(){
// return this.editor.getPlainTxt();

return this.editor.getContent(); 這個方法獲取編輯器內容
},
insterHtml(context){
//從後臺請求內容，添加到編輯器中
this.editor.execCommand(insertHtml,context);
}
},
destroyed() {
this.editor.destroy();
},
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped></style>

ueidtor組件的使用：

<template>
<div>
<mt-header title="lc&gt雲文檔" fixed >
<div class="homeDetail-header" slot="left" @click="back"><i class="iconfont icon-left-"></i>返回</div>
</mt-header>
<div class="main">
<ueditor :content=content1 :config=config1 :id="ue1" ref="ueditor" :fileName="fileName"></ueditor>
<button @click="getAllHtml()">獲取內容</button>
</div>
</div>
</template>

<script>
import ueditor from @/components/Ueditor;
import Api from ./../../assets/api/index;
import lc from ./../../assets/unit/lc;
export default {
data() {
return {
content1: ,
config1: {
initialFrameWidth: 100%,
initialFrameHeight: 100%,
wordCount: false,
},
ue1: "ue1", // 不同編輯器必須不同的id
fileName:
}
},
created(){
const _documentName = this.$route.params && this.$route.params.documentName,
_this = this;
this.fileName = _documentName;
以下獲取文件的內容，然後顯示到ueidtor中
Api.getTextsDetail({fileName:_documentName}).then(function (data) {
lc.callBack(data,function (data) {
_this.content1 = data;
_this.insterHtml(_this.content1)
})
})
},
methods: {
insterHtml(context){
//從後臺請求內容，添加到編輯器中
this.$refs.ueditor.insterHtml(context);
},
getAllHtml: function(){
console.log(獲取內容)
// 獲取當前編輯器中的內容，自動保存到後臺伺服器
let content = this.$refs.ueditor.getAllHtml();
console.log(content)
},
back(){
lc.back.call(this);
}
},
components: {
ueditor
}
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "./../../assets/scss/index";
.homeDetail-header{
color: #fff;
}
.main{
@extend %main;
font-size: $lc-font25;
}
</style>
服務端配置：
function ue(req, res, next) {
// ueditor 客戶發起上傳圖片請求
var ActionType = req.query.action;
console.log(req.session.token);
if (ActionType === uploadimage || ActionType === uploadfile || ActionType === uploadvideo || req.query.action === listimage){
tokenSchema.findByToken(req.session.token, function (resDataParent){
roleSchema.findByUid(resDataParent.userId, function (sonRes){
if (ActionType === uploadimage || ActionType === uploadfile || ActionType === uploadvideo){
var _userPath = (sonRes.sourcePath.search(/)*1>0)?`/${sonRes.sourcePath.split(/)[1]}`:;
var imgDir = `${_userPath}/images`;
var file_url = imgDir;//默認圖片上傳地址
/*其他上傳格式的地址*/
if (ActionType === uploadfile){
file_url = `${_userPath}/file`; //附件
}
if (ActionType === uploadvideo){
file_url = `${_userPath}/video`; //視頻
}
res.setHeader(Content-Type, text/html);
res.ue_up(file_url); //你只要輸入要保存的地址 。保存操作交給ueditor來做
}else if (req.query.action === listimage){
// 客戶端發起圖片列表請求
var dir_url = `/static${_userPath}/images`;
res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片
}
})
})
} else {
// 客戶端發起其它請求
res.setHeader(ContentType, application/json);
res.redirect(/static/UEditor/nodejs/config.json);
}
}
這樣就能配置好了，但是session有點問題，一會不操作，session就失效

註：

我用的jsp版本，後面返回的config.json,是我手動在ueidtor中手動創建的文件夾，nodejs，在該文件夾中把ueidtor中的config.json放到nodejs文件中，config.json在jsp文件夾中

ueidtor下載下來，解壓之後直接f放如vue-cli中的static文件夾中

1、初始化編輯器

UE.getEditor(editor)

2、刪除編輯器

UE.getEditor(editor).destroy();

3、設置焦點

UE.getEditor(editor).focus();

4、獲取編輯器內容

UE.getEditor(editor).getContent()

5、編輯器是否有內容

UE.getEditor(editor).hasContents()

6、獲取編輯器內容純文本格式

UE.getEditor(editor).getContentTxt()

7、獲取帶格式的純文本

UE.getEditor(editor).getPlainTxt()

8、啟用編輯器

UE.getEditor(editor).setEnabled();

9、禁止編輯

UE.getEditor(editor).setDisabled(fullscreen);

10、獲取整個html內容

UE.getEditor(editor).getAllHtml()

推薦閱讀：

相關文章