quill富文本编辑器 · 人手一本php工具书

示例：使用quill富文本编辑器的插件，自定义formData图片上传 >[info]官网地址：[https://quilljs.com](https://quilljs.com/) 项目需求：自带的上传图片是base64，直接入库的话，请求头太长，导致网页十分十分的卡，所以才改用formData自定义上传（改完之后，相当于覆盖了他本身自带的上传按钮，图标是一样的，就是说在外观上看不出来变化） [toc] ## :-: **效果图** - 刚引入好，的效果图 ![](https://box.kancloud.cn/c9691e5aeddff647c6b92be5f048daf4_1247x253.png) - 当文本框中没有任何内容的时候，`quill.container.firstChild.innerHTML`默认为 `<p><br></p>` ![](https://box.kancloud.cn/93a74082f9cde00fe76c9274159060c3_1202x425.png) - 上传图片后，的效果代码是没问题的，因为我这是本地测试，图片只能传到固定的某个盘了，懒的改了... ![](https://box.kancloud.cn/14a0f42a87cdb692115e071bef6723bb_1266x512.png) - 上传视频后，的效果 ![](https://box.kancloud.cn/7e611bc340bfbd84e82b1cbd377a1620_1296x394.png) ## :-: **前端代码** ``` html <!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>  <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">   哈哈哈哈 </div> <input type="hidden" id="richText" name="richText" style="display: none;" value="" />  </div> <form enctype="multipart/form-data" id="imgFrom">  <input type="file" onchange="updateImg(this.files[0])" id="imgData" style="display: none;"> </form> <br /> <input type="submit" value="提交" id="su" onclick="submitData()" />  </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 <?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标签的），直接入库即可