<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flask-Admin &#8211; 李辉 / Grey Li</title>
	<atom:link href="https://greyli.com/tag/flask-admin/feed/" rel="self" type="application/rss+xml" />
	<link>https://greyli.com</link>
	<description>一个编程和写作爱好者的在线记事本</description>
	<lastBuildDate>Sat, 15 Nov 2025 10:55:15 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.9.26</generator>

<image>
	<url>https://greyli.com/wp-content/uploads/2025/03/avatar-500-compressed-144x144.jpg</url>
	<title>Flask-Admin &#8211; 李辉 / Grey Li</title>
	<link>https://greyli.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>在 Flask-Admin 中集成富文本编辑器 CKEditor</title>
		<link>https://greyli.com/add-ckeditor-in-flask-admin-by-flask-ckeditor/</link>
		<comments>https://greyli.com/add-ckeditor-in-flask-admin-by-flask-ckeditor/#respond</comments>
		<pubDate>Fri, 22 Feb 2019 02:52:25 +0000</pubDate>
		<dc:creator><![CDATA[李辉]]></dc:creator>
				<category><![CDATA[计算机与编程]]></category>
		<category><![CDATA[CKEditor]]></category>
		<category><![CDATA[Flask-Admin]]></category>
		<category><![CDATA[Flask-CKEditor]]></category>
		<category><![CDATA[富文本编辑器]]></category>
		<category><![CDATA[管理后台]]></category>

		<guid isPermaLink="false">http://greyli.com/?p=2310</guid>
		<description><![CDATA[在 Flask-Admin 里，默认使用普通的文本区域（&#60;textarea&#62;）来编辑长文本。借助  [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>
	在 <a href="https://github.com/flask-admin/flask-admin">Flask-Admin</a> 里，默认使用普通的文本区域（&lt;textarea&gt;）来编辑长文本。借助 <a href="https://github.com/greyli/flask-ckeditor">Flask-CKEditor</a>，你可以很容易的为 Flask-Admin 集成富文本编辑器 <a href="https://ckeditor.com/">CKEditor</a>。
</p>
<p>
	首先安装 Flask-CKEditor：
</p>
<pre>
<code>$ pip install flask-ckeditor</code></pre>
<p>
	下面是一个简单的例子，其中的关键步骤已用注释标出：
</p>
<pre>
<code>from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_admin import Admin
from flask_admin.contrib.sqla import ModelView
from flask_ckeditor import CKEditor, CKEditorField  # 导入扩展类 CKEditor 和 字段类 CKEditorField

app = Flask(__name__)
app.config['SECRET_KEY'] = &#39;dev&#39;
app.config['SQLALCHEMY_DATABASE_URI'] = &#39;sqlite:///&#39;

db = SQLAlchemy(app)
ckeditor = CKEditor(app)  # 初始化扩展

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120))
    text = db.Column(db.Text)


# 自定义 Post 模型
class PostAdmin(ModelView):
    form_overrides = dict(text=CKEditorField)  # 重写表单字段，将 text 字段设为 CKEditorField
    create_template = &#39;edit.html&#39;  # 指定创建记录的模板
    edit_template = &#39;edit.html&#39;  # 指定编辑记录的模板

admin = Admin(app, name=&#39;Flask-CKEditor demo&#39;)
admin.add_view(PostAdmin(Post, db.session))

if __name__ == &#39;__main__&#39;:
    app.run(debug=True)</code></pre>
<p>
	在模板文件夹里，我们创建一个 edit.html 文件（templates/edit.html），在这个文件里重载 Flask-Admin 的编辑模板，加载 CKEditor 资源：
</p>
<pre>
<code>{% extends &#39;admin/model/edit.html&#39; %} &lt;!-- 声明继承 Flask-Admin 的模型编辑模板 --&gt;

{% block tail %} &lt;!-- 向父模板的 tail 块内追加内容 --&gt;
    {{ super() }}
    {{ ckeditor.load() }} &lt;!-- 加载 CKEditor 的 JavaScript 文件，默认从 CDN 获取 --&gt;
{% endblock %}</code></pre>
<p>
	实际的效果如下图所示：
</p>
<p>
	<img alt="" class="alignnone size-full wp-image-2344" height="572" src="http://greyli.com/wp-content/uploads/2019/02/flask-admin-ckeditor.png" width="1203" srcset="https://greyli.com/wp-content/uploads/2019/02/flask-admin-ckeditor.png 1203w, https://greyli.com/wp-content/uploads/2019/02/flask-admin-ckeditor-150x71.png 150w, https://greyli.com/wp-content/uploads/2019/02/flask-admin-ckeditor-300x143.png 300w, https://greyli.com/wp-content/uploads/2019/02/flask-admin-ckeditor-1024x487.png 1024w, https://greyli.com/wp-content/uploads/2019/02/flask-admin-ckeditor-624x297.png 624w" sizes="(max-width: 1203px) 100vw, 1203px" />
</p>
<p>
	完整的可运行的示例程序代码可以在<a href="http://github.com/greyli/flask-ckeditor/tree/master/examples/flask-admin">这里</a>获取到。
</p>
<p>
	你可以阅读 <a href="https://flask-admin.readthedocs.io/en/latest/">Flask-Admin 文档</a>和 <a href="https://flask-ckeditor.readthedocs.io/en/latest/">Flask-CKEditor 文档</a>了解更多进阶用法。
</p>
<p>
	附注：本文改写自我在 Stack Overflow 上的回答（<a href="https://stackoverflow.com/a/46481343/5511849">https://stackoverflow.com/a/46481343/5511849</a>）。</p>
]]></content:encoded>
			<wfw:commentRss>https://greyli.com/add-ckeditor-in-flask-admin-by-flask-ckeditor/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
