Jquery редактировать содержимое из wysiwyg в элемент iframe

Question

Мне нужно сделать следующее:

1. нажать на элемент <span class="editable">, содержащийся в iframe.
2. появляется всплывающее окно с TinyMCE wysiwyg.содержимое из редактируемого элемента iframe загружается в TinyMCE.Я редактирую содержимое, затем нажимаю кнопку сохранения.
3. Новый отредактированный контент обновляется в iframe.

Пока у меня есть это (что работает)

$(document).ready(function () {

    $("#template").contents().find(".editable").bind("click", function () {
        // get content of clicked item and insert it into wysiwyg
        $('#wysiwyg').html($(this).html());

        // give this element myedit id (this is so that I know which element i'm editing)
        $(this).attr('id', 'myedit');
    });

    // Wysiwyg
    $('#save').click(function () {
        // find element that i'm editing and update it's content with new content from wysiwyg
        $("#template").contents().find("#myedit").html($('#wysiwyg').html());

        // remove editid
        $("#template").contents().find("#myedit").attr('id', '');
        return false;
    });


});

вопрос: Как бы я это сделал, не назначая myedit id туда и обратно?и просто просто использовать $ (this) как-нибудь?так что я бы знал, что по окончании редактирования $ (this) будет обновлено новым содержимым.

спасибо

Answer 1

Что касается проблемы $(this), вы можете выполнить $(this).data('calledFrom',$(this));, а затем сослаться на нее во второй функции .click(): $('#wysiwyg').data('calledFrom').html($('#wysiwyg').html());

Код для варианта 1:

$(document).ready(function () {

  $("#template").contents().find(".editable").bind("click", function (e) {
    e.preventDefault();
    // get content of clicked item and insert it into wysiwyg
    $('#wysiwyg').html($(this).html());

    // give this element myedit id (this is so that I know which element i'm editing)
    $(this).data('calledFrom', $(this));
  });

  // Wysiwyg
  $('#save').click(function (e) {
    // find element that i'm editing and update it's content with new content from wysiwyg
    e.preventDefault();
    $('#wysiwyg').data('calledFrom').html($('#wysiwyg').html());

    return false;
  });

});

Вариант 2 (объединение всего в одну функцию):

$(document).ready(function () {
  $("#template").contents().find(".editable").bind("click", function (e) {
    e.preventDefault();
    $this = $(this);
    // get content of clicked item and insert it into wysiwyg
    $('#wysiwyg').html( $this.html() );
    $('#save').bind('click',function(e) {
      e.preventDefault();
      $(this).unbind('click');
      $this.html($('#wysiwyg').html());
    });
  });
});

Короче, но менее читабельно.

Не уверен, поможет ли это, но я надеюсь, что это будет!

PS всегда используйте e.preventDefault() вместо или также в своих функциях, поскольку это поддерживается новыми, более популярными браузерами