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