精华内容
下载资源
问答
  • 富文本编辑器 图片base64 图片替换

    千次阅读 2020-07-31 16:58:41
    * [将文章里Base64图片转换本地图片保存并返回文章内容] * @param [pageContents] $pageContents [文章内容] * @param [目录] $path [要保存的路径] */ function image_change($pageContents,$path){ $...

    插入数据库的时候进行替换即可,不同去翻源码

    /**
     * [将文章里Base64图片转换为本地图片保存并返回文章内容]
     * @param  [pageContents] $pageContents [文章内容]
     * @param  [目录] $path [要保存的路径]
     */
    function image_change($pageContents,$path){
      $pageContents = str_replace('\"','"',$pageContents);
      $reg = '/<img (.*?)+src=[\'"](.*?)[\'"]/i';
      preg_match_all( $reg , $pageContents , $results );
      $imgArray=$results[2];
      //打印出来
      for ($i=0; $i < count($imgArray); $i++) {
        $isBase64=base64_image_content($imgArray[$i],$path,$i);
        if($isBase64){
          $pageContents=str_replace($imgArray[$i],$isBase64,$pageContents);
        }
      }
      return $pageContents;
    }
    
    
    /**
     * [将Base64图片转换为本地图片并保存]
     * @param  [Base64] $base64_image_content [要保存的Base64]
     * @param  [目录] $path [要保存的路径]
     */
    function base64_image_content($base64_image_content,$path,$Bin=0){
        //匹配出图片的格式
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
            $type = $result[2];
            $new_file = $path."/".date('Ymd',time())."/";
            if(!file_exists($new_file)){
                //检查是否有该文件夹,如果没有就创建,并给予最高权限
                mkdir($new_file, 0700);
            }
            $new_file = $new_file.date('YmdHis',time()). '_' . rand(10000, 99999).$Bin.".{$type}";
            if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
                return 'http://fh.online-game.com.cn/admin/'.$new_file;
            }else{
                return false;
            }
        }else{
            return false;
        }
    }
    
      $content1=$_POST['content1'];
      $content1=image_change($content1,'images');
    
    
    展开全文
  • 最近在做商品详情的时候,有这样一个需求:用户可以使用富文本编辑器编辑商品,并且在小程序中可以展示。然鹅,小程序并不支持HTML标签,webview组件也只能加载URL,这就捉鸡了。 最终决定采用将富文本内容转化...
                最近在做商品详情的时候,有这样一个需求:用户可以使用富文本编辑器编辑商品,并且在小程序中可以展示。然鹅,小程序并不支持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();
            }

    转载于:https://blog.51cto.com/janwool/2154001

    展开全文
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
    目前限chrome浏览器使用
    首先以um-editor的二进制流保存为例:
    打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
    加入下面的代码:

    //判断剪贴板的内容是否包含文本

    //首先解释一下为什么要判断文本是不是为空

    //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

    //为了兼容4种格式的情况,做了如下的判断

    //如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

    //当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

    //如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

    var text = e.originalEvent.clipboardData.getData("text");

    if(text == ""){

        var items=e.originalEvent.clipboardData.items;

         for (var i = 0, len = items.length; i < len; i++) {

            var item = items[i];

           if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

             

                  var blob = item.getAsFile();

                  getBase64(blob, function( base64 ) {

                  //sendAndInsertImage(base64,me); 上传到服务器

                   setBase64Image(base64,me);

                  });

                  //阻止默认事件, 避免重复添加;

                  e.originalEvent.preventDefault();

                 };

            }

    }

    两个方法:

    //执行插入图片的操作

    function setBase64Image(base64,editor){

        editor.execCommand('insertimage', {src: base64,_src: base64});

    }

    //获得base64

    function  getBase64(blob, callback) {

        var a = new FileReader();

        a.onload = function(e) {callback(e.target.result);};

        a.readAsDataURL(blob);

    };

    效果展示:

    详细内容可参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

    讨论群:223813913

    展开全文
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
    目前限chrome浏览器使用
    首先以um-editor的二进制流保存为例:
    打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
    加入下面的代码:

    //判断剪贴板的内容是否包含文本

    //首先解释一下为什么要判断文本是不是为空

    //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

    //为了兼容4种格式的情况,做了如下的判断

    //如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

    //当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

    //如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

    var text = e.originalEvent.clipboardData.getData("text");

    if(text == ""){

        var items=e.originalEvent.clipboardData.items;

         for (var i = 0, len = items.length; i < len; i++) {

            var item = items[i];

           if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

             

                  var blob = item.getAsFile();

                  getBase64(blob, function( base64 ) {

                  //sendAndInsertImage(base64,me); 上传到服务器

                   setBase64Image(base64,me);

                  });

                  //阻止默认事件, 避免重复添加;

                  e.originalEvent.preventDefault();

                 };

            }

    }

    两个方法:

    //执行插入图片的操作

    function setBase64Image(base64,editor){

        editor.execCommand('insertimage', {src: base64,_src: base64});

    }

    //获得base64

    function  getBase64(blob, callback) {

        var a = new FileReader();

        a.onload = function(e) {callback(e.target.result);};

        a.readAsDataURL(blob);

    };

    效果展示:

    详细内容可参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

    讨论群:223813913

    展开全文
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 基于 WebBrowser 的富文本编辑器

    千次阅读 2020-03-25 00:16:28
    很久很久以前,05年的时候做的一个基于 Delphi 的 TWebBrowser 做的一个富文本编辑器。主要是把 Windows 提供的 Browser 控件的IHTMLWindow2 接口利用起来,完成将浏览器变成编辑器的功能。 为了让编辑器能够插入...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 因为需要打印页面内容,当前我选择的办法是保存需要打印的部分为PNG图片,然后利用富文本编辑器读取html文字,然后插入图片进行打印 保存scrollArea中全部内容为图片 QString mainWindow::getScrollArea() { ...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等... 小巧的身材:文件大小仅仅只有 50 KB,而新浪的头像编辑器组件有 58.1 KB,更有甚者...
  • 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。 加入下面的代码: //判断剪贴板的内容是否包含文本 //首先解释一下为...
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...
  • zx_editor移动端编辑器

    2019-03-22 11:23:11
    保存编辑器内容 #### # setContent(innerHTML) 设置编辑器内容,可用于初始化编辑器数据。 #### # setImageSrc(imgId, imgUrl) 将IDimgId的图片base64地址,替换新的imgUrl。需配合`getBase64Images()`方法...
  • UEditor 直接复制黏贴图片为空的问题

    千次阅读 2019-07-15 20:03:13
    步骤:复制淘宝的图文详情,直接黏贴到百度富文本编辑器 现象:只能复制文字,图片相关内容为空,查看 html 代码,复制的内容不包含 img 标签 解决方案 1.找到ueditor.config.js文件,搜索catchRemoteImageEnable...

空空如也

空空如也

1 2 3 4 5
收藏数 96
精华内容 38
关键字:

富文本编辑器内容保存为图片