1

ツールバー ボタンなしでプラグイン関数を呼び出すにはどうすればよいですか?

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!' );

}

結果は次のとおりです。

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にメソッド 'embedCode' がありません

「InsertHTML」のような新しい API を作成して、ツールバー ボタンなしでプラグイン関数を呼び出す方法はありますか?

編集

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 );

   }
4

2 に答える 2

5

答えを探してこの投稿を見つけました...

ここの回答で提供されているリンクをチェックアウト [ http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire ]、下にスクロールして execCommand

これは私にとってはうまくいき、プラグインの名前を知っているだけでよいので、常に機能します。明らかに、「編集可能」をエディター インスタンスに変更する必要がある場合があります。

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

上記が失敗した場合、HACK :

これは機能しますが (以下のコードの最初の行)、ソースを調べて正しい # を見つける必要があります。カスタムプラグインが 1 つあれば、大したことはありません。しかし、私のように 12 個以上ある場合、これは煩わしく、プラグインが追加されると変化する可能性があります。

CKEDITOR.tools.callFunction(145,this);

お役に立てれば！

于 2014-05-30T08:26:24.087 に答える
0

これを読んでください： 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){
                                }
                              }]
                          }
                       ]}

私は安全ではありませんが、これは途中で役立ちます。プラグインのソース コードを見て、使用可能なコマンドを見つけます。上記で指定したコマンド名は、プラグインが持っている唯一のものです。

編集 - 手動挿入

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

好きな属性をすべて追加できます、Type?? もしかして？オートフォーカス??

于 2013-05-16T17:53:51.630 に答える