Python的Flask框架中集成CKeditor富文本编辑器的教程

在用Flask搭建网站时的后台文章编辑器可以使用CKeditor,CKeditor所支持的文本样式较多且开源,这里我们就来看一下Python的Flask框架中集成CKeditor富文本编辑器的教程

因为CKeditor足够优秀，所以第二步也可只为追加名为ckeditor的class属性值，CKeditor就会自动将其替换。例如：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> <title>A Simple Page with CKEditor</title><!-- 请确保CKEditor文件路径正确 --> <textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80"> This is my textarea to be replaced with CKEditor. </textarea></pre> </div> <p>CKEditor脚本文件也可以引用CDN上的文件，下面给出几个参考链接：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p> 基础版（迷你版）</p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p> 标准版</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p>完整版<br /><strong>开启上传功能<br /></strong>默认配置下，CKEditor是没有开启上传功能的，要开启上传功能，也相当的简单，只需要简单修改配置即可。下面来看看几个相关的配置值：</p> <ul> <li>filebrowserUploadUrl ：文件上传路径。若设置了，则上传按钮会出现在链接、图片、Flash对话窗口。</li> <li>filebrowserImageUploadUrl ： 图片上传路径。若不设置，则使用filebrowserUploadUrl值。</li> <li>filebrowserFlashUploadUrl ： Flash上传路径。若不设置，则使用filebrowserUploadUrl值。</li> </ul> <p>为了方便，这里我们只设置filebrowserUploadUrl值，其值设为/ckupload/（后面会在Flask中定义这个URL）。</p> <p>设置配置值主要使用2种方法：</p> <p><strong>方法1：</strong>通过CKEditor根目录的配置文件config.js来设置:</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> CKEDITOR.editorConfig = function( config ) { // ... // file upload url config.filebrowserUploadUrl = '/ckupload/'; // ... }; </pre> </div> <p><strong>方法2：</strong>将设置值放入作为参数放入CKEDITOR.replace():</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p><strong>Flask处理上传请求<br /></strong>CKEditor上传功能是统一的接口，即一个接口可以处理图片上传、文件上传、Flash上传。先来看看代码：</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> def gen_rnd_filename(): filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S') return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000))) @app.route('/ckupload/', methods=['POST']) def ckupload(): """CKEditor file upload""" error = '' url = '' callback = request.args.get("CKEditorFuncNum") if request.method == 'POST' and 'upload' in request.files: fileobj = request.files['upload'] fname, fext = os.path.splitext(fileobj.filename) rnd_name = '%s%s' % (gen_rnd_filename(), fext) filepath = os.path.join(app.static_folder, 'upload', rnd_name) # 检查路径是否存在，不存在则创建 dirname = os.path.dirname(filepath) if not os.path.exists(dirname): try: os.makedirs(dirname) except: error = 'ERROR_CREATE_DIR' elif not os.access(dirname, os.W_OK): error = 'ERROR_DIR_NOT_WRITEABLE' if not error: fileobj.save(filepath) url = url_for('static', filename='%s/%s' % ('upload', rnd_name)) else: error = 'post error' res = """ """ % (callback, url, error) response = make_response(res) response.headers["Content-Type"] = "text/html" return response </pre> </div> <p>上传文件的获取及保存部分比较简单，是标准的文件上传。这里主要讲讲上传成功后如何回调的问题。</p> <p>CKEditor文件上传之后，服务端返回HTML文件，HTML文件包含JAVASCRIPT脚本，JS脚本会调用一个回调函数，若无错误，回调函数将返回的URL转交给CKEditor处理。</p> <p>这3个参数依次是：</p> <ul> <li>CKEditorFuncNum : 回调函数序号。CKEditor通过URL参数提交给服务端</li> <li>URL : 上传后文件的URL</li> <li>Error : 错误信息。若无错误，返回空字符串</li> </ul> <p><strong>使用蓝本<br /></strong>在大型应用中经常会使用蓝本，在蓝本视图中集成CKEditor的步骤和app视图基本相同。</p> <p>1. 创建蓝本时需指明蓝本static目录的绝对路径</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> demo = Blueprint('demo', static_folder="/path/to/static") </pre> </div> <p>2. 对应url需加上蓝本端点</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> </pre> </div> <p>3. 设置endpoint端点值</p> <div class="gaodaimacode"> <pre class="prettyprint linenums"> response = form.upload(endpoint=demo) </pre> </div> </div> <p>以上就是Python的F<i style="color:transparent">来源gaodai$ma#com搞$$代**码)网</i>lask框架中集成CKeditor富文本编辑器的教程的详细内容，更多请关注<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com" rel="nofollow" >gaodaima搞代码网</a>其它相关文章！</p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/162377.html" target="_blank" title="Python的Flask框架中集成CKeditor富文本编辑器的教程">Python的Flask框架中集成CKeditor富文本编辑器的教程</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="162377" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> </footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/431892.html" title="python-if-多个条件判断" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/6.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="python-if-多个条件判断" /><br><span class="r_title">python-if-多个条件判断</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/431891.html" title="python迭代器中的函数整理" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/7.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="python迭代器中的函数整理" /><br><span class="r_title">python迭代器中的函数整理</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/431890.html" title="python-vim模块有哪些函数接口" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/1.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="python-vim模块有哪些函数接口" /><br><span class="r_title">python-vim模块有哪些函数接口</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/431889.html" title="python-vim插件是什么" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/5.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="python-vim插件是什么" /><br><span class="r_title">python-vim插件是什么</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431892.html">python-if-多个条件判断</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431891.html">python迭代器中的函数整理</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431890.html">python-vim模块有哪些函数接口</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431889.html">python-vim插件是什么</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431888.html">Python面试题之基础篇一</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431887.html">又一个Jupyter神器操作Excel自动生成Python代码</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431886.html">VS-Code-必备-Python-插件</a></li><li><i class="fa fa-minus"></i><a target="_blank" href="https://www.gaodaima.com/431885.html">再见-VBA神器工具统一-Excel-和-Python</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">