CKEditor 为你的Flask项目添加一个富文本编辑器

news2024/11/16 21:41:23

人家高高在上的CKEditor是有个官网的!!

WYSIWYG HTML Editor with Collaborative Rich Text EditingRock-solid, Free WYSIWYG Editor with Collaborative Editing, 200+ features, Full Documentation and Support. Trusted by 20k+ companies.https://ckeditor.com/ 这边我们使用CKEditor 4,来到这个网址:https://ckeditor.com/cke4/builder

首先要选择你想要的编辑器样式

Basic模式很小巧,有18个插件

Standard就比较多啦,它有61个插件

Full包含所有功能,87个插件

这边有更多的插件

不过还是不搞那么复杂吧,默认就好(doge)

接下来选择样式

最后选择语言

然后下载就好啦

下载下来是个ZIP

给它解压一下里面有个ckeditor

里面是编辑器的文件

把整个ckeditor丢进static里面

HTML中加入下面代码

<script src="/static/ckeditor/ckeditor.js"> </script>

FlaskForm还是照常使用

      <div class="form-group">
        <h4 class="white_theme">{{ form.text.label }}</h4> {{ form.text(class="form-control") }}
      </div>

然后命令行pip install flask-ckeditor安装一下对应的第三方库,然后导入

from flask_ckeditor import CKEditorField

表单类中把TextAreaField改为CKEditorField 

    text=CKEditorField("内容",validators=[
        validators.DataRequired(),
        validators.Length(1,BlogLengthMaximum)
    ])

最后在HTML表单中加入这一行就好啦

{{ ckeditor.load() }}

到这样,我们就可以召唤出可爱的CKEditor啦~~~

p.s. 插个题外话,进入CKEditorField的原代码:

可以看到CKEditorField实质上取代了TextAreaField(呵呵) 

喜欢的话就来个3连吧~~~ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/129090.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SBM模型分析全流程

数据包络分析DEA时&#xff0c;其研究投入产出效率情况&#xff0c;并且其假定投入和产出之间存在单调线性关系&#xff0c;其为一种线性规划技术来确定DMU相对效率的方法。但有时候会多出下‘非期望产出’&#xff0c;就是不希望有它产出&#xff0c;比如资金投入、教育投入换…

【Unity3D日常开发】Unity3D拓展开发:UI界面控制,UI界面的显示和隐藏实现

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客QQ群&#xff1a;1040082875 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 在开发中&#xff0c;可能遇到管理…

2022最后一天盘点

今天是今年最后的一天工作日&#xff0c;对于我来说就是今年的最后一天&#xff0c;因为放假了我就不需要思考了&#xff08;当然公司后端程序员要保持24小时oncall&#xff09; 1 阳完之后 还是有些 咳嗽&#xff0c;公司此起彼伏的咳嗽声&#xff0c;不知道什么时候所有人都…

