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

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的视图路由代码如下：

三、

好了开始配置程序文件，打开 “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的可以清晰的知道他的工作流程。

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

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

 

TAGS:python , flask , UEditor , 编辑器

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