最近在做商品詳情的時候,有這樣一個需求:用戶可以使用富文本編輯器編輯商品,並且在小程序中可以展示。然鵝,小程序並不支持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();
}