如何在原生javascript环境下使用CKEditor5？

问题描述 投票：0回答：1

在我们的项目中，到目前为止我们已经使用了 CKEditor4 - 现在我们想迁移到 CKE5。

在我们的 index.php 文件中，我们包含了文档中描述的要求，如下所示：

index.php：

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.2.0/"
        }
    }
</script>
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css">
<script type="module" src="./main.js"></script>

在提供的代码示例中，他们有一个 main.js 文件，在其中导入所有必需的模块，如下所示： main.js:

import {
ClassicEditor,
AccessibilityHelp,
Autoformat,
AutoImage,
Autosave,
BalloonToolbar,
Base64UploadAdapter,
BlockQuote,
Bold,
CloudServices,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
Highlight,
ImageBlock,
ImageCaption,
ImageInline,
ImageInsert,
ImageInsertViaUrl,
ImageResize,
ImageStyle,
ImageTextAlternative,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
MediaEmbed,
Paragraph,
PasteFromOffice,
RemoveFormat,
SelectAll,
ShowBlocks,
SourceEditing,
SpecialCharacters,
SpecialCharactersArrows,
SpecialCharactersCurrency,
SpecialCharactersEssentials,
SpecialCharactersLatin,
SpecialCharactersMathematical,
SpecialCharactersText,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,

...(and so forth)

在文件的底部，他们用这一行初始化编辑器：

ClassicEditor.create(document.querySelector('#editor'), editorConfig);

但是，这有效：

使用这一行，我们无法像以前那样在 JS 代码的其他函数中初始化编辑器，因为所有模块都没有加载。我们该如何解决这个问题？

我们尝试在函数中加载模块，但无法使用 import。

javascript ckeditor5 ckeditor4.x
1个回答
0
投票

如果我正确理解问题，你想在你的程序中使用 ckeditor5 遗留的非模块 js 脚本。

首先我必须说，推荐的也是唯一好的实践方法是将遗留脚本重构为模块。

如果由于某种原因你不想这样做，有一个丑陋的解决方案 通过全局变量在 

module
脚本和非模块脚本之间共享数据，请参阅 this SO post 在浏览器上下文中执行此操作的最简单方法是通过全局 
window
。

因此，模块脚本 (

main.js
) 可能包含如下内容：

import {
    ClassicEditor,
    Essentials,
    Paragraph,
    Bold,
    Italic,
    Font
} from 'ckeditor5';

window._ckEditor = {
    ClassicEditor,
    Essentials,
    Paragraph,
    Bold,
    Italic,
    Font
};

并且遗留脚本必须从 

window._ckEditor
检索数据，确保 数据检索在模块运行后运行，例如通过设置 
DomContentLoaded
：

// non-module custom code
addEventListener("DOMContentLoaded", () => {
    const {
        ClassicEditor,
        Essentials,
        Paragraph,
        Bold,
        Italic,
        Font
    } = window._ckEditor;
    
    ClassicEditor
        .create(document.querySelector('#editor'), 
        ......

演示片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test CKEditor5</title>
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css">
</head>
<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.2.0/",
            "ClassicEditor": "./main.js"
        }
    }
</script>


<script type="module">
    import {
        ClassicEditor,
        Essentials,
        Paragraph,
        Bold,
        Italic,
        Font
    } from 'ckeditor5';

    window._ckEditor = {
        ClassicEditor,
        Essentials,
        Paragraph,
        Bold,
        Italic,
        Font
    };
</script>

<script>
    // your custom code here
    addEventListener("DOMContentLoaded", () => {
        const {
            ClassicEditor,
            Essentials,
            Paragraph,
            Bold,
            Italic,
            Font
        } = window._ckEditor;

        ClassicEditor
            .create(document.querySelector('#editor'), {
                plugins: [Essentials, Paragraph, Bold, Italic, Font],
                toolbar: [
                    'undo', 'redo', '|', 'bold', 'italic', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                ]
            })
            .then(editor => {
                window.editor = editor;
            })
            .catch(error => {
                console.error(error);
            });
    });
</script>

<body>
<div id="editor"></div>
</body>
</html>

或 带有单独文件的 stackblitz ； 和一个变体 避免重复导入的值，但缺点是 lint 工具可能会抱怨并在 IDE 中提供代码帮助 通常不会识别任何导入的值。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.