版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33862644/article/details/82975578
官网地址：https://quilljs.com
项目需求：自带的上传图片是base64，直接入库的话，请求头太长，导致网页十分十分的卡，所以才改用formData自定义上传（改完之后，相当于覆盖了他本身自带的上传按钮，图标是一样的，就是说在外观上看不出来变化）
刚引入好的效果图：
当文本框中没有任何内容的时候，quill.container.firstChild.innerHTML默认为 <p><br></p>
上传图片后的效果：
代码是没问题的，因为我这是本地测试，图片只能传到固定的某个盘了，懒的改了...
扫描二维码关注公众号，回复：
3601600 查看本文章
上传视频后的结果：
前台代码：
<!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 href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<style>
body {
padding: 10px 30px;
}
#editor {
min-height: 180px;
}
</style>
</head>
<body>
<form method="POST" action="test.php">
<div>
<!--当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" class="showContent">
<!--回显的内容，库中查出来的放这-->
<!--可以直接在指定元素内加入文本或者html标签-->
哈哈哈哈
</div>
<input type="hidden" id="richText" name="richText" style="display: none;" value="" /> <!--用于form表单提交-->
</div>
<form enctype="multipart/form-data" id="imgFrom">
<!-- this.files[0] 图片列表的第0项，也就是当前选择的图片 -->
<input type="file" onchange="updateImg(this.files[0])" id="imgData" style="display: none;">
</form>
<br />
<input type="submit" value="提交" id="su" onclick="submitData()" /> <!--id用于form表单时，将富文本编辑器的值，赋给隐藏域-->
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdn.quilljs.com/1.3.6/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
});
//修改样式
var Align = Quill.import('attributors/style/align');
Align.whitelist = ['right', 'center', 'justify'];
Quill.register(Align, true);
/* 传入布尔值，控制编辑器是否可用 */
quill.enable();
//quill.blur(); //失去焦点
//quill.focus(); //获得焦点
/* 事件的绑定；注意：text-change这个获取值放这的话是编辑器内容发生改变的时候才能获取到值,如果想每次提交都有值，要放到提交那 */
quill.on('text-change', function(delta, oldDelta, source) {
// console.log(delta); //当前输入的
// console.log(oldDelta); //上一次输入的
// console.log(source);
//res = quill.container.firstChild.innerHTML; //获取当前富文本编辑器实例的内容（带html标签）
//console.log(res);
});
/* 自定义按钮 */
var myBtn = document.querySelector("#my_button");
myBtn.addEventListener("click",function(){
//console.log('my-btn')
});
//【自定义上传图片1】通过addHander来监听image事件
let toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', () => {
document.getElementById('imgData').click();
});
//【自定义上传图片2】发送ajax处理好图片
function updateImg(file){
var formData = new FormData();
formData.append('avatar', file); //追加的自定义节点，第一个参数：php用$_FILES接收时的key；第2个参数：当前图片
console.log(formData.get("avatar")); //打印当前图片的信息
$.ajax({ //发送ajax
url:'index.php', //url
type:'post', //以post发送
data:formData, //要发送的数据。后端接收$_POST['user']
dataType:'json', //返回的数据类型
cache:false,
traditional: true,
contentType: false,
processData: false,
success:function(res){
console.log(res);
//图片上传成功之后的回调
const range = quill.getSelection();
if (range) {
quill.insertEmbed(range.index, 'image',""+res); //将上传好的图片，插入到富文本的range.index（当前光标处）
}
}
});
};
//form表单的提交
function submitData(){
res = quill.container.firstChild.innerHTML; //获取当前富文本编辑器实例的内容（带html标签）
console.log(res); //获取当前富文本编辑器实例的内容（带html标签）
$("#richText").val(res);
};
</script>
</body>
</html>
后台代码：
<?php
//header("content-type:text/html;charset=utf-8"); //设置编码
$filePath = 'e:/'.date("Y-m-d").'.png'; //上传到哪个位置
$uploadUrl = move_uploaded_file($_FILES['avatar']['tmp_name'],$filePath); //【关键在这，上传文件】
$addr = 'http://'.$filePath;
echo json_encode($addr);
?>
后端接收到的，整个富文本编辑器中的内容（带html标签的），直接入库即可
参考文章：https://www.zhihu.com/question/63589376/answer/211207526?utm_source=qq&utm_medium=social