百度编辑器的Python后台

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

百度编辑器在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可选。

就这样返回去,搞定了。

时间: 2024-10-09 11:04:23

百度编辑器的Python后台的相关文章

夺命雷公狗ThinkPHP项目之----企业网站3之后台栏目页的搭建(百度编辑器的引入)

我们现在就开始搭建我们的后台栏目页的后台了: 首先创建一个CategoryController.class.php的控制器,让列表页和添加页面显示出来先: 然后就是开始动手修改我们的视图部分了: 我们这样即可跳转到指定的页面了,先来完成列表页的部分: 老规矩现引入css和js和图片,然后开始下一步的操作了,因为我们的后台模版处发现他不能自动折叠,如下所示: 然后就开始写列表页的模版文件了: <!doctype html> <html> <head> <meta c

百度编辑器序号和项目符号不能显示解决

在做论坛.个人网站.办公OA,对于富文本编辑器的使用,业界使用最多.最好的应该是百度编辑器.在使用百度编辑器做富文本编辑,碰到序号.项目符号,在个性化页面展示不能显示的问题.简单分析下,将百度编辑器,编辑后的HTML存储,再用于个性化页面显示,对于指定序号和项目符号显示没有相关的样式.那解决起来就比较简单了,把相关的样式在个性化页面单独添加引用就可以了. 一.查看是什么样式: 二.个性化页面添加list-style-type样式 通过w3school 找到, list-style-type介绍,

dedecms织梦添加ueditor百度编辑器(支持本地图片水印)

本站所有附件均为UTF-8版本,GBK版本的童学请自行转码: 教程最下面有解决栏目内容添加失败的解决方法和本地上传图片加水印方法. 最终效果 1.直接到百度编辑器官方下载PHP对应的版本 ueditor官方地址:http://ueditor.baidu.com/website/download.html 2.dedecms 程序 include文件夹下,创建 ueditor 文件夹 把下载到的ueditor文件扔进去(index.html不要) 3.include\inc\inc_fun_fun

【ci框架基础】之部署百度编辑器

在ci框架下加载编辑器,现在复习下内容.我的框架文件名称为ci 1.下载百度编辑器ueditor,http://ueditor.baidu.com/ 一般情况下下载ubuilder版即可,并将ueditor复制到ci框架的根目录下. 下载好的编辑器目录为:-ueditor----dialogs     弹出对话框对应的资源和JS文件----lang        编辑器国际化显示的文件----php         涉及到服务器端操作的后台文件----themes      样式图片和样式文件-

dedecms整合百度编辑器(Ueditor)之上传图片加水印的办法

Ueditor抓取远程图片加水印方法 打开getRemoteImage.php, 找到://远程抓取图片配置 在上面添加: require_once('../../../dede/config.php');//dede为你的后台目录 require_once(DEDEADMIN."/inc/inc_archives_functions.php"); 继续修改getRemoteImage.php, 找到: fwrite( $fp2 , $img ); 在下面添加: @WaterImg($

Asp.Net使用百度编辑器(ueditor)

1.4.3以上版本将不再承诺支持ie6/ie7. 这里使用百度编辑器1.4.3.包可移植官网下载. http://pan.baidu.com/s/1ntG3Tsl 1.百度编辑器不依赖于 jquery 2.使用服务器控件(runat="server")需要使用 服务器中转赋值内容 如: HTML代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&

一步步开发自己的博客 .NET版(4、文章发布功能)百度编辑器

前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做个插件,任何网站上的技术文章都可以转发收藏 到本博客. 所以打算写个系类:<一步步搭建自己的博客> 一.一步步开发自己的博客  .NET版(1.页面布局.blog迁移.数据加载) 二.一步步开发自己的博客  .NET版(2.评论功能) 三.一步步开发自己的博客  .NET版(3.注册登录功能) 四

解决百度编辑器带来的困扰(一)

一.百度编辑器上传组件也是flash,故存在一些问题,就是在某些浏览器上传会丢失sessionid. 解决方法: 不好意思,因为我这边使用asp.net mvc,故解决代码是asp.net的. 在Global.asax文件加入如下代码: /// <summary> /// 手动完成页面的Cookie里的sessionid传送到后台 目前就配合uploadify 由于它flash丢失sessionid /// </summary> /// <param name="s

乐视云视频 接口开发 结合百度编辑器

乐视云视频提供上传接口和删除接口,结合后台原本的百度编辑器,实现了从百度编辑器中直接上传视频,删除文章时一同删除云端视频等功能 上图,实现从百度编辑器中上传视频,上传完成后将视频插入到当前光标的位置,便于排版 实现效果: