vue 中 使用百度編輯器 UEditor
阿新 • • 發佈:2017-11-03
oat his ole text 觸發 pan ont lec 通過
已有前輩整理,記錄URL:
http://www.cnblogs.com/ocean-sky/p/7132319.html
http://blog.csdn.net/psd_html/article/details/73312859
需註意的代碼:
子組件:config接收父組件傳來的配置
mounted() {//初始化UE const _this = this; _this.editor = UE.getEditor(‘editor‘,Object.assign({ autoHeightEnabled: false, autoFloatEnabled:true, //是否工具欄可浮動 initialContent:‘請輸入內容‘, //初始化編輯器的內容,也可以通過textarea/script給值,看官網例子 autoClearinitialContent:true, //是否自動清除編輯器初始內容,註意:如果focus屬性設置為true,這個也為真,那麽編輯器一上來就會觸發導致初始化的內容看不到了 initialFrameWidth: null, initialFrameHeight: 450, BaseUrl: ‘‘, UEDITOR_HOME_URL:‘static/UEditor/‘ },_this.config)); }, destoryed() { this.editor.destory(); }, methods: { getUEContent: function() { return this.editor.getContent(); } },
父組件:(傳自定義配置到組件)
<ueditor :config="config" ref="ueditor"></ueditor> <br> <el-button size="small" @click="getContent">獲取編輯器內容</el-button> data() { return { config: { //此處定義工具欄的內容 // toolbars: [ // [‘fullscreen‘, ‘source‘,‘|‘, ‘undo‘, ‘redo‘,‘|‘,‘bold‘, ‘italic‘, ‘underline‘, ‘fontborder‘, ‘strikethrough‘, // ‘|‘,‘superscript‘,‘subscript‘,‘|‘, ‘forecolor‘, ‘backcolor‘,‘|‘, ‘removeformat‘,‘|‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, // ‘|‘,‘selectall‘, ‘cleardoc‘,‘fontfamily‘,‘fontsize‘,‘justifyleft‘,‘justifyright‘,‘justifycenter‘,‘justifyjustify‘,‘|‘, // ‘link‘,‘unlink‘] // ] }, } }, methods: { //獲取文檔內容 getContent(){ let content = this.$refs.ueditor.getUEContent(); console.log(content); // alert(content); } }, components: { ‘ueditor‘: UEditor }
僅記錄備註一下
vue 中 使用百度編輯器 UEditor