文档章节

flask项目中使用富文本编辑器

o
 osc_wws45aot
发布于 2019/08/20 12:53
字数 777
阅读 16
收藏 0

精选30+云产品,助力企业轻松上云!>>>

flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加其他功能。Flask没有默认使用的数据库、窗体验证工具。然而,Flask保留了扩增的弹性,可以用Flask-extension加入这些功能:ORM、窗体验证工具、文件上传、各种开放式身份验证技术。

flask安装:    pip install flask

flask的教程网上有很多,我这里就不细说了


 

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor等等。

TinyMCE的优势:

  • 开源可商用,基于LGPL2.1
  • 插件丰富,自带插件基本涵盖日常所需功能
  • 接口丰富,可扩展性强,有能力可以无限拓展功能
  • 界面好看,符合现代审美
  • 提供经典、内联、沉浸无干扰三种模式
  • 对标准支持优秀
  • 多语言支持,官网可下载几十种语言。

 

官网及文档:www.tiny.cloud(右键)

官网下载:www.tiny.cloud/get-tiny/self-hosted/(右键)

Github:github.com/tinymce(右键)

注:此中文文档自TinyMCE v5开始编写,对v4不做介绍。本站所用版本为v5

以上转自tinymce中文文档


要如何在flask中插入tinymce呢,首先在官网下载好tinymce插件

将tinymce_setup.js放在static下的js文件里面,将解压出来的tinymce文件夹放在js文件夹的同级目录下

在jinja2模板里面首先引入

<script type="text/javascript" src="../../static/admin/js/jquery-1.12.4.min.js"></script>
<script src="../../static/admin/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="../../static/admin/js/tinymce_setup.js"></script>

 这三个js文件,再将下面的div放在body里面

<div class="rich_wrap fl">
    <input class="input_area" id="rich_content" name="content" value="{{ news.content }}"></input>
</div>
这个js是定义富文本编辑器的宽高语言等
<script>
    $(function() {
        tinymce.init({
            //选择class为content的标签作为编辑器
            selector: '#rich_content',
            //方向从左到右
            directionality: 'ltr',
            //语言选择中文
            language: 'zh_CN',
            //高度为400
            height: 400,
            width: '100%',
            //按tab不换行
            nonbreaking_force_tab: true,
            readonly: 1
        });
    })
</script>

修改tinymce_setup.js

imageupload_url: "/upload/"

这个是在文本编辑是插入图片的接口,同理,也就是说你需要一个接口来保存插入的图片

@app.route('/upload/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        img = request.files.get('file')
        res = requests.post(url='http://xx.xx.xx.xx/v1/qiniu/upload', files={'file': img})   # 将插入的图片上传到七牛云上
        result = json.loads(res.text)
        imgsrc = result['data']['url']
        print(imgsrc)
        mes = {}
        mes['path'] = imgsrc       # 将图片的地址封装在字典里,键为path,这样图片就能在富文本中显示了
        mes['error'] = False
        return jsonify(mes)

也可以将图片下载到本地,具体的代码就不往上写了,基本就是将图片接收到,以二进制的方式写入图片到本地就OK

至此,就可以在你的项目中使用富文本编辑器了

 

 

 


以上就是本人对flask中使用富文本编辑器的一些理解和使用小结,不对的地方还请指出。

原创文章,转载请说明出处

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
使用Flask-CKEditor集成富文本编辑框 --

使用Flask-CKEditor集成富文本编辑框 富文本编辑器即所见即所得编辑器,类似于文本编辑软件。它提供一系列按钮和下拉列表来为文本设置格式,编辑状态的文本样式即最终呈现出来的样式。在Web...

osc_lu3hkb21
2019/03/17
15
0
小白都能看得懂的教程 一本教你如何在前端实现富文本编辑器

小白都能看得懂的教程 一本教你如何在前端实现富文本编辑器 博客文章内容导航(实时更新) 更多优质文章推荐: 小白都能看懂的实战教程 手把手教你Python Web全栈开发 (DAY 1) 小白都能看懂的...

亓官劼
03/30
0
0
《Flask Web开发实战》中的实战项目

《Flask Web开发实战》中包含大量的项目实例,本文会进行一些简单的介绍,这几个项目的源码和在线Demo链接均可以在helloflask.com看到。另外,你可以访问这篇同名文章查看项目的截图。 第1~6...

greyli
2018/09/20
2.2K
0
tinymce 富文本编辑器 编写资料

tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequest 2.0的家臣们 URL....

osc_8g11urw7
2018/10/18
21
0
digwtx/wtxlog

Wtxlog是基于Python Flask开发的开源的BLOG/CMS系统,以“简单实用”为目标。 Wtxlog内置栏目、标签(Tags)、文章等主要模型,可以满足绝大部分的内容输出需求。 程序通用性良好,各种云主机...

digwtx
2014/08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

我们一定会在人生的更高处相见的

2020.6.7 我知道没人会看到 2021.6.7 我再来写下 每天进步一点点 一年后我就是不一样的我 你也是。 高考加油!

osc_9oidllr2
5分钟前
0
0
esp8266物联网开发一:MicroPython初战江湖

用esp8266做的物联网开发,涉及到固件烧写,固件擦除,代码编写等方面,做一一记录。 1. 固件烧写 首先,下载固件烧写工具:https://www.espressif.com/sites/default/files/tools/flash_dow...

osc_s2b5kacl
6分钟前
0
0
获小黄衫有感

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/2020SpringW/ 一、与软工的开始 在选课的时候咨询学长意见,听上届学长说这门课会有寒假作业,心里很忐忑,又抱有侥幸心理——可能...

osc_r5t7sskd
8分钟前
0
0
ppt 视频不显示控制条

1 正常解决方法 2 如果还不能显示可能是ppt是兼容模式,另存为非兼容模式就好了 后缀是.ppt 现存就好了

osc_hzf6peqc
9分钟前
0
0
五笔经常打不出来的字:温故而知新

遍 ynmp 凸凹 hgmm 凸 hgm 凹mmgd

osc_iy56i6w3
11分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部