最近在做商品詳情的時候，有這樣一個需求：用戶可以使用富文本編輯器編輯商品，并且在小程序中可以展示。然鵝，小程序并不支持HTML標(biāo)簽，webview組件也只能加載URL,這就捉雞了。
         最終決定采用將富文本內(nèi)容轉(zhuǎn)化為圖片，后臺保存轉(zhuǎn)化后的圖片與HTML內(nèi)容，這樣就可以實(shí)現(xiàn)在小程序中展示的富文本內(nèi)容，同時又可以讓用戶隨時修改商品介紹的內(nèi)容了。
         這里我們用到的富文本編輯器插件為Simditor,選擇它的原因很簡單，風(fēng)格和我們的整體風(fēng)格符合。HTML轉(zhuǎn)換圖片采用html2canvas。貼一段項(xiàng)目的代碼：

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源碼，符合我們項(xiàng)目的規(guī)則，
                        //Simditor貌似只生成對上傳圖片的引用的image,標(biāo)簽

PHP代碼

創(chuàng)新互聯(lián)建站從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元中山做網(wǎng)站,已為上家服務(wù),為中山各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

                $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();
        }