Flask-CKditor的图文编辑

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>为该下项目中已存在的模板文件。