富文本编辑器内容在微信小程序中展示的解决方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了富文本编辑器内容在微信小程序中展示的解决方案相关的知识,希望对你有一定的参考价值。

            最近在做商品详情的时候,有这样一个需求:用户可以使用富文本编辑器编辑商品,并且在小程序中可以展示。然鹅,小程序并不支持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();
        }

以上是关于富文本编辑器内容在微信小程序中展示的解决方案的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序实战之实现富文本编辑器

微信小程序使用wxParse实现接入富文本编辑

微信小程序 富文本编辑器 editor

微信小程序富文本rich-text使用详解-微信小程序系统学习攻略

微信小程序富文本rich-text使用详解-微信小程序系统学习攻略

微信小程序富文本编辑器怎么解析标签