javascript - CKEditor 覆盖通知 DOM

Question

我正在尝试更改通知的 DOM，CKEditor 4。

我有这个简单的 JS 代码:

$(document).ready(function() {
    $('.content').each(function() {
        var editor = CKEDITOR.replace(this.name, {
            'language': locale,
            extraPlugins: 'notification'
        });
        setTimeout(function() {
            editor.showNotification( 'Task started!', 'warning');
        }, 3000);
    });
});

3 秒后我想显示警告类型通知。我打开了plugins/notification/plugin.js 文件并进行了如下编辑:(我无法发布整个文件内容，因为它告诉我它超出了正文字符限制)

_createElement: function() {
    var notification = this,
        notificationElement, notificationSvgElement, notificationSpanElement, notificationCloseElement
        close = this.editor.lang.common.close;

    notificationElement = new CKEDITOR.dom.element( 'div' );

    notificationElement.addClass( 'vertically-centered-container' );

    if(this.type == 'warning') {
        notificationElement.addClass( 'error' );
        notificationElement.append('<span class="error__text">'+this.message+'</span><button class="button error__close-button" type="button"><svg class="image basic-icon" width="12.5px" height="12.5px" viewBox="0 0 10 10"><path d="M9.8,7.5C9.9,7.6,10,7.8,10,8c0,0.2-0.1,0.4-0.2,0.6L8.6,9.8C8.5,9.9,8.3,10,8,10c-0.2,0-0.4-0.1-0.6-0.2 L5,7.3L2.5,9.8C2.4,9.9,2.2,10,2,10c-0.2,0-0.4-0.1-0.6-0.2L0.2,8.6C0.1,8.5,0,8.3,0,8c0-0.2,0.1-0.4,0.2-0.6L2.7,5L0.2,2.5 C0.1,2.4,0,2.2,0,2c0-0.2,0.1-0.4,0.2-0.6l1.1-1.1C1.5,0.1,1.7,0,2,0c0.2,0,0.4,0.1,0.6,0.2L5,2.7l2.5-2.5C7.6,0.1,7.8,0,8,0 c0.2,0,0.4,0.1,0.6,0.2l1.1,1.1C9.9,1.5,10,1.7,10,2c0,0.2-0.1,0.4-0.2,0.6L7.3,5L9.8,7.5z"/></svg></button>');
    }else{
        notificationElement.addClass( 'success' );
        notificationElement.append('<svg class="image basic-icon success__icon" x="0px" y="0px" width="12.5px" height="12.5px" viewBox="0 0 27.4 27.4" enable-background="new 0 0 27.4 27.4"><path d="M22.9,10.8c0-0.3-0.1-0.6-0.3-0.8L21,8.4c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3l-7.3,7.3l-4-4 c-0.2-0.2-0.5-0.3-0.8-0.3c-0.3,0-0.6,0.1-0.8,0.3l-1.6,1.6c-0.2,0.2-0.3,0.5-0.3,0.8c0,0.3,0.1,0.6,0.3,0.8l6.5,6.5 c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l9.7-9.7C22.8,11.4,22.9,11.1,22.9,10.8L22.9,10.8z M25.6,6.8 c1.2,2.1,1.8,4.4,1.8,6.9c0,2.5-0.6,4.8-1.8,6.9c-1.2,2.1-2.9,3.8-5,5c-2.1,1.2-4.4,1.8-6.9,1.8c-2.5,0-4.8-0.6-6.9-1.8 c-2.1-1.2-3.8-2.9-5-5C0.6,18.5,0,16.2,0,13.7c0-2.5,0.6-4.8,1.8-6.9c1.2-2.1,2.9-3.8,5-5C8.9,0.6,11.2,0,13.7,0 c2.5,0,4.8,0.6,6.9,1.8C22.7,3.1,24.4,4.7,25.6,6.8z"/></svg><span class="success__text">'+this.message+'</span>');
    }
    notificationElement.setAttributes( {
        id: this.id,
        role: 'alert',
        'aria-label': this.type
    } );                    

    return notificationElement;
},

所以我编辑了通知原型(prototype)内的 _createElement 函数。但当我尝试测试它时，通知仍然与更改之前相同。

我尝试添加 console.log() 并注意到这个插件/通知/插件文件甚至没有被执行。

但是我不知道通知 DOM 是在哪里构建的。我什至下载了整个 ckeditor 文件夹并搜索 showNotification 函数，但没有其他地方声明它。

如何加载并执行plugins/notification/plugin.js？

顺便说一句，这是我的 config.js 文件:

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        { name: 'forms', groups: [ 'forms' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'about', groups: [ 'about' ] }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Superscript,Cut,Scayt,Anchor,Maximize,Source,Subscript,About';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    config.extraPlugins = 'uploadimage,notification,oembed';
    config.uploadUrl = '/content-administrator/files/upload';
    config.embed_provider = '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}' 
};

Answer 1

如果您想修改 native 编辑器通知，您可以:

1. 捕获 notificationShow事件
2. 根据您的需要进行处理
3. 取消原生事件

示例如何执行此操作(按编辑器下方的按钮): https://codepen.io/msamsel/pen/baaRBL

function showNotification() {
  editor.showNotification( 'Hello world!!!');
}

editor.on( 'notificationShow', function( evt ) {
  var el = document.getElementById( 'output' );
  console.log( evt.data.notification.message );
  el.innerText = evt.data.notification.message;
  evt.cancel();
} );