有没有一种方法可以在运行中添加CKEditor的按钮到链接插件

Is there a way to add button to link plugin of CKEditor on the run?

本文关键字:CKEditor 添加 按钮 接插件 链接 运行 一种 方法 有没有      更新时间:2023-10-20

有一些方法可以在运行时将函数添加到CKEditor的工具栏中。例如,

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

如何在调用JavaScript函数的工具栏中添加自定义按钮?

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

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

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

有没有一种方法可以在运行时将按钮添加到现有的链接插件中?我有一个按钮要添加到链接插件,这取决于用户数据,因此必须在运行时添加该按钮。

我使用了interpage插件,并更改了源代码以支持动态更改出现的链接列表。在上面链接的代码中,你可以看到他们定义了一个设置函数,每次打开对话框并显示选择时都会调用该函数:

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

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

  • this.clear()-删除select中的所有项
  • this.remove(index)-删除select中的项目
  • this.add(text,url)-在select中添加一个项目
  • this.getElement()-获取实际的select元素

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

以下是一个工作演示:https://jsfiddle.net/ud4csxyc/

按下红色按钮几次,您将看到项目列表发生了更改。

我希望这是你想要的。

我需要它来根据上下文定制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.