Flask-CKditor的图文编辑
安装依赖:
在pycharm的终端中输入代码指令;
代码指令内容:
Pip install flask-ckeditor==0.4.3
编辑图文内容:
CKEditor的初始化:
app.config['CKEDITOR_UPLOAD_FOLDER'] = True
ckeditor = CKEditor()
ckeditor.init_app(app)
定义表单类:
from flask_ckeditor import CKEditorField
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired
class ArticleForm(FlaskForm):
title = StringField(label='标题', validators=[DataRequired()])
content = CKEditorField(label='内容', validators=[DataRequired()])
submit = SubmitField(label='查看')
视图函数:
@app.route('/ckeditor_article', methods=['GET', 'POST'])
def ckeditor_article():
form = ArticleForm()
if request.method == 'POST' and form.validate_on_submit():
return render_template('ckeditor_view.html', form=form)
else:
return render_template('ckeditor_edit.html', form=form)
模板文件:
Ckeditor_edit.html
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %}CKEditor基本使用{% endblock %}
{% block content %}
<div class="container">
{{ wtf.quick_form(form) }}
</div>
{{ ckeditor.load() }}
{{ ckeditor.config(name='content',height=320) }}
{% endblock %}
Ckeditor_view.html
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %}{{ form.title.data }}{% endblock %}
{% block content %}
<div class="container">
<h1>{{ form.title.data }}</h1>
<hr>
{{ form.content.data | safe }}
</div>
{% endblock %}
头文件(base.html):
代码命令:
{% extends 'bootstrap/base.html' %}
{% block navbar %}
{% include 'nav.html' %}
{% endblock %}
参套的模板文件(nav.html):
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">用户交互</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
表单
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{url_for('form')}}">表单基本测试</a></li>
<li><a href="{{url_for('upload')}}">文件上传</a></li>
<li><a href="{{url_for('login')}}">登录(基本)</a></li>
<li><a href="{{url_for('login',mode=1)}}">登录(Bootstrap)</a></li>
<li><a href="{{url_for('login',mode=2)}}">登录(Bootstrap快速生成)</a></li>
<li><a href="{{url_for('register')}}">注册</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
表单
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{url_for('flash_message')}}">flask消息(自定义)</a></li>
<li><a href="{{url_for('flash_message',mode=1)}}">flask消息(Bootstrap快速生成)</a></li>
<li><a href="{{url_for('error_404')}}">自定义错误页(404,函数终止)</a></li>
{# <li><a href="{{url_for('')}}"></a></li>#}
<li><a href="{{url_for('error_500',mode=1)}}">自定义错误页(500,函数终止)</a></li>
<li><a href="{{url_for('error_500')}}">自定义错误页(500,抛出异常)</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{ url_for('ckeditor_article') }}" class="dropdown-toggle"></a>
</li>
</ul>
</div>
</div>
</nav>
图文测试:
文章编辑页面效果
文章查看页面效果
常见问题:
ImportError: cannot import name ‘Markup‘ from ‘flask‘:
问题原因:
从flask模块中导入Markup时出现了无法调用的问题。
解决方法:
安装指定版本
pip install Flask==2.0.3
pip install Jinja2==3.1.1
再次运行会出现:
ImportError: cannot import name ‘url_quote‘ from ‘werkzeug.urls‘
问题原因:
因为Werkzeug 3.0.0已发布,并且Flask没有正确指定依赖项(需求显示Werkzeug>=2.2.0)。
解决方法:
再安装指定的依赖项
pip install Werkzeug==2.2.2
注意事项:
文章中的<li><a href="{{url_for('form')}}">表单基本测试</a></li>为该下项目中已存在的模板文件。