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。

在我输入的时间内，会自动传输这些值。

当我点击其他块并尝试进行实时编辑时，我编辑的最近一个块也会覆盖我在最新块上所做的事情。

直到它全部被nooo覆盖！-es。

你不用担心！我有一个领先优势！

似乎当我在ckeditor onchange事件下面发出警告时，我点击其中一个块。

它会警告我点击的块上的相应ID。

然而，如果我在ckeditor onchange事件中放入警报并单击某些块并尝试编辑它。它提醒了我点击（按顺序）的所有块。

含义， id 有点存储在ckeditor onchange事件中，我甚至不知道为什么。

显然，问题是，当我点击该块并尝试编辑它时，我点击不同的块并进行编辑，两个块都在更新。

任何帮助都将不胜感激。

Answer 1

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

Answer 2

像@NoGray建议你可以将id设为全局，并将editor.onchange设为bin

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

Answer 3

感谢在这里回答的人们。

我完全忘了这个，我上周已经完成了它。

这就是我想出来的。

注意：这不是我的所有代码，我只是切断了这个问题。

我为它创建了一个计数器。

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 4

.animate-enter.animate-enter-active