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標簽的），直接入庫即可