Python的flask配置百度UEditor富文本web编辑器(第一阶段)

作者:Davidszhou   来源:SEO优化博客   时间:2017-11-17 15:20:10   点击:

python的flask配置百度UEditor富文本web编辑器(第一阶段)

Python的flask网站后端制作开发到了安装富文本编辑器阶段了,之前一直使用百度的UEditor编辑器,今天到官网突然发现只有PHP版本的,没有Python版本,没办法了只能根据官方的文档做接入了。

一、

首先下载准备好百度UEditor编辑器的文件,官方可以百度找到,下载PHP版本的UTF-8版本的。

解压得到百度UEditor编辑器的程序文件,将文件拷贝到flask的静态文件“static”下的'baidu'文件夹(这个文件是后建立的)

在百度UEditor编辑器的程序文件内有一个“index.htm”文件,用sublime文本编辑器打开(DW也行NP++也行),将里面的:

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

接入到后台编辑内容页面容器DIV内,比如后台添加内容页面"/addinfo/",flask的视图文件内有这个视图函数渲染的html的模板文件,在这个HTML文件内做修改引用。然后在该编辑内容页面引用百度UEditor编辑器的JS文件,注意这里是flask的url_for构建链接方法引用进去,如下:

<!--百度编辑器-->

    <script type="text/javascript" charset="utf-8" src="{{ url_for('static',filename='baidu/ueditor.config.js',_external=True) }}"></script>

    <script type="text/javascript" charset="utf-8" src="{{ url_for('static',filename='baidu/ueditor.all.min.js',_external=True) }}"> </script>

    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->

    <script type="text/javascript" charset="utf-8" src="{{ url_for('static',filename='baidu/lang/zh-cn/zh-cn.js',_external=True) }}"></script>

<!--百度编辑器-->

这里注意静态文件的路径问题。

二、

开始进入下一部分后端的配置,之前PHP版本的后端是经过PHP脚本处理的,现在我们要换成flask来处理这部分,flask需要有一个视图路由来处理,我这里建立一个ceshi的视图路由代码如下:

Python的flask配置百度UEditor富文本web编辑器(第一阶段)

三、

好了开始配置程序文件,打开 “ueditor.config.js”文件找到 ‘serverUrl’参数,修改里面值:这地方如果使用默认的:URL + "ceshi/",URL获取到的值与真实的地址是不对的,所以我这里直接写死:"http://www.davidszhou.com:8989/ceshi/"(如果没有配置这里,在编辑器渲染时,‘单图上传’按钮是灰色的,‘多图上传’点击提示“后台文件配置错误,该功能无法使用”,你也可以使用开发者工具查看编辑页面在点击图片上传时,抓包文件有一个请求路径是错误的)。

验证配置,打开“http://你自己的域名/ceshi/?action=config”页面会返回百度UEditor编辑器程序文件下的php文件夹内的“config.json”内容,这里操作就在视图路由内获得的。

总结:

猜想百度UEditor编辑器运行思维(简单状态):

编辑内容渲染编辑器盒子,点击上传按钮会请求‘serverUrl’,‘serverUrl’处理请求进行相关操作。以上面"ceshi"视图函数为例:

flask.request.args.get('action')得到一个参数,通过参数程序知道要做什么工作,具体步骤可以看下(原始PHP):“php/controller.php”目录文件,看懂PHP的可以清晰的知道他的工作流程。

下一步,根据策略做文件上传,期待……

下面是测试上传一张图片后的效果:

Python的flask配置百度UEditor富文本web编辑器(第一阶段)

 

TAGS:python , flask , UEditor , 编辑器

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/106.html转载请标注此链接

七日热点
热力推荐
网站统计
文章总数:126
今天发布:1
软件资源数:17