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

让我知道这是否适合您。

在TinyMCE内显示元素旁边的按钮

1 个答案: