flask添加ckeditor实现粘贴图片

最新推荐文章于 2025-03-02 18:08:55 发布
原创 最新推荐文章于 2025-03-02 18:08:55 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flask #python #ckeditor

最近公司在使用flask框架开发一个后台管理系统，使用了flask框架。

但是有个需求摆在我面前“截图工具截图之后，直接粘贴进富文本框”。

下边我简述一下我的操作过程，顺带介绍一下自己踩过的坑。

一、下载ckeditor

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

https://ckeditor.com/ckeditor-4/download/

因为担心ckeditor5支持文档会不完善，所以使用了ckeditor4。

我选择了标准版，当然你也可以自定义插件，减小插件包的大小。下载之后解压到自己的项目中，如下图。

二、使用ckeditor

在需要渲染的页面

最低0.47元/天 解锁文章
tinker_li
关注
ckeditor富文本使用与配置修改
向宇
03-11 1244
下载地址 http://ckeditor.com/download 使用 在页面中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 在使用编辑器的地方插入HTML控件 <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
flask-ckeditor:Flask的CKEditor集成，包括图像上传，代码语法突出显示等
05-13
Flask-CKEditor Flask的CKEditor集成，包括图像上传，代码语法突出显示等。 链接 执照 该项目已获得MIT许可证的许可（有关详细信息，请参阅LICENSE文件）。
html编辑器 flask,Flask项目集成富文本编辑器CKeditor
weixin_39721953的博客
06-18 205
本文介绍如何在Flask项目中集成富文本编辑器CKeditor，并实现图片上传、文件上传、视频上传等功能。CKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了CKeditor。下载CKeditor访问CKeditor官方...
使用 CKEditor 上传图片， 粘贴屏幕截图
weixin_30433075的博客
05-23 214
2017.08.16更新：园友没有找到相关插件，先将整个CKEditor的包上传至百度云， 链接: https://pan.baidu.com/s/1bpaqwIr 密码: tibx 之前写过wangEditor,那真是好用，文档也清晰，半天就搞定了，无奈没有对应license，只好选择别的。 外语一般，阅读理解都靠蒙。CKEditor官方文档看的我云里雾里，国内...
Flask学习10：Flask项目集成富文本编辑器CKEditor 上传图片
喜欢海
01-03 3402
CKEditor下载地址：https://ckeditor.com/ckeditor-4/download/ 访问CKeditor官方网站，进入下载页面，选择Standard Package（一般情况下功能足够用了），如果你想尝试更多的功能，可以选择下载Full Package。 下载好CKeditor之后，解压到Flask项目static/ckeditor目录即可。在Flask项目中集成CKE
Flask:ckeditor4.13上传图片功能
Liubingzhe
02-21 947
def gen_rnd_filename(): filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S') return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000))) @main.route('/ckupload/', metho...
CKEditor网页编辑器集成ASP实现图片与FLASH上传
本资源标题为“ckeditor网页编辑器+asp上传图片,FLASH”，表明该版本是针对使用 ASP（Active Server Pages）技术的服务器端环境所适配的 CKEditor 集成方案，重点实现了图片与 FLASH 文件的上传功能，并保留了其核心...
ckeditor拖拽添加html,CKEditor&CKFinder结合实现在线HTML编辑器
weixin_28223453的博客
06-16 467
最近在做一个项目时需要用到在线HTML编辑器，之前做的是用的FreeTextBox，但总感觉不太完善。于是想起了FCKeditor，知道它很强大，但还没用过，于是准备使用FCKeditor。FCKeditor目前已经改名为了CKEditor和CKFinder，CKEditor不包含上传文件功能，该功能被分割在了CKFinder中，因此需要同时使用这两个文件才能实现文件上传，同时因为我是基于ASP....
JavaWeb(CKeditor&SmartUpload)
qq_64001795的博客
04-10 1118
目录 一、富文本编辑器 1、概念： 2、常用的富文本编辑器 3、CKeditor介绍 4、CKeditor的使用步骤 5、CKEDITOR.replace()配置 6、config.js文件配置 二、SmartUpload 1、文件上传 1.1 步骤： 1.2 上传文件的方法： 1.3 表单必须用enctype属性进行封装： 案例：文件上传 2、下载文件的方法： 3、关于在servlet中写smartupload的问题： 4、注意事项： 一、富文本编辑器 1、概...
帝国CMS前端如何复制粘贴Word图片至网页编辑器？
最新发布
2501_90694782的博客
03-02 603
要求：开源，免费，技术支持CMS：帝国CMS（EmpireCMS）版本：EmpireCMS_7.5_SC_UTF8编辑器：UEditor1.4x需求：复制粘贴word内容图片，word图片转存交互,导入pdf,导入PowerPoint(PPT),截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化系统。
ckEditor5:ckEditor5+node+vue实现粘贴图片上传
04-30
下载项目,分别进行npm install安装依赖。 对client vue项目的访问ip地址进行修改。 对node服务的ip地址进行修改。
ckeditor 粘贴图片并上传
02-09
拷到plugins目录下 配置config.js config.extraPlugins = 'uploadimage'; config.imageUploadUrl= '上传路径'; 详细请看：http://blog.youkuaiyun.com/weixin_30512027/article/details/79295921
Python的Flask框架中集成CKeditor富文本编辑器的教程
12-25
CKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了CKeditor。 下载CKeditor 访问CKeditor官方网站，进入下载页面，选择Standard Package（一般情况下功能足够用了），然后点击Download CKEditor按钮下载ZIP格式的安装文件。如果你想尝试更多的功能，可以选择下载Full Package。 下载好CKeditor之后，解压到Flask项目static/ckeditor目录
Ckeditor 中粘贴图片
weixin_30438813的博客
04-08 316
我们在ckeditor 中有上传图片，但是实际使用中这种手动上传图片方式并不是很方便，而是复制或者截图粘贴图片。这里我们实现主要是获取对应的粘贴事件。 CKEDITOR.instances["editor1"].on('instanceReady', function(e) { this.document.on("paste", function(e) { var it...
使用Flask-CKEditor在Flask项目中集成富文本编辑器
weixin_33859504的博客
06-29 1125
富文本编辑器即WYSIWYG（What You See Is What You Get）编辑器（所见即所得编辑器）。在Web程序中可用的开源富文本编辑器中，CKEditor是一个流行的选择。扩展Flask-CKEditor简化了将CKEditor集成到Flask项目中的过程，可以让你方便的在Flask项目中添加富文本编辑器。它包含下面这些特性：提供WTForms/Flask-WTF集成支持支持图片...
Flask CKEditor 5 富文本编辑器
FaceSeace的博客
05-30 3015
1. CKEditor5 基本使用 官方有三种下载方式Command line，Zip package，CDN 我直接下的是Zip 编辑器支持多种语言 需要用到的是ckeditor.js，translations/zh-cn.js，sample/css/sample.css sample.css是官方提供的，可以自己设置 创建一个flask项目 ckeditor5.html是编辑器页面，效果是...
ckeditor 图片上传_在 Flask-Admin 中集成富文本编辑器 CKEditor
weixin_39958112的博客
11-22 206
Flask-Admin 是一个后台管理扩展，使用它可以快速构建后台管理系统（如果你不需要大量自定义修改的话）。比如你编写了一个博客，为程序创建了存储博客文章、标签、分类的数据库模型类，经过一些简单的设置，Flask-Admin 就可以自动为你生成一个管理后台，可以删除、创建和编辑文章、标签、分类记录，示例如下：你可以阅读 Flask-Admin 文档来学习它的基本用法。在 Flask-Admin ...
flask使用富文本编辑器ckeditor
菲宇运维
03-18 3287
安装 首先使用pip或Pipenv等工具安装或更新： $ pip install -U flask-ckeditor 初始化扩展 一般情况下，你只需要导入并实例化CKEditor类，并传入程序实例即可： from flask_ckeditor import CKEditor app = Flask(__name__) ckeditor = CKEditor(app) 如果你使用了...
在flask实现CKEditor和在网页上显示图片
天行健
08-31 3219
在自己制作的网页上想实现富文本功能，于是上网搜了一下看到了CKEditor，实现比较简单，可以参照CKEditor ，具体实现的话可以参考David-Guo。     实现完后，进行上传图片，然后post，可是在页面中没有显示图片。这可就纳闷了。接着我查看了一下数据库发现在body_html这一栏只有，为了保护网站，在models处设置了检测用户输入，如果有html标签者只保留我设置好的标签，所
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值