CKEditor:调用没有工具栏按钮的插件函数

CKEditor: call a plugin function without toolbar button

本文关键字：按钮 插件 函数 工具栏 调用 CKEditor      更新时间：2023-09-26

如何在没有工具栏按钮的情况下调用插件函数?

我有一个外部浮动工具栏集成在我的cms。我使用CKEditor的InsertHTML() API插入图像、视频和其他静态代码。

现在我需要从URL也插入视频，有梦幻般的oembed插件。我怎么能在我的cms中使用一个没有工具栏按钮的按钮来触发插件?

我在配置中加载插件，并尝试创建这个函数:

function oembed() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var url = 'http://www.youtube.com/watch?v=AQmbsmT12SE'
var wrapperHtml = jQuery('<div />').append(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
    // Insert HTML code.
    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
    editor.embedCode(url, editor, false, wrapperHtml, 650, 400, false);
}
else
    alert( 'You must be in WYSIWYG mode!' );

}

结果如下:

Uncaught TypeError: Object [Object Object]没有方法'embedCode'

有没有办法创建一个新的API像"InsertHTML"调用插件函数没有工具栏按钮?

编辑

也许我可以使用createFakeElement API

http://docs.ckeditor.com/# !/api/CKEDITOR.editor-method-createFakeElement

我将类fakegallery添加到我的文档中。

我使用了这段代码，但是什么也没发生:

      function Fake()
   {
      var editor = CKEDITOR.instances.editor1;
      var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' );
      alert( element.getOuterHtml() ); 
      editor.createFakeElement( element, 'fakegallery', 'div', false );
   }

我发现这篇文章寻找答案…

查看这里答案中提供的链接[http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire]，向下滚动到execCommand

这对我来说很有效，只需要你知道你的插件的名字，所以它总是有效的。显然，您可能需要将"editable"更改为您的编辑器实例。

CKEDITOR.instances['editable'].execCommand('YOUR_PLUGIN_NAME_HERE');

如果上述失败，HACK:

这将工作(下面的第一行代码)，但需要您查看源代码以找到正确的#。如果你有一个自定义插件，没什么大不了的。但是如果你有一打或更多的插件，像我一样，这很烦人，并且可能随着更多插件的添加而改变。

CKEDITOR.tools.callFunction(145,this);

希望这对你有帮助!

阅读以下内容:http://docs.ckeditor.com/# !/api/CKEDITOR.editor-method-fire 

editor.fire( 'MediaEmbed', data);

我认为这是你的数据需要的结构:

var data = {title : 'Embed Media',
                 minWidth : 550,
                 minHeight : 200,
                 contents :
                       [
                          {
                             id : 'iframe',
                             expand : true,
                             elements :[{
                                id : 'embedArea',
                                type : 'textarea',
                                label : 'Paste Embed Code Here',
                                'autofocus':'autofocus',
                                setup: function(element){
                                },
                                commit: function(element){
                                }
                              }]
                          }
                       ]}

我不安全，但这将在路上帮助你。查看插件的源代码，找到可用的命令。我上面指定的命令名是你的插件中唯一的命令名。

EDIT -手动插入

                var div = editor.document.createElement('div');
                div.setHtml("<embed src=" + url +" width=" + width +" height=" + height + ">");
                editor.insertElement(div);

你可以添加任何你喜欢的属性，Type??也许?自动对焦? ?

相关文章：