Question

有很多方法可以在运行时为CKEditor的工具栏添加功能。例如，

https://stackoverflow.com/a/25443349/1273587

How to add a custom button to the toolbar that calls a JavaScript function?

还有一些方法可以为CKEditor的现有链接插件添加新选项

https://ssdtutorials.com/courses/ckeditor-internal-page-link

http://blog.xoundboy.com/?p=393

有没有办法在运行时向现有链接插件添加按钮？我有一个按钮添加到链接插件，该插件取决于用户数据，因此必须在运行时添加该按钮。

Answer 1

我使用了internpage plugin并更改了源代码以支持动态更改显示的链接列表。在上面链接的代码中，您会看到它们定义了一个设置功能，每次打开对话框并显示选择时都会调用该功能：

setup : function (f) {
    this.allowOnChange = false;
    this.setValue(f.url ? f.url.url : '');
    this.allowOnChange = true;
}

您需要做的就是使用可用的方法更改或刷新选择中的项目列表：

this.clear（） - 删除选择
this.remove（index） - 删除选择
this.add（text，url） - 在选择
this.getElement（） - 获取实际的选择元素

请注意，使用这些方法时this.items保持不变，因此您可以使用该属性自动刷新选择。

这是一个有效的演示：https://jsfiddle.net/ud4csxyc/

按几次红色按钮，您将看到项目列表已更改。

我希望这就是你想要的。

Answer 2

我需要它根据上下文自定义CKE。在绘制CDN版本时也很有用。这是一个例子：

// Must be called before first editor instance creation (i.e. CKEDITOR.replace() action).
function registerPlugin()
{
    // Exit if CKEDITOR not present
    if (typeof CKEDITOR == undefined) return;

    var pluginName = 'filegator'

    // Exit if plugin already registered
    if(CKEDITOR.config.extraPlugins.search(pluginName) >= 0) return;

    // (1) Append plugin in config
    CKEDITOR.config.extraPlugins += ',' + pluginName;
    // FYI: To change entire CKE default config use:
    // CKEDITOR.config = {your config here, like this found in config.js};

    // (2) Register the plugin within the editor.

    // (2a) File version
    //CKEDITOR.plugins.addExternal( 'filegator', 'ckeditor/plugins/filegator/', 'plugin.js' );

    // (2b) Inline version
    CKEDITOR.plugins.add(pluginName, {

        // Register the icons. They must match command names.
        //icons: 'openFilegator',

        // The plugin initialization logic goes inside this method.
        init: function( editor ) {

            // Define the editor command that inserts a timestamp.
            editor.addCommand( 'openFilegator', {

                // Define the function that will be fired when the command is executed.
                exec: function( editor ) {
                    var now = new Date();
                    // Insert the timestamp into the document.
                    editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
                }
            });

            // Create the toolbar button that executes the above command.
            editor.ui.addButton( 'Filegator', {
                label: 'Open Filegator',
                command: 'openFilegator',
                toolbar: 'links',
                className: 'cke-openFilegator',
                icon: '/iframes/openFilegator.png',
            });
        }
    });
}

然后在<script src="//cdn.ckeditor.com/4.9.0/standard/ckeditor.js"></script>之后的某处：

registerPlugin();
// Replace the <textarea id="editor1"> with a CKEditor instance.
CKEDITOR.replace( 'editor1' );        
CKEDITOR.replace( 'editor2' );
CKEDITOR.replace( 'editor3' );
// etc.

有没有办法在运行时添加按钮来链接CKEditor的插件？

2 个答案: