点击添加按钮时如何制作多个ckeditor5？

问题描述

我想为官方后者构建一个应用程序。我将ckeditor5用于文档（DecoupledDocumentEditor）。后者的官方页面很多，因此我必须输入多个ckeditor5进行输入。该计划是：

单击“添加页面”按钮以添加 ckeditor5和textarea。这是此步骤的代码：

 function add_field(){
 var x = document.getElementById("new_page");

        var new_field = document.createElement("textarea");

        new_field.setAttribute("name","konten[]");
        new_field.setAttribute("id","konten[]");

        var pos = x.childElementCount;

        x.insertBefore(new_field,x.childNodes[pos]);


            var y = document.getElementById("new_page_ckeditor");

            var new_field = document.createElement("div");

            new_field.setAttribute("class","editor");
            new_field.setAttribute("id","editor_template[]");

            var pos = y.childElementCount;

            // insert element
            y.insertBefore(new_field,y.childNodes[pos]);
        }

<div id="new_page"></div>
<div class="row-editor">
<div id="new_page_ckeditor">
</div>
</div>

<input onclick="add_field()" type="button" name="prevIoUs" class="action-button-prevIoUs btn btn-primary" value="Halaman Baru" />

我已经从我阅读的页面（github）中搜索了多个ckeditor5，我必须多次使用ClassicEditor.create（），因此，我在下面的代码循环如下：

var allEditors = document.querySelectorAll('.editor');

for (var i = 0; i < allEditors.length; ++i) {

DecoupledDocumentEditor
        .create( allEditors[i],{
            mention: {
                Feeds: [
                    {
                        marker: '{',Feed: <?PHP echo $variable;?>,minimumCharacters: 1
                    }
                ]
            },toolbar: {
                items: [
                    '','heading','|','fontSize','fontFamily','bold','italic','underline','strikethrough','fontColor','removeFormat','highlight','alignment','pageBreak','horizontalLine','numberedList','bulletedList','indent','outdent','todoList','link','blockQuote',// 'imageUpload','imageInsert','insertTable','mediaEmbed','undo','redo','MathType','ChemType','specialCharacters'
                ]
            },language: 'en',image: {
                toolbar: [
                    'imageTextAlternative','imageStyle:full','imageStyle:side','imageStyle:alignLeft',]
            },table: {
                contentToolbar: [
                    'tableColumn','tableRow','mergeTableCells','tableCellProperties','tableProperties'
                ]
            },licenseKey: '',} )
        .then( editor => {
            window.editor = editor;
            // Set a custom container for the toolbar.
            document.querySelector( '.document-editor__toolbar' ).appendChild( editor.ui.view.toolbar.element );
            document.querySelector( '.ck-toolbar' ).classList.add( 'ck-reset_all' );
        } )
        .catch( error => {
            console.error( 'Oops,something went wrong!' );
            console.error( 'Please,report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
            console.warn( 'Build id: kpxtlv38t5y6-p47g3yipn1rp' );
            console.error( error );
        } );
    }

但是问题是此循环将计算第一个加载页面中有多少个类编辑器，这意味着我通过单击“添加页面”按钮创建的新页面将不计算在内。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ckeditor ckeditor ckeditor ckeditor5 javascript