Question

我有一个带有内联CKEditors的网站，我在其上使用javascript修改HTML DOM，然后尝试触发saveSnapshot事件以将修改保存到服务器。这是棘手的部分;如果我只做一个DOM更改（删除一个元素）并调用editor.fire("saveSnapshot");它似乎工作正常，但如果我从DOM中删除多个元素我经常得到下面的错误。

我已经尝试了许多不同的变体来做我需要做但没有成功，除了激活事件editor.fire("change")（这似乎不是由于CK的某些原因推荐）。如果使用锁定/解锁快照事件等的不同组合，CK的速度很快就会发生，我试图延迟超时。

所以，我的问题是：

1）不推荐使用fire("change)的原因是什么？

2）为什么这种行为导致CK错误？

非常感谢能够带我解决这个问题的任何线索。

来自CK的错误消息：

ckeditor.js:149 Uncaught TypeError: Cannot read property 'type' of null
at a (ckeditor.js:149)
at CKEDITOR.dom.range.createBookmark2 (ckeditor.js:151)
at Array.createBookmarks2 (ckeditor.js:510)
at CKEDITOR.dom.selection.createBookmarks2 (ckeditor.js:463)
at CKEDITOR.plugins.undo.Image (ckeditor.js:1072)
at CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js:1067)
at a.<anonymous> (ckeditor.js:1063)
at a.n (ckeditor.js:10)
at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)

这是我修改DOM（删除一个或多个元素）的代码，并为每个受影响的编辑器实例触发saveSnapshot事件：

    var sectionIds = [];

    if (textMarkers instanceof Array) {
        for (var i = 0; i < textMarkers.length; i++) {
            var textMarker = textMarkers[i];
            $("#sectionText-" + textMarker.sectionId).find("span.hypo-marker[data-marker-id='" + textMarker.id + "']").remove();
            if (sectionIds.indexOf(textMarker.sectionId) === -1) {
                sectionIds.push(textMarker.sectionId);
            }
        }
    } else {
        $("#sectionText-" + textMarkers.sectionId).find("span.hypo-marker[data-marker-id='" + textMarkers.id + "']").remove();
        sectionIds.push(textMarkers.sectionId);
    }

    // Trigger save event on editor for each section that's been updated
    for (var c = 0; c < sectionIds.length; c++) {
        var editor = CKEDITOR.instances["sectionText-" + sectionIds[c]];
        // editor.fire("saveSnapshot");
        editor.fire("change");
    }

我使用CKEditor标准4.7和Chrome版本60.0.3112.113（官方构建）（64位）以及以下CKEditor配置：

var options = {
    removePlugins: 'magicline,horizontalrule',
    skin: 'office2013',
    extraPlugins: 'colorbutton,panelbutton,panel,floatpanel,button,scayt,html5audio,uploadwidget,youtube,image2,uploadimage,keystrokes,notification,notificationaggregator,magicline2,undo',
    language: 'sv',
    title: false,
    entities: false,
    basicEntities: false,
    extraAllowedContent: 'span(*)[*]; img(*)[!src,*]; div(*)[*]; a(*)[*]; p(*)[*]; i(*); table(*)[*]; thead(*)[*]; tbody(*)[*]; tr(*)[*]; td(*)[*];',
    // disallowedContent: 'span(rangySelectionBoundary)[id];',
    imageUploadUrl: '/api/v2/editor/images',
    //filebrowserUploadUrl: '/api/v2/editor/images',
    toolbarGroups: [
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' }
    ],
    removeButtons: "Anchor",
    magicline_color: "#00a651",
    coreStyles_italic: { element: 'i', overrides: 'em' }
};

Answer 1

我可以回答你的第一个问题：

不建议捕获每个change事件，因为它经常被触发并且可能证明非常重，但是触发应该不是问题。

如果你打算抓住它，也许你可以根据你可以识别你的事件添加额外的数据 - https://docs.ckeditor.com/#!/api/CKEDITOR.event-method-fire。

更改事件也不会在源模式下被触发，因此如果您使用该模式，则需要找到一些其他方法来检查代码更改（可能会定期比较上一个和当前textarea值）。

修改DOM后saveSnapshot不起作用

1 个答案: