小tips:vue結合百度UEditor富文字編輯器實現vue-ueditor-wrap
阿新 • • 發佈:2020-11-18
1.下載vue-ueditor-wrap
cnpm i vue-ueditor-wrap -S
下載最新的 UEditor 資原始檔放入你專案的靜態資源目錄中(比如 static 或者 public,這取決於你專案的配置)。
2.引入VueUeditorWrap
元件
import VueUeditorWrap from 'vue-ueditor-wrap'
3.註冊元件
components: { VueUeditorWrap } // 或者在 main.js 裡將它註冊為全域性元件 Vue.component('vue-ueditor-wrap', VueUeditorWrap)
4.v-model
繫結資料
<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
5.示例
<template> <div class="hello"> <vue-ueditor-wrap ref="ueditor" v-model="msg" :destroy="false" :config="config" style="width: 600px;margin: 0 auto;"></vue-ueditor-wrap> <button @click="showData"class="preview">儲存內容</button> </div> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: 'HelloWorld', components: { VueUeditorWrap }, data () { return { msg: '請輸入內容', config: { // 編輯器不自動被內容撐高autoHeightEnabled: true, // 初始容器高度 initialFrameHeight: 240, elementPathEnabled: false, wordCount: false, enableAutoSave: false, // 初始容器寬度 initialFrameWidth: '100%', serverUrl: '' } } }, mounted () { }, methods: { showData () { console.log(this.msg) } } } </script>
詳細的配置可參考UEditor富文字編輯器官網。