quill编辑器的使用介绍

quilljs官方

配置

var quill = new Quill('#editor', {
	theme: 'snow',
	placeholder: '输入内容',
	modules: {
		toolbar: [
			["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
			["blockquote", "code-block"],                    // 引用  代码块
			[{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
			[{ indent: "-1" }, { indent: "+1" }],            // 缩进
			[{ size: ["small", false, "large", "huge"] }],   // 字体大小
			[{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
			[{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
			[{ align: [] }],                                 // 对齐方式
			["clean"],                                       // 清除文本格式
			["image"]
		]
	}
});

自定义

const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', () => {
	//uploadImage
});

插入

quill.insertEmbed(index: number, type: string, value: any): Delta
//举例
const range = quill.getSelection(true)
quill.insertEmbed(range, 'image', '图片地址');

聚焦编辑器

quill.setSelection(index: number, length: number = 0);

删除文本

quill.deleteText(index: number, length: number): Delta

查找元素与替换

const imgElement = quill.root.querySelector(`img[data-id-id="${uniqueId}"]`);
if (imgElement) {
	const blot = Quill.find(imgElement)
	const [line, offset] = 	quill.getLine(blot.offset(quill.scroll));
	const idx = quill.getIndex(line);
	
	quill.deleteText(idx, 1);
	quill.insertEmbed(idx, 'image', '新地址');
}