Flask博客开发——Tinymce编辑器
之前Flask博客的文本编辑器使用的是markdown,对部署洗该语法的用户不够友好,因此这里为博客添加个简单易用的Tinymce文本编辑器。
github见:https://github.com/ikheu/my_flasky
1 项目中添加Tinymce
下载好Tinymce包以及语言包,并添加到项目中。添加到项目的方法,参考了这篇文章:Pyhton日记——给Flask加上优雅的TinyMCE编辑器。tinymce_setup.js是配置文件,设置了文本编辑器的语言、按钮等。
2 编辑器表单
为了和其它表单的风格保持一致,这里仍使用了Flask-wtf表单。配置文件tinymce_setup.js中标识了id为content的标签作为Tinymce编辑器显示,这里为editor字段添加了相应的指示。测试发现,表单的editor显示为Tinymce后,使用验证函数无法对输入进行判断,这里将输入的判断放入视图函数中。
class EditorForm(FlaskForm):
title = StringField('标题', validators=[DataRequired(), Length(1, 64)])
editor = TextAreaField('正文', id = 'content')
submit = SubmitField('发表')
3 视图函数
使用request.method判断请求为POST后,判断输入是否为空,若无输入则给予flask消息提醒。若已登录的用户具有写博客的权限,则输入的内容作为Post的body_html属性创建新的博客。Tinymce将输入的文本内容转为html代码,因此这里使用body_html,而不使用body。
@main.route('/editor', methods=['GET', 'POST'])
@login_required
def editor():
''' 编辑器界面 '''
form = EditorForm()
if request.method == 'POST':
if not form.editor.data:
flash('Write something.')
return render_template('editor.html', form=form)
if current_user.can(Permission.WRITE_ARTICLES):
print(request.form)
post = Post(title=request.form['title'],
body_html=request.form['editor'],
author=current_user._get_current_object())
db.session.add(post)
db.session.commit()
return redirect(url_for('.post', id=post.id))
return render_template('editor.html', form = form)
4 编辑器页面
在editor.html中加入tinymce.min.js、tinymce_setup.js这两个文件。使用wtf.quick_form渲染编辑器表单。
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Editor{% endblock %}
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename='tinymce/js/tinymce/tinymce.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/tinymce_setup.js') }}"></script>
{% endblock %} {% block page_content %}
{{ wtf.quick_form(form) }}
{% endblock %}
编辑器界面显示如下:
5 代码高亮
在编辑界面上,代码是可以高亮的:
提交后,由于没有关联到任何渲染样式,代码自然无法高亮:
为了保证提交前后的显示是一样的,仍想使用与tinyMCE编辑窗口中的样式来渲染提交后的页面。查了tinyMCE官网发现,需要手动配置js和css文件。下载渲染程序并添加到文章页的html文件中:
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='prism.css') }}">
<script src="{{ url_for('static', filename='js/prism.js') }}"></script>
{% endblock %}
刷新文章页,显示如下:
大功告成。
Flask博客开发——Tinymce编辑器的更多相关文章
- Flask博客开发——登录验证码
这部分为Flask博客的登录页面加个验证码.使用了PIL模块生成验证码图片,并通过Flask的session机制,进行验证码验证. 1.生成验证码 使用string模块:string.ascii_le ...
- Flask博客开发——自定义头像
Flask Web开发一书中,使用了与个人邮箱绑定的Gravatar图形作为用户头像.Gravatar提供的头像比较简陋,而且可能由于网络问题无法生成头像.多数社交网站和博客提供用户自定义头像功能,因 ...
- Django 博客开发教程目录索引
Django 博客开发教程目录索引 本项目适合 0 基础的 Django 开发新人. 项目演示地址:Black & White,代码 GitHub 仓库地址:zmrenwu/django-bl ...
- Padrino 博客开发示例
英文版出处:http://www.padrinorb.com/guides/blog-tutorial 楼主按 拿作者自己的话说:Padrino(谐音:派骓诺)是一款基于Sinatra的优雅的Web应 ...
- 博客用Markdown编辑器插入视频
要展示一些App的效果用或者更方便地展示工具的操作,可以使用视频. 以下有两种方式可以在博客中插入视频 第一种 此方法适用于插入来源优酷的视频或者你自己录制了视频上传到优酷,这种方法的好处是可以插入时 ...
- Orchard运用 - 为博客启用Markdown编辑器
有时决定你是否使用某一个博客系统,最看重就是如何更简便的写博客,不能让其成为一个负担或别扭费力不讨好的工作. 对此一个好的编辑器就是一个最靓丽的卖点.比如最新的博客系统ghost.org就只定位一个最 ...
- Django博客开发实践,初学者开发经验
python,Django初学者,开发简易博客,做了一下笔记,记录了开发的过程,功力浅薄,仅供初学者互相 交流,欢迎意见建议.具体链接:Django博客开发实践(一)--分析需求并创建项目 地址:ht ...
- Django个人博客开发 | 前言
本渣渣不专注技术,只专注使用技术,不是一个资深的coder,是一个不折不扣的copier 1.前言 自学 Python,始于 Django 框架,Scrapy 框架,elasticsearch搜索引擎 ...
- django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务
上一篇博客介绍了comments库使用及ajax支持,现在blog已经具备了基本的功能,但是只能发表文字,不支持富文本编辑.今天我们利用markdown添加富文本支持. markdown语法说明: h ...
随机推荐
- B-dya6
1.昨天的困难,今天解决的进度,以及明天要做的事情 昨天的困难:在导入导出方面遇到了困难,导出的文件不能直接导入. 今天解决的进度:完成了登录页面的背景设计,并再次测试了整个系统的功能. 明天要做的事 ...
- vue.js下载及安装配置
环境 Deepin15.4 下载及配置 node下载地址:http://nodejs.cn/download/ 解压到文件夹 /home/maskerk/vue/ 下 设置软连接: $ ln -s / ...
- HTML标签小记文本类标签
文本类标签: <input type="text" name="" value="">文本框 type(方式,方法)name文 ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
- CentOS 7 PHP-redis扩展安装,浏览器不显示数据及redis无法储存数据常见问题解决办法
首先使用php -m 可以查看到自己安装了那些扩展. 1.使用wget下载redis压缩包 wget https://github.com/phpredis/phpredis/archive/deve ...
- vue-cli项目中,全局引入jquery
命令行执行 npm install --save jquery 找到webpack.base.conf.js文件,写入代码: const webpack = require('webpack') 在m ...
- angular2 学习笔记 ( 状态管理 state management )
更新 : 2017-12-29 ng5 移除 zone.js https://zhuanlan.zhihu.com/p/29577461 zone 的用途就是拦截游览器事件, 比如 click, a ...
- Spring知识点回顾(01)Java Config
Spring知识点回顾(01) 一.Java Config 1.服务和服务注入 2.Java 注解 :功能更强一些 3.测试验证 二.注解注入 1.服务和服务注入 2.配置加载 3.测试验证 三.总结 ...
- docker实践4
我的docker学习笔记4-守护式容器 $docker run -i -t ubuntu /bin/bash $ctrl-p 或 ctrl-q # 转到后台 $docker ps $docke ...
- 译《Time, Clocks, and the Ordering of Events in a Distributed System》
Motivation <Time, Clocks, and the Ordering of Events in a Distributed System>大概是在分布式领域被引用的最多的一 ...