quill富文字編輯器 API

2022-08-21 01:39:15 字數 2226 閱讀 6067

//

1. 從第三個開始刪除,刪除4個

4)); // 12345678 1278

//2.(返回物件)返回從第三個開始,返回4個,編輯器裡面不變 .insert = 3456; 不寫引數引數,預設全部

4)); // 12345678 3456

//3.檢索編輯器內容的長度 返回值是要加一

// 12345678 9

//4.同quill.getcontents(2, 4);返回值不一樣,

4)); // 12345678 3456

//5.編輯器裡值不會被覆蓋 編輯器裡插入值 (位置,型別,內容)

'image', ''));

//6.編輯器裡值不會被覆蓋 編輯器裡插入值(文字) (位置,內容,  格式)

'hello', 'bold', true));

'quill', ));

//7.編輯器裡值被覆蓋 編輯器裡插入值(文字) (位置,內容,  格式) 以結尾

// },

////

]));

//8.編輯器裡值被覆蓋

'hello\n'));

//9.沒研究,會報錯 home.vue?250d:109 uncaught referenceerror: delta is not defined

delta()

//.retain(6) // keep 'hello '

//.delete(5) // 'world' is deleted

//.insert('quill')

////

));

//10.設定編輯器裡內容格式format

'color', 'red');

'align', 'right');

'hello\nworld!\n');

//formatline(index: number, length: number, source: string = 'api'): delta

//formatline(index: number, length: number, format: string, value: any,

//source: string = 'api'): delta

//formatline(index: number, length: number, formats: ,

//source: string = 'api'): delta

2, 'align', 'right'); // right aligns the first line

4, 'align', 'center'); // center aligns both lines

'hello\nworld!\n');

5, 'bold', true); // bolds 'hello'

5, );

1, 'align', 'right'); // right aligns the 'hello' line

//13 getformat 獲取格式

'hello world!');

2, 'bold', true);

2, 'italic', true);

2); //

1); //

//14. 移除格式 removeformat

// },

// },

// },

// },

//},

// }

//]);

7);

獲取區域

//getbounds(index: number, length: number = 0):

//返回值

'hello\nworld\n');

2)); // returns

//16.獲取滑鼠的位置 getselection

//var range = this.quill.getselection();

//if (range) else

//} else

//17

this.quill.on('text-change', function

(delta, olddelta, source)

else

if (source == 'user')

});

vue中封裝富文字編輯器Quill

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

Quill 富文字編輯器二次封裝

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

富文字編輯器

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