富文字編輯器學習筆記

2021-09-12 03:26:56 字數 1647 閱讀 6592

後台管理中需要用到富文字編輯器,參考iview後台學習了一下wangeditor,直接記錄在vue專案中的寫法,單頁面寫法其文件裡有。

1、首先需要乙個有id的div盒子好放編輯器----

2、在頁面掛載時建立editor物件

mounted ()
3、在編輯器物件上可以進行的配置,如選單顯示哪些項、選單欄和輸入欄是否分離、獲取輸入欄的內容、設定編輯器的寬高等;

① this.editor.customconfig.menu= --- 選單顯示哪些配置項,如head、bold;

② this.editor = new editor('#editor1','#editor2') --- 想讓選單欄和輸入欄分離,則要向new editor傳入兩個引數,分別代表了選單欄、輸入欄;

③ this.editor.customconfig.onchange = function (html) {} --- 當輸入欄內容改變時就獲取的輸入欄(即引數html)的內容;獲取內容還有兩個方法 --- this.editor.txt.text()、this.editor.txt.html(),只能獲取標籤、文字,而不能獲採樣式。

4、對貼上的文字進行過濾

① this.editor.customconfig.pastefilterstyle = false --- 是否過濾掉貼上的文字的樣式,為false即關閉了過濾會顯示出樣式;

② this.editor.customconfig.pastrignoreimg = true --- 不貼上;

③ this.editor.customconfig.pastetexthandle = function (content) --- 引數是貼上過來的文字,然後返回自定義後的內容;

⑤ this.editor.customconfig.linkcheck = function (text,link) --- 鏈結校驗,返回true表示校驗成功;

⑥ this.editor.customconfig.linkimgcheck = function (src) --- 校驗,返回true表示校驗成功。

5、事件

除了上述的onchange事件,還有onfocus、onblur事件。

6、選單欄裡項的配置

① this.editor.customconfig.colors = [ '#000','#fff'] --- 編輯器顏色選擇裡的顏色選項,此時只有黑白兩種顏色可供選擇;

② this.editor.customconfig.fontnames = [ '宋體','微軟雅黑'] --- 編輯器字型選擇裡的字型選項,此時只有宋體、微軟雅黑兩種字型可供選擇(這個字型改變的是樣式裡的font-family)。

7、上傳的兩種方式(二選一即可)

① this.editor.customconfig.uploadimgshowbase64 = true --- 儲存成base64格式;

② this.editor.customconfig.uploadimgserver = '/***' --- /***是上傳的伺服器端介面;

this.editor.customconfig.showlinkimg = false--- 隱藏『網路』tab;

最後注意,以上所有的配置需要寫在this.editor.create()的前面才可以。

(~ ^_^ ~)

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...