先下載下傳一個富文本編輯器(官網位址)
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YscjMfVmepNHL6NGVPVTQE9UeRpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL1QDO2EzM1kDM3IDMxgTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
在vue中建立一個editor.vue
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
mounted() {
const _this = this;
this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 確定UE加載完成後,放入内容。
});
},
methods: {
getUEContent() { // 擷取内容方法
return this.editor.getContent()
}
},
destroyed() {
this.editor.destroy();
}
}
</script>
<style>
</style>
把下載下傳好的uditor壓縮檔案夾放在static中
改一下config裡面的這一行(第一行)。
然後在需要用到的vue中使用它,具體如下:
<template>
<div class="components-container">
<div class="info"></div>
<div class="editor-container">
<UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
</div>
</div>
</template>
<script>
import UE from '../../editor.vue';
export default {
components: {UE},
data () {
return: {
defaultMsg: '這裡是UE測試',
config: {
initialFrameWidth: null,
initialFrameHeight: 350
},
}
}
}
</script>
<style>
.info{
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>
然後效果就出來了。嗯,,如果感覺上面的功能太多了。可以看[文檔]
還有圖檔的路徑。反正我的圖檔出不來,是以正在改。。。