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

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

CKeditor是目前最优秀的可见即可得网页编辑器之一，它采用Javascript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了CKeditor。

下载CKeditor
访问CKeditor官方网站，进入下载页面，选择Standard Package（一般情况下功能足够用了），然后点击Download CKEditor按钮下载ZIP格式的安装文件。如果你想尝试更多的功能，可以选择下载Full Package。

下载好CKeditor之后，解压到Flask项目static/ckeditor目录即可。

在Flask项目中使用CKeditor
在Flask项目中使用CKeditor只需要执行两步就可以了：

在

因为CKeditor足够优秀，所以第二步也可只为追加名为ckeditor的class属性值，CKeditor就会自动将其替换。例如：</p> <pre class="brush:js;"> <!DOCTYPE html> <html> <head> <title>A Simple Page with CKEditor</title> </head> <body> </body> </html> </pre> <p>CKEditor脚本文件也可以引用CDN上的文件，下面给出几个参考链接：</p> <pre class="brush:js;"> </pre> <p> 基础版（迷你版）<br /> </p> <pre class="brush:js;"> </pre> <p> 标准版<br /> </p> <pre class="brush:js;"> </pre> <p>完整版<br /> <strong>开启<strong class="superseo"><a href="/tag/17919.html" class="superseo">上传</a></strong>功能<br /> </strong>默认配置下，CKEditor是没有开启上传功能的，要开启上传功能，也相当的简单，只需要简单修改配置即可。下面来看看几个相关的配置值：</p> <ul> <li>filebrowserUploadUrl ：文件上传路径。若设置了，则上传按钮会出现在链接、图片、Flash对话窗口。</li> <li>filebrowserImageUploadUrl ：图片上传路径。若不设置，则使用filebrowserUploadUrl值。</li> <li>filebrowserFlashUploadUrl ： Flash上传路径。若不设置，则使用filebrowserUploadUrl值。</li> </ul> <p>为了方便，这里我们只<strong class="superseo"><a href="/tag/16849.html" class="superseo">设置</a></strong>filebrowserUploadUrl值，其值设为/ckupload/（后面会在Flask中定义这个URL）。</p> <p>设置配置值主要使用2种方法：</p> <p><strong>方法1：</strong>通过CKEditor根目录的配置文件config.js来设置:</p> <pre class="brush:js;"> CKEDITOR.editorConfig = function( config ) { // ... // file upload url config.filebrowserUploadUrl = '/ckupload/'; // ... }; </pre> <p><strong>方法2：</strong>将设置值放入作为参数放入CKEDITOR.replace():</p> <pre class="brush:js;"> </pre> <p><strong>Flask处理上传请求<br /> </strong>CKEditor上传功能是统一的接口，即一个接口可以处理图片上传、文件上传、Flash上传。先来看看代码：</p> <pre class="brush:python;toolbar:false"> 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> <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>使用<strong class="superseo"><a href="/tag/18203.html" class="superseo">蓝本</a></strong><br /> </strong>在大型应用中经常会使用蓝本，在蓝本视图中集成CKEditor的步骤和app视图基本相同。</p> <p>1. 创建蓝本时需指明蓝本static目录的绝对路径<br /> </p> <pre class="brush:python;toolbar:false"> demo = Blueprint('demo', static_folder="/path/to/static") </pre> <p>2. 对应url需加上蓝本端点<br /> </p> <pre class="brush:js;"> </pre> <p>3. 设置endpoint端点值<br /> </p> <pre class="brush:python;toolbar:false"> response = form.upload(endpoint=demo) </pre> <div class="entry-copyright"> <p>欢迎分享，转载请注明来源：<a href="http://outofmemory.cn" title="内存溢出">内存溢出</a></p><p>原文地址: <a href="http://outofmemory.cn/zaji/3321301.html" title="Python的Flask框架中集成CKeditor富文本编辑器的教程">http://outofmemory.cn/zaji/3321301.html</a></p> </div> </div> <div class="entry-tag"> <a href="/tag/17919.html" rel="tag">上传</a> <a href="/tag/18203.html" rel="tag">蓝本</a> <a href="/tag/16849.html" rel="tag">设置</a> <a href="/tag/17366.html" rel="tag">功能</a> <a href="/tag/16706.html" rel="tag">文件</a> </div> <div class="entry-action"> <a id="thread-like" class="btn-zan" href="javascript:;" tid="3321301"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-thumb-up-fill"></use> </svg> </i> 赞 <span class="entry-action-num">(0)</span> </a> <div class="btn-dashang"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-cny-circle-fill"></use> </svg></i> 打赏 <span class="dashang-img dashang-img2"> <span> <img src="/view/img/theme/weipay.png" alt="微信扫一扫" /> 微信扫一扫 </span> <span> <img src="/view/img/theme/alipay.png" alt="支付宝扫一扫" /> 支付宝扫一扫 </span> </span> </div> </div> <div class="entry-bar"> <div class="entry-bar-inner clearfix"> <div class="author pull-left"> <a data-user="42293" target="_blank" href="/user/42293.html" class="avatar j-user-card"> <img alt="最大的负整数是多少" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60" /> <span class="author-name">最大的负整数是多少</span> <span class="user-group">一级用户组</span> </a> </div> <div class="info pull-right"> <div class="info-item meta"> <a class="meta-item j-heart" id="favorites" rel="nofollow" tid="3321301" href="javascript:void(0);" title="自己的内容还要收藏吗？" aria-label="自己的内容还要收藏吗？"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg> </i> <span class="data">0</span> </a> <a class="meta-item" href="#comments"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg> </i> <span class="data">0</span> </a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share22" a href="javascript:;" data-event="poster-popover"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg> </i> 生成海报 </a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg> </i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg> </i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg> </i> </a> <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg> </i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg> </i> </a> </div> </div> </div> </div> </div>  <div class="wrap"> </div> <div class="entry-page"> <div class="entry-page-prev j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/Python%E8%AE%A1%E7%AE%97%E5%AD%97%E7%AC%A6%E5%AE%BD%E5%BA%A6%E7%9A%84%E6%96%B9%E6%B3%95.png"> <a href="/zaji/3321299.html" title="Python计算字符宽度的方法" rel="prev"> <span>Python计算字符宽度的方法</span> </a> <div class="entry-page-info"> <span class="pull-left"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg> </i> 上一篇 </span> <span class="pull-right">2022-10-06</span> </div> </div> <div class="entry-page-next j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/%E4%BD%BF%E7%94%A8python3.5%E4%BB%BF%E5%BE%AE%E8%BD%AF%E8%AE%B0%E4%BA%8B%E6%9C%ACnotepad.png"> <a href="/zaji/3321307.html" title="使用python3.5仿微软记事本notepad" rel="next"> <span>使用python3.5仿微软记事本notepad</span> </a> <div class="entry-page-info"> <span class="pull-right"> 下一篇 <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg> </i> </span> <span class="pull-left">2022-10-06</span> </div> </div> </div> <div id="comments" class="entry-comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"> 发表评论 </h3> <div class="comment-form"> <div class="comment-must-login"> 请登录后评论... </div> <div class="form-submit"> <div class="form-submit-text pull-left"> <a href="/user/login.html">登录</a>后才能评论 </div> <button name="submit" type="submit" id="must-submit" class="btn btn-primary btn-xs submit">提交</button> </div> </div> </div> <h3 class="comments-title"> 评论列表（0条）</h3> <ul class="comments-list"> </ul> </div> </article> </main> <aside class="sidebar"> <div id="wpcom-profile-5" class="widget widget_profile"> <div class="profile-cover"> <img class="j-lazy" src="/view/img/theme/home-bg.jpg" alt="最大的负整数是多少" /> </div> <div class="avatar-wrap"> <a target="_blank" href="/user/42293.html" class="avatar-link"> <img alt="最大的负整数是多少" src="/view/img/avatar.png" class="avatar avatar-120 photo" height="120" width="120" /> </a> </div> <div class="profile-info"> <a target="_blank" href="/user/42293.html" class="profile-name"> <span class="author-name">最大的负整数是多少</span> <span class="user-group">一级用户组</span> </a>  <div class="profile-stats"> <div class="profile-stats-inner"> <div class="user-stats-item"> <b>342</b> <span>文章</span> </div> <div class="user-stats-item"> <b>0</b> <span>评论</span> </div> <div class="user-stats-item"> <b>0</b> <span>问题</span> </div> <div class="user-stats-item"> <b>0</b> <span>回答</span> </div>  </div> </div> <button type="button" class="btn btn-primary btn-xs btn-message j-message2" data-toggle="modal" data-target="#mySnsQrocde"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg> </i>私信 </button> <div class="modal fade" id="mySnsQrocde"> <div class="modal-dialog"> <div class="modal-content">    <div class="modal-body" style="text-align: center"> <img src="/upload/sns_qrcode/42293.png" style="width: 300px"> </div> </div> </div> </div> </div> <div class="profile-posts"> <h3 class="widget-title"><span>最近文章</span></h3> <ul> <li> <a href="/dianzi/13471832.html" title="物联网4G智能后视镜是什么？"> 物联网4G智能后视镜是什么？ </a> </li> <li> <a href="/dianzi/13437990.html" title="什么是窄带物联网"> 什么是窄带物联网 </a> </li> <li> <a href="/dianzi/13171465.html" title="物联网工程专业就业方向物联网工程专业就业方向有哪些"> 物联网工程专业就业方向物联网工程专业就业方向有哪些 </a> </li> <li> <a href="/zz/13159769.html" title="腾讯云服务器安全吗？有哪些安全服务？"> 腾讯云服务器安全吗？有哪些安全服务？ </a> </li> <li> <a href="/yw/13087545.html" title="wps演示文稿部分使用后黑屏打不开？"> wps演示文稿部分使用后黑屏打不开？ </a> </li> </ul> </div> </div> <div id="wpcom-post-thumb-5" class="widget widget_post_thumb"> <h3 class="widget-title"><span>相关文章</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3295319.html" title="故宫的面积大约是72公顷还是平方千米"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="故宫的面积大约是72公顷还是平方千米" data-original="/aiimages/%E6%95%85%E5%AE%AB%E7%9A%84%E9%9D%A2%E7%A7%AF%E5%A4%A7%E7%BA%A6%E6%98%AF72%E5%85%AC%E9%A1%B7%E8%BF%98%E6%98%AF%E5%B9%B3%E6%96%B9%E5%8D%83%E7%B1%B3.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3295319.html" title="故宫的面积大约是72公顷还是平方千米"> 故宫的面积大约是72公顷还是平方千米 </a> </p> <p class="item-date">2022-10-5</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3292133.html" title="任达华张静初演的电视剧是什么"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="任达华张静初演的电视剧是什么" data-original="/aiimages/%E4%BB%BB%E8%BE%BE%E5%8D%8E%E5%BC%A0%E9%9D%99%E5%88%9D%E6%BC%94%E7%9A%84%E7%94%B5%E8%A7%86%E5%89%A7%E6%98%AF%E4%BB%80%E4%B9%88.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3292133.html" title="任达华张静初演的电视剧是什么"> 任达华张静初演的电视剧是什么 </a> </p> <p class="item-date">2022-10-5</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3275100.html" title="表情旺财狗头什么意思"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="表情旺财狗头什么意思" data-original="/aiimages/%E8%A1%A8%E6%83%85%E6%97%BA%E8%B4%A2%E7%8B%97%E5%A4%B4%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3275100.html" title="表情旺财狗头什么意思"> 表情旺财狗头什么意思 </a> </p> <p class="item-date">2022-10-5</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3261537.html" title="基督教是新上帝吗基督教要通过信仰上帝成为什么"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="基督教是新上帝吗基督教要通过信仰上帝成为什么" data-original="/aiimages/%E5%9F%BA%E7%9D%A3%E6%95%99%E6%98%AF%E6%96%B0%E4%B8%8A%E5%B8%9D%E5%90%97+%E5%9F%BA%E7%9D%A3%E6%95%99%E8%A6%81%E9%80%9A%E8%BF%87%E4%BF%A1%E4%BB%B0%E4%B8%8A%E5%B8%9D%E6%88%90%E4%B8%BA%E4%BB%80%E4%B9%88.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3261537.html" title="基督教是新上帝吗基督教要通过信仰上帝成为什么"> 基督教是新上帝吗基督教要通过信仰上帝成为什么 </a> </p> <p class="item-date">2022-10-4</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3228358.html" title="好看又平价的男士斜挎包有哪些"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="好看又平价的男士斜挎包有哪些" data-original="/aiimages/%E5%A5%BD%E7%9C%8B%E5%8F%88%E5%B9%B3%E4%BB%B7%E7%9A%84%E7%94%B7%E5%A3%AB%E6%96%9C%E6%8C%8E%E5%8C%85%E6%9C%89%E5%93%AA%E4%BA%9B.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3228358.html" title="好看又平价的男士斜挎包有哪些"> 好看又平价的男士斜挎包有哪些 </a> </p> <p class="item-date">2022-10-4</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3201410.html" title="北京颐和园的面积约290公顷对吗?"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="北京颐和园的面积约290公顷对吗?" data-original="/aiimages/%E5%8C%97%E4%BA%AC%E9%A2%90%E5%92%8C%E5%9B%AD%E7%9A%84%E9%9D%A2%E7%A7%AF%E7%BA%A6290%E5%85%AC%E9%A1%B7%E5%AF%B9%E5%90%97%3F.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3201410.html" title="北京颐和园的面积约290公顷对吗?"> 北京颐和园的面积约290公顷对吗? </a> </p> <p class="item-date">2022-10-3</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3180596.html" title="兵马俑文化价值介绍"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="兵马俑文化价值介绍" data-original="/aiimages/%E5%85%B5%E9%A9%AC%E4%BF%91%E6%96%87%E5%8C%96%E4%BB%B7%E5%80%BC%E4%BB%8B%E7%BB%8D.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3180596.html" title="兵马俑文化价值介绍"> 兵马俑文化价值介绍 </a> </p> <p class="item-date">2022-10-2</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3175890.html" title="故宫是哪个皇帝建的"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="故宫是哪个皇帝建的" data-original="/aiimages/%E6%95%85%E5%AE%AB%E6%98%AF%E5%93%AA%E4%B8%AA%E7%9A%87%E5%B8%9D%E5%BB%BA%E7%9A%84.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3175890.html" title="故宫是哪个皇帝建的"> 故宫是哪个皇帝建的 </a> </p> <p class="item-date">2022-10-2</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3175806.html" title="和平营地拉黑了为什么还能访问"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="和平营地拉黑了为什么还能访问" data-original="/aiimages/%E5%92%8C%E5%B9%B3%E8%90%A5%E5%9C%B0%E6%8B%89%E9%BB%91%E4%BA%86%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%98%E8%83%BD%E8%AE%BF%E9%97%AE.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3175806.html" title="和平营地拉黑了为什么还能访问"> 和平营地拉黑了为什么还能访问 </a> </p> <p class="item-date">2022-10-2</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3173381.html" title="三叶草ot是什么码"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="三叶草ot是什么码" data-original="/aiimages/%E4%B8%89%E5%8F%B6%E8%8D%89ot%E6%98%AF%E4%BB%80%E4%B9%88%E7%A0%81.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3173381.html" title="三叶草ot是什么码"> 三叶草ot是什么码 </a> </p> <p class="item-date">2022-10-2</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3172070.html" title="故宫面积72公顷对吗"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="故宫面积72公顷对吗" data-original="/aiimages/%E6%95%85%E5%AE%AB%E9%9D%A2%E7%A7%AF72%E5%85%AC%E9%A1%B7%E5%AF%B9%E5%90%97.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3172070.html" title="故宫面积72公顷对吗"> 故宫面积72公顷对吗 </a> </p> <p class="item-date">2022-10-2</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3144207.html" title="社保卡注销后多久可以办新卡"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="社保卡注销后多久可以办新卡" data-original="/aiimages/%E7%A4%BE%E4%BF%9D%E5%8D%A1%E6%B3%A8%E9%94%80%E5%90%8E%E5%A4%9A%E4%B9%85%E5%8F%AF%E4%BB%A5%E5%8A%9E%E6%96%B0%E5%8D%A1.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3144207.html" title="社保卡注销后多久可以办新卡"> 社保卡注销后多久可以办新卡 </a> </p> <p class="item-date">2022-10-2</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3111483.html" title="梁晓声用《母亲》誊写中国式母亲的普通与巨大"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="梁晓声用《母亲》誊写中国式母亲的普通与巨大" data-original="/aiimages/%E6%A2%81%E6%99%93%E5%A3%B0%E7%94%A8%E3%80%8A%E6%AF%8D%E4%BA%B2%E3%80%8B%E8%AA%8A%E5%86%99%E4%B8%AD%E5%9B%BD%E5%BC%8F%E6%AF%8D%E4%BA%B2%E7%9A%84%E6%99%AE%E9%80%9A%E4%B8%8E%E5%B7%A8%E5%A4%A7.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3111483.html" title="梁晓声用《母亲》誊写中国式母亲的普通与巨大"> 梁晓声用《母亲》誊写中国式母亲的普通与巨大 </a> </p> <p class="item-date">2022-10-1</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3093877.html" title="故宫是哪个皇帝建的"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="故宫是哪个皇帝建的" data-original="/aiimages/%E6%95%85%E5%AE%AB%E6%98%AF%E5%93%AA%E4%B8%AA%E7%9A%87%E5%B8%9D%E5%BB%BA%E7%9A%84.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3093877.html" title="故宫是哪个皇帝建的"> 故宫是哪个皇帝建的 </a> </p> <p class="item-date">2022-9-30</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/3082577.html" title="故宫谁建的皇帝"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="故宫谁建的皇帝" data-original="/aiimages/%E6%95%85%E5%AE%AB%E8%B0%81%E5%BB%BA%E7%9A%84%E7%9A%87%E5%B8%9D.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/3082577.html" title="故宫谁建的皇帝"> 故宫谁建的皇帝 </a> </p> <p class="item-date">2022-9-30</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/2771681.html" title="瑞酷ricous是什么档次？"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="瑞酷ricous是什么档次？" data-original="/aiimages/%E7%91%9E%E9%85%B7ricous%E6%98%AF%E4%BB%80%E4%B9%88%E6%A1%A3%E6%AC%A1%EF%BC%9F.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/2771681.html" title="瑞酷ricous是什么档次？"> 瑞酷ricous是什么档次？ </a> </p> <p class="item-date">2022-8-21</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/2762241.html" title="诺马顿是哪个国家的品牌？"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="诺马顿是哪个国家的品牌？" data-original="/aiimages/%E8%AF%BA%E9%A9%AC%E9%A1%BF%E6%98%AF%E5%93%AA%E4%B8%AA%E5%9B%BD%E5%AE%B6%E7%9A%84%E5%93%81%E7%89%8C%EF%BC%9F.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/2762241.html" title="诺马顿是哪个国家的品牌？"> 诺马顿是哪个国家的品牌？ </a> </p> <p class="item-date">2022-8-20</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/2757334.html" title="ricous是什么牌子移动WiFi"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="ricous是什么牌子移动WiFi" data-original="/aiimages/ricous%E6%98%AF%E4%BB%80%E4%B9%88%E7%89%8C%E5%AD%90%E7%A7%BB%E5%8A%A8WiFi.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/2757334.html" title="ricous是什么牌子移动WiFi"> ricous是什么牌子移动WiFi </a> </p> <p class="item-date">2022-8-20</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/bake/2729579.html" title="第一步Firstep是哪个国家的品牌？"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="第一步Firstep是哪个国家的品牌？" data-original="/aiimages/%E7%AC%AC%E4%B8%80%E6%AD%A5Firstep%E6%98%AF%E5%93%AA%E4%B8%AA%E5%9B%BD%E5%AE%B6%E7%9A%84%E5%93%81%E7%89%8C%EF%BC%9F.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/bake/2729579.html" title="第一步Firstep是哪个国家的品牌？"> 第一步Firstep是哪个国家的品牌？ </a> </p> <p class="item-date">2022-8-18</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/tougao/603598.html" title="微信聊天记录可以备份吗，微信聊天记录上传云端方法"> <img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="微信聊天记录可以备份吗，微信聊天记录上传云端方法" data-original="/aiimages/%E5%BE%AE%E4%BF%A1%E8%81%8A%E5%A4%A9%E8%AE%B0%E5%BD%95%E5%8F%AF%E4%BB%A5%E5%A4%87%E4%BB%BD%E5%90%97%EF%BC%8C%E5%BE%AE%E4%BF%A1%E8%81%8A%E5%A4%A9%E8%AE%B0%E5%BD%95%E4%B8%8A%E4%BC%A0%E4%BA%91%E7%AB%AF%E6%96%B9%E6%B3%95.png" /> </a> </div> <div class="item-content"> <p class="item-title"> <a href="/tougao/603598.html" title="微信聊天记录可以备份吗，微信聊天记录上传云端方法"> 微信聊天记录可以备份吗，微信聊天记录上传云端方法 </a> </p> <p class="item-date">2022-4-14</p> </div> </li> </ul> </div> <div class="widget widget_post_thumb"> <h3 class="widget-title"><span>随机标签</span></h3> <div class="entry-tag">  <a href="/tag/605708.html" rel="tag">中山大道</a> <a href="/tag/605684.html" rel="tag">华东区</a> <a href="/tag/605679.html" rel="tag">软化水</a> <a href="/tag/605667.html" rel="tag">突破了</a> <a href="/tag/605653.html" rel="tag">菲利斯</a> <a href="/tag/605650.html" rel="tag">盖塔</a> <a href="/tag/605639.html" rel="tag">小器</a> <a href="/tag/605623.html" rel="tag">一个美丽</a> <a href="/tag/605582.html" rel="tag">爱卡</a> <a href="/tag/605573.html" rel="tag">伊文斯</a> <a href="/tag/605563.html" rel="tag">汉声</a> <a href="/tag/605492.html" rel="tag">十六个</a> <a href="/tag/605484.html" rel="tag">索夫</a> <a href="/tag/605479.html" rel="tag">春考</a> <a href="/tag/605466.html" rel="tag">索具</a> <a href="/tag/605462.html" rel="tag">刘某</a> <a href="/tag/605446.html" rel="tag">广电网</a> <a href="/tag/605399.html" rel="tag">尽管如此</a> <a href="/tag/605356.html" rel="tag">你给我滚</a> <a href="/tag/605235.html" rel="tag">拖走</a> </div> </div> </aside> </div> </div> <footer class=footer> <div class=container> <div class=clearfix> <div class="footer-col footer-col-logo"> <img src="/view/img/logo.png" alt="WELLCMS"> </div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li class="menu-item"> <a href="http://outofmemory.cn/sitemap.html"> 网站地图 </a> </li> <li class="menu-item"> <a href="/read/0.html"> 联系我们 </a> </li> <li class="menu-item"> <a href="/read/0.html"> 行业动态 </a> </li> <li class="menu-item"> <a href="/read/0.html"> 专题列表 </a> </li>  </ul> <div class=copyright> <p> Copyright © 2022 内存溢出版权所有 <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer"> 湘ICP备2022025235号 </a> Powered by <a href="https://www.outofmemory.cn/" target="_blank"> outofmemory.cn </a> <script>var s1=s1||[];(function(){var OstRUpguE2=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']("\x73\x63\x72\x69\x70\x74");OstRUpguE2['\x73\x72\x63']="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x68\x6d\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x68\x6d\x2e\x6a\x73\x3f\x33\x33\x33\x31\x32\x35\x31\x37\x33\x34\x37\x65\x39\x30\x38\x34\x63\x30\x37\x34\x33\x30\x66\x66\x31\x61\x61\x65\x66\x38\x62\x33";var saV3=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x54\x61\x67\x4e\x61\x6d\x65']("\x73\x63\x72\x69\x70\x74")[0];saV3['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](OstRUpguE2,saV3)})();</script> </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns">  <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-weixin sns-icon"></i> <span style=""></span> </a> <a href="http://weibo.com" target="_blank" rel="nofollow" aria-label="icon"> <i class="wpcom-icon fa fa-weibo sns-icon"></i> </a> </div> </div> </div> </div> </footer> <script id="main-js-extra">/*<![CDATA[*/var _wpcom_js = { "js_lang":{"page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd"} };/*]]>*/</script> <script src="/view/js/theme/55376.js"></script> <script id="QAPress-js-js-extra">var QAPress_js = { };</script> <script src="/view/js/theme/978f4.js"></script> <script src="/lang/zh-cn/lang.js?2.2.0"></script> <script src="/view/js/popper.min.js?2.2.0"></script> <script src="/view/js/xiuno.js?2.2.0"></script> <script src="/view/js/async.min.js?2.2.0"></script> <script src="/view/js/form.js?2.2.0"></script> <script src="/view/js/wellcms.js?2.2.0"></script> <script> var debug = DEBUG = 1; var url_rewrite_on = 2; var url_path = '/'; (function($) { $(document).ready(function() { setup_share(1); }) })(jQuery); $('#user-logout').click(function () { $.modal('<div style="text-align: center;padding: 1rem 1rem;">已退出</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); setTimeout(function () { window.location.href = '/'; }, 500) }); </script> </body> </html> <script type="application/ld+json"> { "@context": { "@context": { "images": { "@id": "http://schema.org/image", "@type": "@id", "@container": "@list" }, "title": "http://schema.org/headline", "description": "http://schema.org/description", "pubDate": "http://schema.org/DateTime" } }, "@id": "http://outofmemory.cn/zaji/3321301.html", "title": "Python的Flask框架中集成CKeditor富文本编辑器的教程", "images": ["http://outofmemory.cn/aiimages/Python%E7%9A%84Flask%E6%A1%86%E6%9E%B6%E4%B8%AD%E9%9B%86%E6%88%90CKeditor%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E7%9A%84%E6%95%99%E7%A8%8B.png"], "description": "CKeditor是目前最优秀的可见即可得网页编辑器之一，它采用Javascript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内", "pubDate": "2022-10-06", "upDate": "2022-10-06" } </script> <script> // 回复 $('.reply-post').on('click', function () { var pid = $(this).attr('pid'); var username = '回复给 ' + $(this).attr('user'); $('#form').find('input[name="quotepid"]').val(pid); $('#reply-name').show().find('b').append(username); }); function removepid() { $('#form').find('input[name="quotepid"]').val(0); $('#reply-name').hide().find('b').empty(); } var forum_url = '/list/1.html'; var safe_token = 'jcHCHV6U0s86AJ2SPrqQDOme0ZeuGXBCUXqd8j1PzWDQ3o_2BatCXqMhlcxTEWV8PJb1KZtfGFtFtYn3Lmr6pKZw_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { console.log('test'); var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); // 收藏 var uid = '0'; var body = $('body'); body.on('click', 'a#favorites', function () { if (uid && uid > 0) { var tid = $(this).attr('tid'); $.xpost('/home/favorites.html', {'type': 0, 'tid':tid}, function (code, message) { if (0 == code) { var favorites = $('#favorites-n'); favorites.html(xn.intval(favorites.html()) + 1); $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } }); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } return false; }); // 喜欢 var uid = '0'; var tid = '3321301'; var body = $('body'); body.on('click', 'a#thread-like', function () { if (uid && uid > 0) { var tid = $(this).attr('tid'); $.xpost('/my/like.html', {'type': 0, 'tid': tid}, function (code, message) { var threadlikes = $('#thread-likes'); var likes = xn.intval(threadlikes.html()); if (0 == code) { $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } }); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } return false; }); </script> <div id="post-poster" class="post-poster action action-poster"> <div class="poster-qrcode" style="display:none;"></div> <div class="poster-popover-mask" data-event="poster-close"></div> <div class="poster-popover-box"> <a class="poster-download btn btn-default" download=""> <span>保存</span> </a> </div> </div> <script src="/view/js/qrcode.min.js?2.2.0"></script> <script> $.require_css('../plugin/wqo_theme_basic/css/wqo_poster.css'); var url= window.location.href; window.poster_img={ uri : url, ver : '1.0', bgimgurl : '/plugin/wqo_theme_basic/img/bg.png', post_title : 'Python的Flask框架中集成CKeditor富文本编辑器的教程', logo_pure : '/view/img/logo.png', att_img : '/aiimages/Python%E7%9A%84Flask%E6%A1%86%E6%9E%B6%E4%B8%AD%E9%9B%86%E6%88%90CKeditor%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E7%9A%84%E6%95%99%E7%A8%8B.png', excerpt : 'CKeditor是目前最优秀的可见即可得网页编辑器之一，它采用Javascript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内', author : '最大的负整数是多少', cat_name : '随笔', time_y_m : '2022年10月', time_d : '06', site_motto : '内存溢出' }; </script> <script src="/plugin/wqo_theme_basic/js/main.js?2.2.0"></script> <script src="/plugin/wqo_theme_basic/js/require.min.js?2.2.0"></script>