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) 

}); 

따라서 두 가지 질문은 다음과 같습니다. TinyMCE에 저장된 HTML에 영향을주지 않고 버튼을 올바른 위치에 표시하려면 어떻게해야합니까? 그리고 버튼을 클릭하면 어떻게 TinyMCE에서 그 요소를 가져 오거나 설정할 수 있습니까?

Answer 1

올바르게 이해한다면 모든 테이블 DOM 요소를 잡고 그 옆에 버튼을 배치하여 몇 가지 작업을 수행하고 싶습니다.

다음은 저의 첫 번째 생각입니다. 나는 그것을 쉽게 가정 할 수있는 편리한 가정을 할 것이지만, 어딘가에 잘못된 가정을했는지 알려 주시기 바랍니다. 나는 또한 얼마나 많은 자바 스크립트/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]); 
}); 

이 방법이 유용할지 여부를 알려주세요.