CKEDITOR實時編輯iframe - jquery

Question

它有點長，但它有圖片！ ：d

而其中，我的工作是某種真正的實時編輯的選自預覽和編輯

它是如何工作

當我點擊的一個塊可以高亮，塊的值將被轉移到ckeditor。

這是我正在處理的代碼。

我有這external.php這將是iframe的內容。因爲這些元素都是多餘的，所以我只是剔除了代碼。

<div class="container"> 

    <div id="block-1" class="row click">First Row</div> 

    <div id="block-2" class="row click">Second Row</div> 

    <div class="row"> 

     <div id="block-3" class="column click"> 
      First Column 
     </div> 

     <div id="block-4" class="column click"> 
      Second Column 
     </div> 
    </div> 
</div> 

然後我有這index.php其中包含iframe和ckeditor。

<div id="main"> 

    <div id="left-col" class="col"> 
     <iframe src="external.php" width="500" height="600"></iframe> 
    </div> 

    <div id="right-col" class="col"> 
     <textarea name="editor" id="editor" rows="10" cols="80"></textarea> 
    </div> 
</div> 

而且最有趣的部分，這裏坐落在這一切發生

$(document).ready(function() { 

    CKEDITOR.replace('editor'); 
    var editor = CKEDITOR.instances.editor; 

    $('iframe').load(function() { 

     var iframe = $('iframe').contents(); 

     iframe.find(".click").on("click", function(){ 

      var id = $(this).attr("id"); 
      var box_value = $(this).html(); 

      CKEDITOR.instances.editor.setData(box_value); 

      editor.on('change', function() { 
       var value = CKEDITOR.instances.editor.getData() 
       iframe.find("#" + id).html(value); 
      }); 
     }); 
    }); 
}); 

這裏是什麼樣子

所以，當我點擊第一行代碼該價值將被轉移到ckeditor。

正如我打字時，值被自動地被轉移。

當我點擊其他塊，並嘗試做一些實時編輯，近期塊，我還編上覆蓋我做的最新的塊什麼。

，直到它被全部覆蓋拿去！-es。

你不要擔心！我有領先！

看來，當我在ckeditor onchange事件下面發出警報時，我點擊其中一個塊。

它告誡對我點擊了塊相應的ID。

然而，如果我把警報的CKEditor的onchange事件裏面，點擊一些塊，並嘗試對其進行編輯。它使我注意到我點擊的所有區塊（按順序）。

含義，ID在一定程度上被存儲在CKEditor的onchange事件，我甚至不知道爲什麼。

顯然，問題是，當我點擊塊並試圖編輯它時，我點擊不同的塊並對其進行編輯，兩個塊都被更新。

任何幫助，將不勝感激。

Answer 1

感謝爲此處回答的人。

我完全忘了這個，上週我已經完成了。

這是我想出來的。

注意：這不是我的所有代碼，我只是砍了，包括在這個問題上。

我爲它創建了一個計數器。

var ctr = 0; 
//Editor Name counter 
var editor = "e_" + ctr; 

// Do create text editor 
$("#editor-container").prepend("<textarea id='"+ editor +"' name='"+ editor +"' data-num='"+ ctr +"' class='text-editor' rows='10' cols='80'></textarea>"); 

// Do re-create CKeditor instance 
if (CKEDITOR.instances[editor]) { 
    delete CKEDITOR.instances[editor]; 
} CKEDITOR.replace(editor); 

// Do check existing textarea 
if (ctr > 0) { 

    // Do loop textarea 
    $(".text-editor").each(function() { 

     var text_editor = $(this); 
     var text_editor_id = text_editor.attr("id"); 
     ctr_editor = parseInt(text_editor.attr("data-num")) - 1; 

     // Do remove recent textarea 
     if (ctr_editor < ctr && ctr_editor >= 0) { 
      $("#e_" + ctr_editor + ", #cke_e_" + ctr_editor).remove(); 
     } 
    }); 
} 

// Do get contents of div 
var default_val = contents.find(".editable[name='"+ cb +"']").html(); 
CKEDITOR.instances[editor].setData(default_val); 

CKEDITOR.instances[editor].on("change", function() { 

    var value = CKEDITOR.instances[editor].getData(); 
    contents.find(".editable[name='"+ cb +"']").html(value); 
}) 

// Do increment counter 
ctr++; 

因此，當使用保存按鈕

/* Close editor */ 
$("#save-editor").on("click", function() { 
    $("#editor-wrapper").animate({ width: 0 }); 

    // Do update editor name counter 
    editor = "e_" + ctr; 
    cb = "cb" + ctr; 
}); 

Answer 2

您每次單擊div時都會添加一個新的更改事件。頁面加載時添加一次更改事件。當你點擊div時，設置change事件可以使用的全局id變量。

Answer 3

像@NoGray建議你可以讓全球的ID和料箱的editor.onchange一次

$('iframe').load(function() { 

    var iframe = $('iframe').contents(); 

    var id = 'someDefault'; 

    iframe.find(".click").on("click", function() { 

     id = $(this).attr("id"); 
     var box_value = $(this).html(); 

     CKEDITOR.instances.editor.setData(box_value); 
    }); 
    editor.on('change', function() { 
     var value = CKEDITOR.instances.editor.getData() 
     iframe.find("#" + id).html(value); 
    }); 
}); 

當你在一個div身份證複印件單擊HTML到編輯器，並設置div的ID。此編號在編輯器更改時讀取

Answer 4

$(function(e){ 
    $("body").click(function(){ 
     $(".cke").each(function(){ 
      var idd = $(this).attr("id"); 
      var namme = idd.substr(4); 
      var content = $("#" + idd + " iframe").contents().find('body').html(); 
      $("textarea[name=" + namme + "]").val(content); 
     }); 
    });