欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-14 15:43:34
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加其他功能。Flask没有默认使用的数据库、窗体验证工具。然而,Flask保留了扩增的弹性,可以用Fl ......

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

 

官网及文档:(右键)

官网下载:(右键)

github:(右键)

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

以上转自


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

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

将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项目中使用富文本编辑器

 

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

 

 


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

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