1、官网地址:https://quilljs.com
2、直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>QuillDemo</title>
<link rel="stylesheet" href="quill.snow.css">
<link rel="stylesheet" href="quill.bubble.css">
<style>
body {
padding: 10px 30px;
}
#editor {
min-height: 180px;
}
</style>
</head>
<body>
<!--当toolbar以container的形式注册时需要显式地写出这些标签-->
<div id="editor_header" style="display: none;">
<!--字体大小-->
<select class="ql-size">
<option value="small"></option>
<!-- 默认按钮 -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<!--加粗按钮-->
<button class="ql-bold"></button>
<!--上标、下标按钮-->
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<!--自定义按钮-->
<button id="my_button"></button>
</div>
<div id="editor">
<!--可以直接在指定元素内加入文本或者html标签-->
<!--<p>Hello Quill!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>-->
</div>
<script src="quill.js"></script>
<script>
/* 编辑器操作条选项 */
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], //开关按钮
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], //自定义按钮值
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // 上标/下标
[{'indent': '-1'}, {'indent': '+1'}], // 减少缩进/缩进
[{'direction': 'rtl'}], // 文本方向
[{'size': ['small', false, 'large', 'huge']}], // 自定义下拉
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], //使用主题的默认下拉
[{'font': []}],
[{'align': []}],
['clean'], //移除格式化
['image'],
['video'],
['formula'] //需要加载cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
];
/* 实例化编辑器 */
var quill = new Quill('#editor', {
/*debug: 'info',*/
modules: {
//formula: true, //公式;需要加载cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
//syntax: true, //高亮;需要加载cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
/*toolbar: {
container:"#editor_header"
}*/ // 或者 toolbar :'#editor_header'
toolbar:toolbarOptions //指定编辑器操作条
},
theme: 'snow', //主题,有两种,snow和bubble
placeholder:'请输入',
readOnly: false
});
/* 传入布尔值,控制编辑器是否可用 */
quill.enable();
//quill.blur(); //失去焦点
//quill.focus(); //获得焦点
/* 事件的绑定 */
quill.on('text-change', function(delta, oldDelta, source) {
console.log(delta);
console.log(oldDelta);
console.log(source);
console.log(quill.container.firstChild.innerHTML); //获取当前富文本编辑器实例的内容(带html标签)
});
//quill.off('text-change', handler); //事件的解绑
/* 向编辑器中插值 */
quill.clipboard.dangerouslyPasteHTML(' <b>Hello World</b><p>new line</p>'); //向编辑器中插入html片段
quill.setText('Hello!'); //向编辑器中插入文本
/* 获取编辑器中的值 */
console.log(quill.getContents());
/* 自定义按钮 */
var myBtn = document.querySelector("#my_button");
myBtn.addEventListener("click",function(){
console.log('my-btn')
})
</script>
</body>
</html>
getContents()获取的值是以delta来展现的: