vue 使用Ueditor富文字的配置

2022-07-16 13:06:16 字數 1679 閱讀 9661

npm i vue-ueditor-wrap -s
第二步,引入到專案中(我是引入到需要的頁面中,沒有全域性引入)

import vueueditorwrap from

'vue-ueditor-wrap

'

第三步,註冊元件

components: ,

第四步,在模板中使用元件

專案如果使用的是vue-cil2.0版本的,就放到static,若為vue-cil3.0版本的,就放到public資料夾下

4,修改引用處

"

editorconfig

" v-model="

formdata.remark

" />

editorconfig: ,
至此,已完成配置

1,鑑於第二次進頁面會報「ueditor typeerror: cannot set property 'innerhtml' of null"」

此問題可以修改  ueditor原始碼  ueditor.all.js

ue.geteditor = function(id, opt) 

// return editor;

// 下面是修改後的,解決問題:『cannot set property 'innerhtml' of null』每一次直接根據js傳來的id,生成乙個全新的ueditor物件

ue.deleditor(id);

var editor = new ue.ui.editor(opt);

editor.render(id);

return editor;

};ue.deleditor = function(id) 

};,2,新增需求,需要返回沒有html格式的純文字給介面,使用

vue-ueditor-wrap的v-model獲取的是有html格式的文字

解決辦法就是獲取編輯器例項

id="

editor

":config="

editorconfig

"v-model="

formdata.remark

":destroy="

true

"@ready="

ready

" />

//method中加入

ready(editorinstance) ,

this.myeditor.getcontenttxt(); //不帶html格式的商品詳情資訊

3,ueditor的浮動的失效問題

在ueditor.config.js檔案中,有乙個xss過濾白名單,這個地方對img標籤的style進行配置,加上去,就好啦(這個問題查了蠻久的,沒有找對方向)

vue富文字使用詳解

一 cnpm 安裝 vue quill editor cnpm install vue quill editor二 在main.js中引入import vuequilleditor from vue quill editor require styles 引入樣式 import quill dist...

Vue中使用富文字

類似於上圖 我們使用元件引入 首先建立乙個vue檔案 wangzi.vue 然後將下列 複製到檔案中 html editor class div editor class text div div template import efrom wangeditor export default mod...

UEditor富文字編輯器的使用

即可得到乙個文字編輯框。使用ueditor和其他外掛程式大同小異。1.先引入js和css 2.在 var ue ue.geteditor container 這裡的container就是你想設定文字編輯器在哪個html標籤的id。或者可以在容器中加入這段 container後面可以跟一些屬性,比如說...