[英]Image uploading in Flask blog with CKeditor 5
I'm stuck with following problem while creating my Flask based blog.在创建基于 Flask 的博客时,我遇到了以下问题。
Firstly, I used CKeditor 4 but than upgraded to 5 version.首先,我使用 CKeditor 4 但升级到 5 版本。
I can't understand how to handle image upload on server side now, with adapters etc. As for 4 version, I used flask-ckeditor extension and Flask documentation to handle image uploading.我现在无法理解如何使用适配器等在服务器端处理图像上传。至于 4 版本,我使用了 flask-ckeditor 扩展和 Flask 文档来处理图像上传。
I didn't find any examples for this combination.我没有找到这种组合的任何例子。 I understand that I lack knowledge and I'm looking for advice in which direction may I advance and which concepts should I know to approach such subject.我知道我缺乏知识,我正在寻求建议,我可以朝哪个方向前进,以及我应该知道哪些概念来处理这个主题。
Thanks in advance.提前致谢。
My takes on this so far:到目前为止,我对此的看法:
According to https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html (official guide on simplest adapters).根据https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html (最简单适配器的官方指南)。 config.simpleUpload.uploadUrl
should be like /upload
route that was used in cke4. config.simpleUpload.uploadUrl
应该类似于cke4 中使用的/upload
路由。 Object with URL property needed by cke5 is cke4's upload_successful
which was returned by /upload route. cke5需要的Object和URL属性是cke4的upload_successful
,由/upload路由返回。
So I figured it out.所以我想通了。
As for cke 4: /upload
route handled uploading process by returning upload_successful()
from flask-ckeditor extension.至于cke 4: /upload
路由通过从flask-ckeditor 扩展返回upload_successful()
来处理上传过程。 upload_successful()
itself is a jsonify-ing function, which in turn modify arguments to fit json format. upload_successful()
本身是一个 jsonify-ing function,它反过来修改 arguments 以适应 json 格式。
As for cke 5: There were some things aside upload handling, which caused problems.至于cke 5:除了上传处理之外还有一些事情,这导致了问题。
Plugin used: "Simple upload adapter"使用的插件: “简单上传适配器”
I integrated cke5 by downloading from Online-builder and then reinstalling and rebuilding it by myself.我通过从Online-builder下载集成cke5,然后自己重新安装和重建它。 (for this on Ubuntu 20.04 I installed nodejs
and npm
by sudo apt install
.) Plugin is installed by executing from /static/ckeditor
folder: (为此,在 Ubuntu 20.04 上,我通过sudo apt install
安装了nodejs
和npm
。)通过从/static/ckeditor
文件夹执行安装插件:
npm install
npm install --save @ckeditor/ckeditor5-upload
npm run build
(need to wait here for a little) npm run build
(这里需要稍等)
Different adapters may conflict and not allow Editor to load, so I removed CKFinder adapter from src/ckeditor.js
in import
and .builtinPlugins
sections, replacing them by import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js';
不同的适配器可能会发生冲突并且不允许编辑器加载,因此我在import
和.builtinPlugins
部分从src/ckeditor.js
中删除了 CKFinder 适配器,并通过import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js';
替换它们import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js';
and SimpleUploadAdapter
correspondingly.和SimpleUploadAdapter
对应。
.html
, where CKEditor instance is created. .html
,其中 CKEditor 实例被创建。 body
here is name of flask_wtf
text-field:这里的body
是flask_wtf
文本字段的名称:
<script> ClassicEditor.create( document.querySelector( '#body' ), { extraPlugins: ['SimpleUploadAdapter'], simpleUpload: { uploadUrl: '/upload', }, mediaEmbed: {previewsInData: true} } ).catch( error => { console.error( error.stack ); } ); </script>
Things to notice:注意事项:
.create( document.querySelector( '#editor' ), { plugins: [ Essentials, Paragraph, Bold, Italic, Alignment ],
.create( document.querySelector( '#body' ), { extraPlugins: ['SimpleUploadAdapter'],
So, plugins
-> extraPlugins
and PluginName
-> 'PluginName'
.所以, plugins
-> extraPlugins
和PluginName
-> 'PluginName'
。
/upload
route itself: /upload
路线本身: @main.route('/files/<path:filename>') def uploaded_files(filename): app = current_app._get_current_object() path = app.config['UPLOADED_PATH'] return send_from_directory(path, filename) @main.route('/upload', methods=['POST']) def upload(): app = current_app._get_current_object() f = request.files.get('upload') # Add more validations here extension = f.filename.split('.')[-1].lower() if extension not in ['jpg', 'gif', 'png', 'jpeg']: return upload_fail(message='Image only.') f.save(os.path.join(app,config['UPLOADED_PATH']. f.filename)) url = url_for('main,uploaded_files'. filename=f.filename) return jsonify(url=url)
I will edit this answer as I advance in this subject.随着我在这个主题上的推进,我将编辑这个答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.