首页 > 代码库 > 百度编辑器的Python后台

百度编辑器的Python后台

2024-08-10 11:04:03   219人阅读

公司最近要做一个内容管理系统，需要在后台集成一个百度编辑器，考察了一下，都推荐百度编辑器。

百度编辑器在HTML中的嵌入很容易，把给出的样例复制到自己的HTML中即可，我不是前端，但是根据我的测试，应该是要引入JQuery的。

嵌入之后，百度编辑器基本就可以使用了，常见的文本格式都可以保存到数据库中，需要的时候直接取出，格式依然还在，看来我的大业已经完成大半了。

这里需要注意的是，如果展示到前台的文档被转义了，比如<p>显示成了&lt;p&gt;之类的，那么就需要查怎么关闭teplate转义，我使用的tornado只需要在HTML文档上写：

{% autoescape None %}

事情肯定不会这么简单，图片的上传就是个问题。

一般网页上展示的图片，要尽量放到自己的服务器或者图片站中，因为大部分的网站的图片都会屏蔽别的网站的引用，然后自己的网站就会开天窗了。我们公司对于这个项目，暂时使用七牛托管。

也就是说，后台管理人员使用百度编辑器上传的图片我得想办法倒腾到七牛上去。

百度给的代码不包含Python，有个哥们做了一个Django的插件，我也看不懂源码。于是去网上查。

百度编辑器的dialog/image文件夹下有个image.html，是点击图片上传之后的网页元素，里面实际上是个表单。七牛的SDK可以生成token，只要携带token提交表单到up.qiniu.com即可。网上提供的方法基本也是这样，而我实在看不懂JS，不知道在哪里增加token，又在哪里改变图片的提交地址。

到目前为止，我也觉得这是最好的办法，根本都不需要的服务器参与的情况下（仅仅生成一个token而已），仅仅是管理人员的电脑跟七牛的服务器的一次交互。也因此我在这里卡了很久。

不得不吐槽，百度的文档做的真的不咋地。我感觉我要的答案就在这个页面，但是我实在是看不明白这是在说些什么，是让我动态生成一个config.json？

我直到第二天，才看到了如下的话语：

。。。

好吧，我又找不到了。大体意思如下：

1.新版的上传相关接口不再区分，而是使用统一的请求接口

2.加载编辑器时，会先向config.js里的链接发送请求，得到必须的参数之后，才会显示图片上传正常。

3.图片加载的配置的加载优先级为后台返回>百度编辑器中的配置>config.json。对，config.json的配置仅供参考而已。

我才恍然大悟，我根本不用管那些PHP文档，也根本不用管config.json，把百度编辑器所有的请求指向服务器即可，只要到了服务器端，基本就无所不能了。

首先把serverUrl修改指向自己的服务器，看看文档，图片想要的参数：

{
    "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
    "imagePath": "/ueditor/php/",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
    "其他配置项...": "其他配置值..."
}
因为目前把所有的请求都指向了同一个链接，因此会携带参数，比如请求服务器配置时：?action=config

服务器判断一下参数为config时，返回上述参数即可。但是依然不好用，我仔细观察了一下，config.json中的参数并不是这样的。

    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式

当传入这些参数时，发现配置正确。百度文档中的参数是老版本的参数。

上述参数的注释基本明确，因为是服务器处理上传图片的事宜，我会返回完整的路径，图片的文件名也是服务器定义的，因此不需要设置。

当上传图片时，get请求会携带参数uploadimage（上述设置），而post请求的参数则是upfile（上述设置）。

除了file本身，还有original_name，file_type，我猜original_name是百度编辑器用来区分返回的图片链接的。

图片经过服务器的处理，上传到七牛之后，需要把链接地址返回给百度浏览器。

仔细看一下PHP处理上传文件的函数action_upload.php，发现注释如下：

 * array(
 *     "state" => "",          //上传状态，上传成功时必须返回"SUCCESS"
 *     "url" => "",            //返回的地址
 *     "title" => "",          //新文件名
 *     "original" => "",       //原始文件名
 *     "type" => ""            //文件类型
 *     "size" => "",           //文件大小
 * )

依样画瓢即可。其中state泛湖SUCCESS，url就是上传七牛之后的地址，title可以自己填一个，跟前端配合的话，就可以让后台管理者自定义图片标题了。original和type都是百度编辑器送上来的，送回去即可，size可选。

就这样返回去，搞定了。


百度编辑器的Python后台


联系
我们