百度的UEditor富文本编辑上传json到腾讯COS

电玩女神 2023-03-03 05:49 13阅读 0赞

#### 一、功能 ####

该功能主要是在后台管理系统用百度的UEditor富文本编辑器编辑保存图文内容，然后以json的形式上传到腾讯云，只要给前端腾讯云地址即可，可减少流量请求，缓解我们服务器压力。

#### 二、流程图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70]

#### 三、数据库设计 ####

content：主要存图文内容  
content\_url：主要存图文内容的腾讯云COS地址

CREATE TABLE `v_live` (
      `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
      `content` mediumtext NOT NULL COMMENT '图文内容',
      `content_url` varchar(512) NOT NULL DEFAULT '' COMMENT '图文详情COS地址',
      `delete` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否删:0否,1是',
      `ts_create` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '创建时间',
      `ts_update` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '修改时间',
      PRIMARY KEY (`id`),
    ) ENGINE=InnoDB AUTO_INCREMENT=94 DEFAULT CHARSET=utf8mb4 COMMENT='直播间表';

#### 四、代码 ####

1、前端代码：

<div class="form-group">
       <label class="col-sm-2 control-label">图文介绍</label>
        <div class="col-sm-8">
            <div id="edit_content">
                <textarea id="editor" name="content"><?php echo isset($live['content'] ) ? htmlspecialchars($live['content']) : '' ?></textarea>
                <script type = "text/javascript">
                    var editor = UE.getEditor('editor', { 
                        toolbars: [
                            [
                                'source','undo', 'redo', 'fontsize', 'fontfamily', 'bold', 'italic', 'underline', 'fontborder', 'forecolor',
                                'backcolor', 'strikethrough', 'horizontal', 'indent', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
                                'rowspacingtop', 'rowspacingbottom', 'lineheight', 'insertorderedlist', 'insertunorderedlist',
                                'pasteplain', 'selectall', 'removeformat', 'formatmatch', 'simpleupload', 'inserttable','unlink', '|'
                            ]
                        ],
                        autoHeightEnabled: true,
                        autoFloatEnabled: true,
                        initialFrameWidth: 810,
                        initialFrameHeight: 500
                    });
                </script>
            </div>
        </div>
    </div>

2、后端验证处理：

public function add($params)
    { 
         $data = [
             'content' => $params['content']
         ];
         $LiveRepository = Repository::factory('Live\Live');
         $id = $LiveRepository->add($data);
    
         if (!$id) { 
             Common::exception('添加直播间失败');
         }
    
         //内容上传到cos
         $newContentUrl = $this->creatFileToCos($id, $params['content'], '');
    
         //更新内容url
         $update = [
             'content_url' => $newContentUrl
         ];
         $LiveRepository->set($id, $update);
         return $id;
     }

3、上传图片判断是否变化：

public function creatFileToCos($liveId, $content, $contentUrl)
    { 
        if ($content) { 
            $pathUrl = pathinfo($contentUrl);
            $contFileName = $pathUrl['filename'];
            $fileContentName = $liveId . "_" . md5($content);
            // COS上传路径
            $filePath = "uploads/live_content/" . $fileContentName . ".json";
            // 判断如果内容发生变化,写入COS
            if ($fileContentName !== $contFileName) { 
                $contents = ['content' => $content];
                $fileContent = json_encode($contents, JSON_UNESCAPED_UNICODE);
                // 引用 PHP SDK 上传文件
                $fileName = $filePath;
                $cos = \Core\QcloudCos::getInstance('xl_default');
                $res = $cos->uploadImg($fileName, $fileContent);
                if (!$res) { 
                    Common::exception("图文详情转存COS失败！！！");
                }
            }
    
            $contentUrl = $filePath;
        }
    
        return $contentUrl;
    }

#### 五、页面展示 ####

1、前端页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70 1]  
2、用COSBrowser可以登录腾讯云看到我们已经把json上传上去  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70 2]

#### 六、写在最后 ####

该方案仅供参考，代码只是展示逻辑，不可实际使用，具体代码还需要根据实际业务进行改造

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70]: /images/20230208/838e6fef4e9a4b1fbcc510c6af16cbac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/e6b69b5a1f0e437bbe3d438ceb2d0178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/85f3896c6fea4b71848c7a3c3cc79397.png