在 TinyMCE 中的元素旁边显示一个按钮

Question

我想在 TinyMCE 中指定元素（例如，表格）的每个实例旁边显示一个按钮（例如，span.mybutton）——然后，当单击该按钮时，抓取该特定元素的 html，处理它，然后在编辑器中更新它。

我可以处理处理，但我不知道如何显示按钮并传入获取特定元素的 html。例如，如果我这样做，它会将 span.mybutton 的 html 添加到 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)

});

所以，我的两个问题是： 如何在不影响保存在 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]);
});

让我知道这是否适合你。