有一些方法可以在运行时将函数添加到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.