Quill 富文字編輯器二次封裝

2021-09-29 23:29:15 字數 3574 閱讀 5631

quill 是乙個很流行的富文字編輯器，github 上 star 大約 21k。但是很少專案中使用時直接使用它，都要對其進行二次封裝，你作為乙個頁面仔是擋不住有想法的產品經理的。

href


=""rel


="stylesheet"


/>


src=


"">


script


>


// npm install quill


import quill from


"quill"


;
例項化 quill，掛載到當前上下文中，然後就能使用它的相關方法及屬性

import quill from


"quill"


;import


"quill/dist/quill.snow.css"


;const options =,,


]// ['link', 'image'],]}


,  placeholder:


this


.props.placeholder ||


"請輸入內容..."


,  readonly:


false


,  theme:


"snow"};


const quill =


newquill


(".my-editer"


, options)


;// 將其實例化到dom樹上.my-editor的節點上
我們在插入內容時，要得知幾個必要條件：

那麼getselection()方法便是用來獲取游標的，就讓我們知道了現在使用者游標置於何處，那麼就知道了第乙個條件

this


.quill.


getselection()


;
inserttext()方法是插入文字用的，一般都會在插入後，格式化其他格式，所以下面的方法基本要連用

format()方法是格式化資料的，能將文字格式化成鏈結、標題、對齊、大小等等

// 格式化成標題


this


.quill.


inserttext


(section_index,


getfieldvalue


("title"))


;this


.quill.


getselection()


;this


.quill.


format


("header"


,  *******[activetoolindex]


.value,


getfieldvalue


("title"))


;// 格式化成鏈結


getfieldvalue


("link")&&


this


.quill.


format


("link"


,getfieldvalue


("link"))


;
this


.quill =


newquill


(".mys-editor"


,this


.options)


;this


.quill.on(


"text-change"


,this


.handlechange.


bind


(this))


;
因為 quill 中的標籤是有限的，如果要使用其他標籤的話，需要註冊進去，以 video 標籤為例：

const quill =


require


("quill");


const blockembed = quill.


import


("blots/block/embed");


export


class


videoblot


extends


blockembed


static


value


(node: any);}


}
然後在富文字編輯器的元件中在例項化的 quill 上註冊該標籤

import quill from


"quill"


;import


from


"./quill-video"


;videoblot.blotname =


"******video"


;videoblot.tagname =


"video"


;quill.


register(,


true


);
便可以在相應的位置進行插入 video 標籤了

const p =


this


.getselection()


;// 獲取插入的游標位置


this


.quill.


insertembed


(p,"******video",)


;
export


function


formateditdata


(value: string)


if(value.


match


(videoreg)


)return value;


}export


function


changeimgurl


(value: string)


">`;}


);return result;


}export


function


changevideourl


(value: string)


" controls="controls" width="100%" height="undefined" webkit-playsinline="true" playsinline="true" x5-playsinline="true">`;}


);return result;


}
export


function


changeurl


(value: string)


">`;}


);result = result.


replace


(/]*src=['"]([^'"]+).*?\<\/video>/gi


,function


(match, capture)


" controls="controls" width="100%" height="undefined" webkit-playsinline="true" playsinline="true" x5-playsinline="true">`;}


);return result;


}

vue中封裝富文字編輯器Quill

quill，樣式不用多說，也是主流的黑白清新風，美觀，功能上雖然不是很多，甚至還沒有 網路上傳 可以通過複製網路並黏貼解決 等功能，但它的 高亮是最完美的，同樣支援行內編輯模式，可自定義，總的來說，這是一款優點多但缺點同樣明顯的編輯器，以前用過ueditor，區別大概就是ueditor需要在conf...

quill富文字編輯器 API

1.從第三個開始刪除，刪除4個 4 12345678 1278 2.返回物件 返回從第三個開始，返回4個，編輯器裡面不變 insert 3456 不寫引數引數，預設全部 4 12345678 3456 3.檢索編輯器內容的長度 返回值是要加一 12345678 9 4.同quill.getconte...

富文字編輯器

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