21.合并两个有序链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[…

【日常系列】LeetCode《23·回溯2》

数据规模->时间复杂度 <10^4 &#x1f62e;(n^2) <10^7:o(nlogn) <10^8:o(n) 10^8<:o(logn),o(1) 内容 lc 401 &#xff1a;二进制手表 https://leetcode.cn/problems/binary-watch/ 提示&#xff1a; 0 < turnedOn < 10 class Solution:def readBinary…

java jvm详解

java 系列文章之JVM 文章目录java 系列文章之JVM一、JVM1.基本概念2.运行过程二、线程三、JVM 内存区域1. 程序计数器(线程私有)2. 虚拟机栈(线程私有)3. 本地方法区(线程私有)4. 堆&#xff08;Heap-线程共享&#xff09;-运行时数据区5. 方法区/永久代&#xff08;线程共享&a…

UE4.27 C++调用DLL

1.首先在UE C项目中添加一个x64动态链接库&#xff0c;取名RouteInterface,放到Source下面&#xff1b; 2.在Source下面新建两个文件夹Include和Lisbs,这两个文件夹用来保存库的头文件和lib文件 3.在项目RouteInterface下面添加一个类&#xff1a;TestDll,并且把头文件保存到…

Mybatis-Plus查询投影与查询条件设置

目录 查询投影 查询指定字段 聚合查询 分组查询 查询条件设置 等值查询 范围查询 模糊查询 排序查询 查询投影 目前我们在查询数据的时候&#xff0c;什么都没有做默认就是查询表中所有字段的内容而查询投影即不查询所有字段&#xff0c;只查询出指定内容的数据 查询指…

九、文件File、IO流

文件File File可以用来表示计算机中的文件或者文件夹官方定义&#xff1a;文件和文件夹路径名的抽象表示形式 3种构造 1File(String pathname) 通过将给定的路径名字符串转换为抽象路径名来创建新的File实例2File(String parent, String child) 从父路径名字符串和子路径名字…

2022硅谷大厂的大!失!败!AiDA时尚设计师助手;2023热门IT技能预告;Uber送货机器人;GitHub今日热榜 | ShowMeAI资讯日报

&#x1f440;日报合辑 | &#x1f3a1;AI应用与工具大全 | &#x1f514;公众号资料下载 | &#x1f369;韩信子 &#x1f4e2; 『抖音』2022抖音热点数据报告&#xff0c;共度温暖岁末 抖音热点联合巨量算数&#xff0c;发布了《2022抖音热点数据报告》&#xff0c;盘点了20…

如何在pycharm上安装tensorflow

TensorFlow™是一个基于数据流编程&#xff08;dataflow programming&#xff09;的符号数学系统&#xff0c;被广泛应用于各类机器学习&#xff08;machine learning&#xff09;算法的编程实现&#xff0c;其前身是谷歌的神经网络算法库DistBelief 。 Tensorflow拥有多层级结…

qt 崩溃处理

Windows系统MSVC编译器的dump文件 debug模式 生成exe自带生成pdb文件&#xff0c;所以无需处理。 1.生成dump文件 通过修改注册表&#xff0c;增加注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Windows Error Reporting\LocalDumps 具体见&#xff1a;利用vs 分…

Forrester Wave发布最新报告 腾讯云数据连接器评分卓越

全球权威研究机构 Forrester 在2022年12月8日最新发布的《中国公有云开发和基础设施平台&#xff0c;Q4 2022》报告中&#xff0c;腾讯云获得高分&#xff0c;位列“领导者象限”。Forrester在报告中提出&#xff1a;“企业在进行公有云开发和基设施平台提供商的选项中&#xf…

php宝塔搭建部署实战帮管客CRM客户管理系统源码

大家好啊&#xff0c;我是测评君&#xff0c;欢迎来到web测评。 本期给大家带来一套php开发的帮管客CRM客户管理系统源码&#xff0c;感兴趣的朋友可以自行下载学习。 技术架构 PHP7.2 nginx mysql5.7 JS CSS HTMLcnetos7以上 宝塔面板 文字搭建教程 下载源码&#xf…

商业智能BI中,业务质量分析和业务成本分析

最初谁也没有想到&#xff0c;信息化 、数字化技术及其应用能够在如此短时间内快速覆盖了社会的方方面面&#xff0c;如今人们的衣食住行和工作生活娱乐都离不开数字化、数据的身影。 数据分析&#xff0c;是离不开业务的&#xff0c;只有把业务研究好了&#xff0c;所做出的报…

Numpy 数组切片

一、列表切片&#xff08;一维数组&#xff09; 1.1、切片原理 列表切片是从原始列表中提取列表的一部分的过程。在列表切片中&#xff0c;我们将根据所需内容&#xff08;如&#xff0c;从何处开始&#xff0c;结束以及增量进行切片&#xff09;剪切列表。Python中符合序列的…

【论文阅读】Online Decision Based Visual Tracking via Reinforcement Learning

Online Decision Based Visual Tracking via Reinforcement Learning 概述 本文2020年发布于NeurIPS(CCF-A)。视觉跟踪通常基于目标检测或者模板区配&#xff0c;但它们都只适用于特定的场景或对象。因为它们遵循不同的跟踪原则&#xff0c;直接将它们融合在一起是不明智的。…

会话技术和JSP技术

会话技术&#xff1a;一次会话中包含多次的请求和响应 一次会话&#xff1a;浏览器第一次给服务器资源发送请求&#xff0c;会话建立&#xff0c;直到有一方断开为止 功能&#xff1a;在一次会话的范围内共享数据 方式&#xff1a; 1、客户端会话技术&#xff1a;Cookie 2、服务…

我司赤城弘一CEO受邀参加东盟与中日韩中小企业人工智能产业论坛并做主旨发言。

我司赤城弘一CEO受邀参加东盟与中日韩中小企业人工智能产业论坛并做主旨发言。 一、活动背景 为推动东盟与中日韩&#xff08;103&#xff09;中小企业服务联盟务实合作&#xff0c;帮助中小企业提高生产力和技术创新能力&#xff0c;进一步提高国际化发展水平&#xff0c;促进…

Web前端期末大作业---新农村建设网页设计

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&#xff01;☀️ &#x1f525;前言 期末来咯&#xff0c…