官网地址：
项目需求：自带的上传图片是base64，直接入库的话，请求头太长，导致网页十分十分的卡，所以才改用formData自定义上传（改完之后，相当于覆盖了他本身自带的上传按钮，图标是一样的，就是说在外观上看不出来变化）
刚引入好的效果图：
当文本框中没有任何内容的时候，quill.container.firstChild.innerHTML默认为<p><br></p>
上传图片后的效果：
代码是没问题的，因为我这是本地测试，图片只能传到固定的某个盘了，懒的改了...
上传视频后的结果：
前台代码：
<!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="///1.3.6/quill.snow.css" rel="stylesheet"><link href="///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="/ajax/libs/jquery/3.3.1/jquery.js"></script><script src="///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'] //需要加载/ajax/libs/KaTeX/0.7.1/katex.min.js];/* 实例化编辑器 */var quill = new Quill('#editor', {/*debug: 'info',*/modules: {//formula: true, //公式；需要加载/ajax/libs/KaTeX/0.7.1/katex.min.js//syntax: true, //高亮；需要加载/ajax/libs/highlight.js/9.12.0/highlight.min.js/*toolbar: {container:"#editor_header"}*/ // 或者 toolbar :'#editor_header'toolbar:toolbarOptions //指定编辑器操作条},theme: 'snow', //主题，有两种，snow和bubbleplaceholder:'请输入',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({ //发送ajaxurl:'index.php', //urltype:'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标签的），直接入库即可
参考文章：/question/63589376/answer/211207526?utm_source=qq&utm_medium=social
