TinyMCE内の要素の隣にボタンを表示

Question

TinyMCEで指定された要素（テーブルなど）のすべてのインスタンスの横にボタン（たとえばspan.mybutton）を表示したい場合は、そのボタン特定の要素のHTMLを取得して処理し、エディタで更新します。

私は処理することができますが、ボタンを表示して特定の要素のHTMLを取得する方法を理解できません。私はこれを行う場合、それは私が望んでいない通常のコンテンツであったかのように、例えば、それはTinyMCEのにspan.mybuttonのHTMLを追加します。

jQuery('iframe#content').contents().find('table').append('<span class="mybutton">My button</span>'); 

は、ここで私がやろうとしているものです。

function processElement(element, values) { 
     // do stuff to the table html (I don't need help with this part) 
     return element; 
} 


function appendButtonToTinyMCEElement (button, element) { 

    // put button next to all instances of the specified element in TinyMCE 
    // (in this case, put span.mybutton at the corner of all tables) 

} 


$('.myhelperbutton').click(function(){ 

     var element = ??? // get content of the element whose button was clicked 
     var element = processElement(element); 
     // send element back to TinyMCE (not sure how) 

}); 

私の2つの質問は以下の通りです： TinyMCEに保存されたHTMLに影響を与えずにボタンを正しい場所に表示するにはどうすればよいですか？ボタンをクリックすると、その要素をTinyMCEからどのように取得/設定できますか？

Answer 1

私が正しく理解していれば、テーブルのDOM要素をすべて取得し、その横にボタンを配置していくつかのことをしたいと考えています。

以下は私の最初の考えです。私はそれをより簡単にするための便利な前提を作るつもりですが、間違った前提をどこかにしたかどうかを教えてください。私はまた、あなたがすでに知っているjavascript/jqueryの量を知らないので、私が何かを明確に説明していないかどうか知らせてください。

jQuery('iframe#content').contents().find('table').each(function(index, element) { 
    // create a new button. 
    var $btn = $('<input type="button" class="mybutton"></input>'); 

    function action() { 
     // This is using the `processElement` function you defined in your question, 
     // I am applying it to the specific table just grabbed. 
     processElement(element); 
    } 
    $btn.click(action); 

    // This should append the button. See http://api.jquery.com/after/ 
    $(element).after($btn[0]); 
}); 

これがあなたに役立つかどうかを教えてください。