有没有一种方法可以在运行中添加CKEditor的按钮到链接插件
Is there a way to add button to link plugin of CKEditor on the run?
有一些方法可以在运行时将函数添加到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.
相关文章:
- 向ckeditor中的多个元素添加内联样式
- 在运行时添加更多的ckeditor
- 如何在CKEditor中为图像添加ID
- CKEditor,初始化用insertElement添加的小部件
- 有没有一种方法可以在运行中添加CKEditor的按钮到链接插件
- 如何将 CSS 添加到 CKEDITOR
- 如何将占位符属性添加到 CKEditor 的实例
- 如何在 CKEditor 表的单元格属性中添加新属性
- 如何禁用 CKEditor 表行列添加处理程序
- 将代码片段插件添加到 Rails 应用程序中的 CKEditor
- ckeditor 4 jQuery Adapter, 如何添加自定义按钮.
- 无法从动态添加的 CKEditor 文本区域读取数据
- 如何添加 ckEditor 表插件
- 在rails中为CKEditor添加自定义工具栏
- CKeditor添加图像属性高级选项卡
- CKEDITOR添加插件到源视图
- CKEDITOR添加图像
- 如何使用TypeScript和Angular 2向ng2-ckeditor添加插件
- 阻止CKEditor添加'数据cke已保存'以及转换<
- 停止CkEditor添加样式