如何在 jQuery 中动态添加的文本区域上初始化编辑器？

Question

我有一个表单，当我单击按钮时，我可以根据需要添加许多文本区域。每个文本区域必须是一个ckeditor。

我设法初始化现有的文本区域，但我不知道如何动态添加，因为初始化是在一个文件中完成的，而添加是在另一个文件中完成的，并且我的 init 方法在我的中无法识别第二个文件.

表单视图：

// HTML content [...]

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.1/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.1/"
        }
    }
</script>
    
<script type="module" src="init-ckeditor.js"></script>
<script src="product.js"></script>

初始化完成是在

init-ckeditor.js

中完成的。该文件必须是 

type="module"

 才能允许插件导入。

import {
    ClassicEditor,
    Alignment,AutoLink,BalloonToolbar,Bold,Essentials,FindAndReplace,
    FontColor,FontSize,Heading,Indent,IndentBlock,
    Italic,Link,List,Paragraph,PasteFromOffice,RemoveFormat,
    SelectAll,SourceEditing,SpecialCharacters,SpecialCharactersEssentials,
    SpecialCharactersLatin,SpecialCharactersText,Superscript,Table,TableCaption,
    TableCellProperties,TableColumnResize,TableProperties,
    TableToolbar,TextTransformation,Underline,Undo
} from 'ckeditor5';

const getEditorConfig = (configName) => {
    // define different config templates
    // [...]

    return config;
}

// Init the editor on the field
const initEditor = (field, config) => {
    let editorConfig = getEditorConfig(config);

    ClassicEditor.create(field, editorConfig)
        .then( editor => {
            // Disable browser native spellchecker
            editor.editing.view.change( writer => {
                writer.setAttribute('spellcheck', 'false', editor.editing.view.document.getRoot());
            });
        })
        .catch( error => {
            console.log( error );
        })
    ;
}

// Init existing textareas
$(function() {
  $('textarea.ckeditor-basic').each(function (i, field) {
    initEditor(field, 'basic');
  });

  $('textarea.ckeditor-full').each(function (i, field) {
    initEditor(field, 'full');
  });
});

下面是

product.js

，我有添加新文本区域的方法：

const addNewField = () => {
    // create the textarea [...]
    
    // init ckeditor --> error: initEditor is not defined
    initEditor(myNewField, 'basic');

    // display field
    $('#mydiv').append(myNewField);
});

$(function() {
    $('#add-button').click(function (e) { 
        addNewField();
    });
});

问题：当我点击按钮时，出现错误initEditor is not defined

。
不过，

init-ckeditor.js

 很好地添加在 

product.js

 之前。

我注意到，如果我删除

type="module"

 标签中的 

<script>

，该方法会被识别，但我在插件导入时遇到错误 

SyntaxError: Cannot use import statement outside a module

。

有 2 个独立的文件非常重要，因为我想重用其他页面的所有 ckeditor 启动。我不是 JS 专家，所以我不知道该怎么办...

Answer 1

问题

找到了解决方案：为了在JS模块之外调用initEditor()方法，我需要导出该方法，然后将其导入到

product.js

将使用的对象中

表单视图：

// HTML content [...]

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.1/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.1/"
        }
    }
</script>

<script src="product.js"></script>    

<script type="module">
    import { initEditor } from "init-ckeditor.js";
    ckmodule.initEditor = initEditor;
</script>

在 

init-ckeditor.js

中替换： const initEditor = (field, config) => {

就这样

export function initEditor(field, config) {

product.js：

const ckmodule = {};

const addNewField = () => {
    // create the textarea [...]
    
    // init ckeditor
    ckmodule.initEditor(myNewField, 'basic');

    // display field
    $('#mydiv').append(myNewField);
});

$(function() {
    $('#add-button').click(function (e) { 
        addNewField();
    });
});