富文本編輯器內容在微信小程序中展示的解決方案
阿新 • • 發佈：2018-08-03
tco 後臺 實現 sign oot cti sele 編輯器 post
最近在做商品詳情的時候，有這樣一個需求：用戶可以使用富文本編輯器編輯商品，並且在小程序中可以展示。然鵝，小程序並不支持HTML標簽，webview組件也只能加載URL,這就捉雞了。
最終決定采用將富文本內容轉化為圖片，後臺保存轉化後的圖片與HTML內容，這樣就可以實現在小程序中展示的富文本內容，同時又可以讓用戶隨時修改商品介紹的內容了。
這裏我們用到的富文本編輯器插件為Simditor,選擇它的原因很簡單，風格和我們的整體風格符合。HTML轉換圖片采用html2canvas。貼一段項目的代碼：
var editor = null; function initSim(p) { editor = new Simditor({ textarea:$("#designer"), toolbar:[‘title‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘fontScale‘, ‘color‘, ‘|‘, ‘ol‘, ‘ul‘, ‘blockquote‘, ‘code‘, ‘table‘, ‘|‘, ‘link‘, ‘image‘, ‘hr‘, ‘|‘, ‘indent‘, ‘outdent‘, ‘alignment‘], upload:{ url:"文件上傳地址",//這裏我們修改了Simditor源碼，符合我們項目的規則， //Simditor貌似只生成對上傳圖片的引用的image,標簽<img src="image ...data"， //我們將其修改為我們上傳圖片的後臺地址，已保證保存的HTML內容能復現我們圖片內容 fileKey:"file" } }) var description = document.getElementById("description").innerHTML; console.log(description) editor.setValue(description); } function postDesigner() { var ele = document.querySelector(".simditor-body");//讀取富文本編輯的內容 html2canvas(ele).then(function(canvas){ let img = canvas.toDataURL() let base = encodeURIComponent(img) //ajax上傳文件，這裏我們進行了URI編碼，後臺需要先進行URI解碼 $.ajax({ type:‘POST‘, url:"後臺保存URL" , data:{file:base}, dataType:‘json‘, success:function(res) { console.log(res) if(res.code == 0) { $("#description_url").val(res.msg); $("#desinForm").submit(); }else { alert("保存失敗"); } }, error:function(err) { console.log(err); alert("保存失敗") } }) }) }
PHP代碼
$base64_img = urldecode(trim(input(‘file‘))); $up_dir = ‘uploads/‘; if(!file_exists($up_dir)) { mkdir($up_dir,0777); } if(preg_match(‘/^(data:\s*image\/(\w+);base64,)/‘,$base64_img,$result)) { $type = $result[2]; if(in_array($type,array(‘pjepg‘,‘jpeg‘,‘jpg‘,‘gif‘,‘bmp‘,‘png‘))) { $saveName = $this->request->time().randomkeys(6).".".$type; if(file_put_contents($up_dir.$saveName,base64_decode(str_replace($result[1],‘‘,$base64_img)))) { return $this->ret->setCode(0)->setMsg($this->request->root().‘/‘.$up_dir.$saveName)->toJson(); }else { return $this->ret->setCode(1)->setMsg("文件上傳失敗")->toJson(); } }else { return $this->ret->setCode(1)->setMsg("圖片上傳類型錯誤")->toJson(); } }else { return $this->ret->setCode(1)->setMsg("文件錯誤")->toJson(); }
富文本編輯器內容在微信小程序中展示的解決方案