UEditor是百度的一個javascript富文本編輯器，功能強大鞭缭，常見的富文本編輯器中總有它的一席之地俺猿，今天我們就寫一個簡單的demo來學習如何在vue-cli中使用它，以及圖片上傳忘瓦！
第一步搁廓，先下載依賴
npm i vue-ueditor-wrap -S
第二步，引入到項目中
import VueUeditorWrap from 'vue-ueditor-wrap'
第三步，注冊組件
components: {
VueUeditorWrap
}
第四步枚抵，在模板中使用組件
<template>
<div>
<VueUeditorWrap/>
</div>
</template>
這個時候我們已經(jīng)可以在頁面中看到編輯器的樣子了
WX20190603-234937@2x.png
但是我們往往需要更多的功能线欲，比如圖片上傳明场，因此我們需要一些其他東西來支持我們的工作汽摹，這里通過點贊后盜用大神的一份文件（n(≧≦)n）https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads，我在本項目中所使用的是utf8-php.zip苦锨，解壓后放在static下并命名為UEditor
WX20190603-234802@2x.png
接下來逼泣，請看全部代碼
<template>
<div>
<VueUeditorWrap
v-model="message"
:config="editorConfig"
@ready="ready"
/>
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import evtHub from '@/common/eventHub.js'
export default {
name: "Editor",
components: {
VueUeditorWrap
},
props: ["content"],
data() {
return {
evtHub: evtHub,
message: '',
// 簡單配置
editorConfig: {
// 編輯器不自動被內(nèi)容撐高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 300,
// 初始容器寬度
initialFrameWidth: '100%',
// 上傳文件接口, 報錯屬于正常，若需要驗證可使用(也是盜大神的)http://35.201.165.105:8000/controller.php
// 調(diào)試完畢打包上線則切換回/static/UEditor/php/controller.php即可舟舒，不用做其他處理
serverUrl: '/static/UEditor/php/controller.php',
}
};
},
mounted() {
// 這里是從列表頁編輯時做的內(nèi)容注入拉庶，沒有需要可以不寫
this.message = this.content;
},
methods: {
ready(editorInstance) {
// 這里可以拿到ueditor的實例，比如editorInstance.getContent()就可以拿到編輯器的html內(nèi)容
this.evtHub.$emit('editor.data', editorInstance);
}
}
};
</script>
