1. 下载配置富文本文件
# 中文文档: 下载5.2.2版本-->直接改版本就行-->解压后存放static目录下
http://tinymce.ax-z.cn/
2. static / js / center.js配置富文本
$(function () {
//设置富文本
tinymce.init({
selector: ".mytextarea", // 关联textarea标签
height: 400,
plugins: "quickbars emoticons",
inline: false,
toolbar: true,
menubar: true,
quickbars_selection_toolbar: "bold italic | link h2 h3 blockquote",
quickbars_insert_toolbar: "quickimage quicktable",
});
// 手机号校验唯一性
.....
// 点击切换样式
.....
})
3. templates / user / center.html 填充发表文章的html
<div class="right1" style="padding-top:20px">
<form action="{{ url_for('article.publish_article') }}" method="post">
<p><input type="text" class="form-control" id="InputTitle" name="title" placeholder="请输入文章标题">
</p>
<p>
<select name="type" class="form-control">
<option value="0">请选择文章分类</option>
{% for type in types %}
<option value="{{ type.id }}">{{ type.type_name }}</option>
{% endfor %}
</select>
</p>
<p>
<textarea name="content" class="mytextarea">
</textarea>
</p>
<p></p>
<p style="text-align:right;">
<button type="submit" class="btn btn-primary">发表文章</button>
</p>
</form>
</div>
4. templates / user / center.html 引入外部自定义的js和富文本
<script src="{{ url_for('static',filename='tinymce/tinymce.min.js') }}"></script>
5. 编写发表文章函数 apps / articie / views.py
from flask import Blueprint, request, redirect, url_for, g
from apps.articie.models import Article
from ext import db
article_bp = Blueprint('article', __name__, url_prefix="/article")
# 发表文章
@article_bp.route("/publish", methods=["GET", "POST"])
def publish_article():
if request.method == "POST":
title = request.form.get('title')
type_id = request.form.get('type')
content = request.form.get('content') # 要想保存表情,数据库类型需要改为 blob类型
# 添加文章
article = Article()
article.title = title
article.type_id = type_id
article.content = content
article.user_id = g.user.id
db.session.add(article)
db.session.commit()
return redirect(url_for('user.index'))
6. apps / __init__.py 注册蓝图