CKEDITOR实时编辑Iframe-Jquery

它有点长，但它有图片！：D

我正在做的是一种真正的实时编辑，包括预览和编辑器

工作原理

当我单击其中一个可以高亮显示的块时，该块的值将传输到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>

这是我正在编写的代码

我有一个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>

有趣的是，这里有一段代码

$(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

<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>

当我输入时，值会自动传输

当我单击其他块并尝试进行实时编辑时，我编辑的最近块也会覆盖我在最新块上所做的操作

直到它全被nooo覆盖-是的

别担心！我有线索

当我在ckeditor onchange事件下面发出警报并单击其中一个块时，就会出现这种情况

它会提醒我单击的块上的相应id

但是，如果我将警报放在ckeditor onchange事件中，然后单击一些块并尝试编辑它。它提醒我按顺序单击的所有块

也就是说，id在某种程度上被存储在ckeditor onchange事件中，我甚至不知道为什么

显然，问题是，当我单击块并试图编辑它时，我单击不同的块并编辑它，两个块都在更新

---

任何帮助都将不胜感激。

每次单击div时，您都会添加一个新的更改事件。在页面加载时添加一次更改事件。单击div时，设置更改事件可以使用的全局id变量。

就像@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 id时，会将html复制到编辑器中并设置该div的id。编辑器更改时会读取该id。感谢这里的回答人员

我完全忘了这个，我上星期已经完成了

这是我想到的

注意：这不是我的全部代码，我只是在这个问题上切碎了其中的内容

我为它创建了一个计数器

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++;

---

你需要扩展你的答案来解释你到底在回答什么。

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