Показать кнопку рядом с элементом внутри TinyMCE

Question

Я хочу показать кнопку (например, span.mybutton) рядом с каждым экземпляром указанного элемента (например, таблицы) в TinyMCE, а затем, когда нажимается эта кнопка, получить html этого конкретного элемента, обработайте его и обновите в редакторе.

Я могу справиться с обработкой, но я не могу понять, как отобразить кнопку и передать html конкретного элемента. Например, если я сделаю это, он добавит HTML-файл span.mybutton в TinyMCE, как если бы это был обычный контент, который мне не нужен:

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)

});

Итак, два моих вопроса: Как я могу отобразить кнопку в нужном месте, не затрагивая HTML, который сохраняется в TinyMCE? И когда кнопка нажата, как мне получить / установить только этот элемент из 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]);
});

Дайте мне знать, если это работает для вас или нет.