更改 CKEditor 版本 4 以包含上传图像

Question

flask 中的 CKEDITOR 库仅更新到版本 4。我相信这适合我的目的。

期望的结果是将

image2

选项添加到 CKEDITOR。下面是我当前的 Javascript，但我没有看到所需的结果。

<div class="mb-3">
<label for="content" class="form-label">Content</label>
{{ form.content(class="form-control", id="content") }}
</div>

<script>
CKEDITOR.replace('editor', {
    filebrowserImageUploadUrl: '/upload',
    extraPlugins: 'uploadimage,image2',
    removeDialogTabs: 'image:advanced;link:advanced',
    height: 300,  // Adjust the height of the editor
    toolbar: [
        { name: 'document', items: ['Source'] },  // Add source editing
        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
        { name: 'styles', items: ['Format'] },
        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
    ]
});


// Sync CKEditor content with the hidden textarea before form submission
const form = document.querySelector('form');
form.addEventListener('submit', function () {
    for (const instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
});

预期评论：

1. 标签 = 内容，但替换 = 编辑器。

   a.不知道为什么，但是当更改替换=内容时，我根本看不到输入框。

Answer 1

好吧，真正的问题在于 RTDM，文档说它们是 3 个不同版本的 CKEditor，而我使用了错误的版本。另外，我下载了 CKEditor 并将其放在根文件夹中，因为该编辑器现已停产，并且新版本只需付费。

如果您最终执行了相同的操作，则此语法是正确的版本：

<script>
CKEDITOR.replace('content', {
    filebrowserImageUploadUrl: '/upload', // Flask route for image uploads
    filebrowserUploadMethod: 'form',
    removeDialogTabs: 'image:advanced;link:advanced', // Simplify dialog
});

// Ensure CKEditor content is submitted with the form
document.querySelector('form').addEventListener('submit', function () {
    for (const instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
});
</script>