富文字編輯器——百度UEditor外掛Vue元件化
阿新 • • 發佈:2019-01-03
2、元件
(1)元件頁面
ueditor.vue
<template>
<script :id=id type="text/plain"></script>
</template>
<script>
export default {
name: 'UE',
data() {
return {
editor: null
}
},
props: {
content: {
type: String ,
default:''
},
config: {
type: Object,
},
id: {
type: String
}
},
ready() {
const _this = this;
_this.editor = UE.getEditor(_this.id, _this.config); // 初始化UE
_this.editor.addListener("ready", function () {
_this.editor.setContent(_this.content); // 確保UE載入完成後,放入內容。
});
},
methods: {
getContent() { // 獲取內容方法
return this.editor.getContent();
}
},
destroyed() {
this .editor.destroy();
},
}
</script>
(2)測試頁面
test_ue.vue
<template>
<div class="content-wrapper">
<div class="content">
<div class="info">UE編輯器示例<br>需要使用編輯器時,呼叫UE公共元件即可。可設定填充內容content,配置資訊config(寬度和高度等),可呼叫元件中獲取內容的方法。支援頁面內多次呼叫。
</div>
<button @click="getUEContent()">獲取內容</button>
<ueditor :content=content1 :config=config1 :id="ue1"></ueditor>
<ueditor :content=content2 :config=config2 :id="ue2"></ueditor>
</div>
</div>
</template>
<script>
import ueditor from '../common/component/ueditor.vue';
export default {
components: {
ueditor
},
data() {
return {
content1: '這裡是UE測試1',
content2: '這裡是UE測試2',
config1: {
initialFrameWidth: 1600,
initialFrameHeight: 350,
wordCount: false,
},
config2: {
autoHeight: false,
wordCount: false,
},
ue1: "ue1", // 不同編輯器必須不同的id
ue2: "ue2"
}
},
methods: {
getUEContent() {
// 獲取ueditor值
let content1 = UE.getEditor(this.ue1).getContent();
let content2 = UE.getEditor(this.ue2).getContent();
console.log(content1)
console.log(content2)
}
}
};
</script>