使用 CKeditor 5 在 Flask 博客中上传图片

Question

我在创建基于 Flask 的博客时遇到了以下问题。

首先，我使用的是 CKeditor 4，后来升级到 5 版本。

我现在无法理解如何使用适配器等在服务器端处理图片上传。至于 4 版本，我使用 flask-ckeditor 扩展和 Flask 文档来处理图片上传。

我没有找到此组合的任何示例。我知道我缺乏知识，我正在寻求建议，我可以朝哪个方向前进，我应该知道哪些概念来处理这个主题。

提前致谢。

到目前为止我对此的看法：

根据https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html （关于最简单适配器的官方指南）。 config.simpleUpload.uploadUrl 应该类似于 cke4 中使用的 /upload 路由。 cke5 需要 URL 属性的对象是 cke4 的 upload_successful 由 /upload route.

返回

Answer 1

所以我想通了。

至于 cke 4： /upload 路由通过从 flask-ckeditor 扩展返回 upload_successful() 来处理上传过程。 upload_successful() 本身是一个 jsonify-ing 函数，它反过来修改参数以适应 json 格式。

至于 cke 5：除了上传处理之外还有一些事情导致了问题。

使用的插件："Simple upload adapter"
- 我是从Online-builder下载的，然后自己重新安装重建的，集成了cke5。（为此，我在 Ubuntu 20.04 上通过 sudo apt install 安装了 nodejs 和 npm。）通过从 /static/ckeditor 文件夹执行安装插件：
  
  npm install
  
  npm install --save @ckeditor/ckeditor5-upload
  
  npm run build（这里稍等）
- 不同的适配器可能会发生冲突，不允许编辑器加载，所以我从 src/ckeditor.js 中的 import 和 .builtinPlugins 部分中删除了 CKFinder 适配器，将它们替换为 import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js';和SimpleUploadAdapter对应。

.html，创建CKEditor实例的地方。 body 这里是 flask_wtf 文本字段的名称：

<script>
    ClassicEditor
        .create( document.querySelector( '#body' ), {
            extraPlugins: ['SimpleUploadAdapter'],
            simpleUpload: {
                uploadUrl: '/upload',
            },
            mediaEmbed: {previewsInData: true}
        } )
        .catch( error => {
            console.error( error.stack );
        } );
</script>

注意事项：
- 官方guide插件推荐启用如下：

.create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, Alignment ],

对我来说它不起作用：编辑器不会加载这样的语法。起作用的是这个（来自docs）：

.create( document.querySelector( '#body' ), {
            extraPlugins: ['SimpleUploadAdapter'],

因此，plugins -> extraPlugins 和 PluginName -> 'PluginName'。

/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)

随着我在这个主题上的进步，我将编辑这个答案。

使用 CKeditor 5 在 Flask 博客中上传图片

Image uploading in Flask blog with CKeditor 5

python

flask

ckeditor