当前位置：Gxlcms > Python > Python的Flask框架中集成CKeditor富文本编辑器的教程

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

时间：2021-07-01 10:21:17 帮助过：100人阅读

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> <div class="jb51code"> <pre class="brush:js;"><script type="text/html" style='display:block'> <!DOCTYPE html> <html> <head> <title>A Simple Page with CKEditor</title>  <script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></ script> </head> <body> </body> </html> </script></pre> </p> <p>CKEditor脚本文件也可以引用CDN上的文件，下面给出几个参考链接：</p> <div class="jb51code"> <pre class="brush:js;"><script type="text/html" style='display:block'> <script src="//cdn.ckeditor.com/4.4.6/basic/ckeditor.js"></ script></script></pre> </p> <p> 基础版（迷你版）<br /> </p> <div class="jb51code"> <pre class="brush:js;"><script type="text/html" style='display:block'> <script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></ script></script></pre> </p> <p> 标准版<br /> </p> <div class="jb51code"> <pre class="brush:js;"><script type="text/html" style='display:block'> <script src="//cdn.ckeditor.com/4.4.6/full/ckeditor.js"></ script> </script></pre> </p> <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="jb51code"> <pre class="brush:js;"><script type="text/html" style='display:block'> CKEDITOR.editorConfig = function( config ) { // ... // file upload url config.filebrowserUploadUrl = '/ckupload/'; // ... }; </script></pre> </p> <p><strong>方法2：</strong>将设置值放入作为参数放入CKEDITOR.replace():</p> <div class="jb51code"> <pre class="brush:js;"><script type="text/html" style='display:block'> <script> CKEDITOR.replace('editor1', { filebrowserUploadUrl: '/ckupload/', }); </ script> </script></pre> </p> <p><strong>Flask处理上传请求<br /> </strong>CKEditor上传功能是统一的接口，即一个接口可以处理图片上传、文件上传、Flash上传。先来看看代码：</p> <div class="jb51code"> <pre class="brush:py;"> 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 = """ <script type="text/javascript"> window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s'); </ script> """ % (callback, url, error) response = make_response(res) response.headers["Content-Type"] = "text/html" return response </script></pre> </p> <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目录的绝对路径<br /> </p> <div class="jb51code"> <pre class="brush:py;"> demo = Blueprint('demo', static_folder="/path/to/static") </script></pre> </p> <p>2. 对应url需加上蓝本端点<br /> </p> <div class="jb51code"> <pre class="brush:js;"><script type="text/html" style='display:block'> <script src="{{url_for('.static', filename='ckeditor/ckeditor.js')}}"></ script> <script type="text/javascript"> CKEDITOR.replace( "ckeditor_demo", { filebrowserUploadUrl: './ckupload/' } ); </ script> </script></pre> </p> <p>3. 设置endpoint端点值<br /> </p> <div class="jb51code"> <pre class="brush:py;"> response = form.upload(endpoint=demo) </script></pre> </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/python-357005.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">Python模块包中__init__.py文件功能分析</p></a> </li> <li class="opt-item ta-r"> <a href='/python-357007.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">Python中getattr函数和hasattr函数作用详解</p></a> </li> </ul> </div> </div> </div> <div class="g-title fix"> <h2 class="title-txt">人气教程排行</h2> </div> <div class="m-rank u-dashed mb40"> <ul> <li class="rank-item"> <a href="/python-361871.html" title='对Python2.7pandas中的read_excel详解' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">384次</span> <span class="g-sort-num top">1</span> 对Python2.7pandas中的read_excel详解 </a> </li> <li class="rank-item"> <a href="/python-357851.html" title='Python实现定时弹窗提醒' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">383次</span> <span class="g-sort-num second">2</span> Python实现定时弹窗提醒 </a> </li> <li class="rank-item"> <a href="/python-359898.html" title='python爬虫入门（3）--利用requests构建知乎API' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">383次</span> <span class="g-sort-num third">3</span> python爬虫入门（3）--利用requests构建知乎API </a> </li> <li class="rank-item"> <a href="/python-361328.html" title='python如何爬取搜狗微信公众号文章永久链接的思路解析' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">382次</span> <span class="g-sort-num ">4</span> python如何爬取搜狗微信公众号文章永久链接的思路解析 </a> </li> <li class="rank-item"> <a href="/python-363639.html" title='python字典的键可以相同吗' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">381次</span> <span class="g-sort-num ">5</span> python字典的键可以相同吗 </a> </li> <li class="rank-item"> <a href="/python-462846.html" title='python是一种面向什么的语言？' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">381次</span> <span class="g-sort-num ">6</span> python是一种面向什么的语言？ </a> </li> <li class="rank-item"> <a href="/python-355903.html" title='python通过pil为png图片填充上背景颜色的方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">381次</span> <span class="g-sort-num ">7</span> python通过pil为png图片填充上背景颜色的方法 </a> </li> <li class="rank-item"> <a href="/python-364233.html" title='python语言的编程模式有什么' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">380次</span> <span class="g-sort-num ">8</span> python语言的编程模式有什么 </a> </li> <li class="rank-item"> <a href="/python-353438.html" title='使用python获取进程pid号的方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">380次</span> <span class="g-sort-num ">9</span> 使用python获取进程pid号的方法 </a> </li> <li class="rank-item"> <a href="/python-362615.html" title='Python中如何解决无限循环的问题' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">380次</span> <span class="g-sort-num ">10</span> Python中如何解决无限循环的问题 </a> </li> <li class="rank-item"> <a href="/python-466149.html" title='怎么解决pip不是内部或外部命令' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">378次</span> <span class="g-sort-num ">11</span> 怎么解决pip不是内部或外部命令 </a> </li> <li class="rank-item"> <a href="/python-374795.html" title='python中def是什么意思' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">378次</span> <span class="g-sort-num ">12</span> python中def是什么意思 </a> </li> <li class="rank-item"> <a href="/python-361381.html" title='对numpy中数组元素的统一赋值实例' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">376次</span> <span class="g-sort-num ">13</span> 对numpy中数组元素的统一赋值实例 </a> </li> <li class="rank-item"> <a href="/python-378450.html" title='python的选择语句是什么语句' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">374次</span> <span class="g-sort-num ">14</span> python的选择语句是什么语句 </a> </li> <li class="rank-item"> <a href="/python-362375.html" title='Python中构造方法的解析（附示例）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">374次</span> <span class="g-sort-num ">15</span> Python中构造方法的解析（附示例） </a> </li> <li class="rank-item"> <a href="/python-360729.html" title='关于python中引入导入与自定义模块以及外部文件的实例分享' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">373次</span> <span class="g-sort-num ">16</span> 关于python中引入导入与自定义模块以及外部文件的实例分享 </a> </li> <li class="rank-item"> <a href="/python-364421.html" title='python如何在不同类之间调用方法' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">372次</span> <span class="g-sort-num ">17</span> python如何在不同类之间调用方法 </a> </li> <li class="rank-item"> <a href="/python-462395.html" title='python中的【//】是什么运算符号' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">372次</span> <span class="g-sort-num ">18</span> python中的【//】是什么运算符号 </a> </li> <li class="rank-item"> <a href="/python-363743.html" title='python中╲t是什么' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">371次</span> <span class="g-sort-num ">19</span> python中╲t是什么 </a> </li> <li class="rank-item"> <a href="/python-357501.html" title='python同时给多个变量赋值' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">371次</span> <span class="g-sort-num ">20</span> python同时给多个变量赋值 </a> </li> </ul> </div> </div> </div>  </div> </div>  <div class="footer"> 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div>  <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin">  <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> <form id="regform" action="/user-center-reg.html" method="post"> <div class="login-reg" style="display: none;" id="con_login_2"> <input type="hidden" name="t" id="t"/> <p class="int-text"> <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p> <p class="int-text"> <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p> <p class="int-text"> <input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p> <p class="int-text1"><span class="inputbox"> <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};"> </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p> <p class="int-info"> <label> <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox"> 我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label> </p> <p class="int-btn"><input type="hidden" name="dosubmit"/> <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p> </div> </form> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function() { layui.code({ elem: 'pre', //默认值为.layui-code about: false, skin: 'notepad', title: 'php怎么实现数据库验证跳转代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> </body> </html>