当 时 ckeditor 消失通过 ajax 响应更新

Question

我在 ajax 场景中使用 ckeditor 和 jQuery 适配器。使用 jQuery 将 ckeditor 绑定到 textarea 元素。

应用程序：

我正在为客户设计一个电子学习应用程序。每门课程都有许多步骤，这些步骤取自数据库表。

该应用程序的 UI 只是一个带有“上一个”和“下一个”按钮的表单，用于在课程中导航。

问题在于管理工具，导师可以在其中创建和更新每门课程中的步骤。

同样，管理工具只是一个带有上一个和下一个按钮的表单。但是，有一个名为 StepText 的字段，我想要 html 而不是纯文本。因此需要富文本编辑器。

从一个步骤到另一个步骤的滚动是通过 Ajax 调用进行的，这些调用会发送到控制器，获取下一个（或上一个）步骤的数据，并将其注入到页面中。 ajax 调用返回从部分视图创建的 html。

问题：

文本区域位于此部分视图中。第一次加载页面时，CKEditor 会正确绑定，但对于任何后续的 ajax 响应则不会。

结果是 ckEditor 并没有展现出它所有的优点，我只是得到了毫无吸引力的文本区域。

有什么想法为什么会发生这种情况吗？

设置（显示供参考）（已编辑）：

使用以下脚本：

<script type="text/javascript" src="@Url.Content("~/ckeditor/ckeditor.js")"></script>
 <script type="text/javascript" src="@Url.Content("~/ckeditor/adapters/jquery.js")"></script>

这允许我将 ckEditor 与 jQuery 一起使用，如下所示：

$(document).ready(function () {
        $('#StepText').ckeditor(function () { }, { toolbar: 'Basic' });
    });

文本区域位于部分 .cshtml 文件中，位于充当 ajax 调用目标的 div 中：

已编辑！显示如何进行 ajax 调用!!

<div id="ajaxEditor">
  @using (Ajax.BeginForm(MVC.Admin.StepEditor.Edit(), new AjaxOptions { UpdateTargetId = "ajaxEditor", HttpMethod = "POST" },
    new { @name = "EditStepForm", @id = "EditStepForm" }))
{
    <div class="editor-label">
                @Html.LabelFor(model => model.StepText)
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.StepText, 20, 68, null)
                @Html.ValidationMessageFor(model => model.StepText)
            </div>
   }
</div>

回复 Chris Marisic：

我尝试在 ajax 调用的 OnSuccess 中重新绑定 ckeditor，但是在 Chrome 中调试 jQuery 时，出现以下错误

Uncaught [CKEDITOR.editor]  The instance "myTextArea" already exists.

：会期望：控件名称仍然相同并且没有全页刷新。

Answer 1

打电话给 Chris Marisic：

如果 Chris Marisic 想要将他的评论升级为答案，我会给他饼干。

我已经解决如下：

Ajax Form:

<div id="ajaxEditor">
@using (Ajax.BeginForm(MVC.Admin.StepEditor.Edit(), new AjaxOptions { UpdateTargetId = "ajaxEditor", HttpMethod = "POST", OnComplete="ReBindCKEditor" },
        new { @name = "EditStepForm", @id = "EditStepForm" }))
    {
    <div class="editor-label">
                @Html.LabelFor(model => model.StepText)
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.StepText, 20, 68, null)
                @Html.ValidationMessageFor(model => model.StepText)
            </div>
   }
</div>

Javascript:

由于返回的错误（请参阅对有问题的 Chris Marisic 的回复）表明 CKEDITOR 实例已经存在，我需要摆脱它。所以：

function BindCKEditor() {
    var elem = $('#StepText');
    elem.ckeditor(function () {}, { toolbar: [
        ['Source'],
        ['Preview'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['Image', 'Table', 'HorizontalRule'],
        ['Styles', 'Format'],
        ['Bold', 'Italic', 'Strike'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
        ['Link', 'Unlink', 'Anchor']
        ]
    });
}

BindCKEditor() 就按照它所说的去做。它配置编辑器并应用它。

现在，当我用 ajax 响应覆盖文本区域时，我需要删除该实例并重新创建它。所以：

function ReBindCKEditor() {
    delete CKEDITOR.instances['StepText'];
    BindCKEditor();
}

请注意，我在 Ajax 表单的 OnComplete 中使用 ReBindCKEditor()。我使用 oncomplete 而不是 onsuccess，因为我希望它重新绑定，无论 ajax 调用是否成功。

成功！：

我极力推荐 ckeditor。我认为这将是一个很难解决的噩梦，但是一旦我坐下来把这些想法放在一边，我发现有非常简洁的文档和很好的用户论坛。

我查看了很多其他富文本编辑器，但没有一个是那么好或得到很好的支持。雅虎的看起来不错，但是是一场噩梦，而且文档很差，除非你是 JavaScript 专家，而我不是。

我几乎选择了 lwrte，它看起来不错，但背后没有支持。

我看了看其他未命名的。

但ckEditor确实给我留下了深刻的印象。我现在可以将其推出到我想要的任何地方，而无需担心或恐惧。

注意：

我不为 CKEditor 工作，也与他们没有任何联系。这是真正的热情。是的，这样的事情确实存在。

Answer 2

这对于我使用 jquery ckeditor 适配器最有效。我只是在用 ckeditor textarea 加载一些 ajax 时调用它。

function initCKEditor() {
$('.wysiwyg').ckeditor(function(e){
        delete CKEDITOR.instances[$(e).attr('name')];
    },{
        toolbar:
            [
                ['Bold','Italic','Underline','Strike','-','NumberedList','BulletedList','-','Paste','PasteFromWord','-','Outdent','Indent','-','Link','-','Maximize','-','Source']
            ],
        skin: 'office2003'
    }
);  

}

Answer 3

我也遇到了这个问题，但是 senario 有点不同，我在 Ajax.BeginForm 中使用了 ckeditor，但是我的表单（部分视图）出现在 jquery ui 对话框中，第一个答案给了我一个解决这个问题的好主意。当对话框出现时，我重新绑定了 ckeditor！

1. 我编辑了这段代码，并添加了必需的属性/验证（字段在我的模型中具有必需的属性），它工作完美！看看这个神奇的代码： $('input[type=submit]').bind('click', function () {
$('.ckeditor').ckeditorGet().updateElement();
});
2. 我还添加了一些ckeditor的配置代码！由 CKEDITOR.editorConfig = 开始
3. 我在父页面上出现了不同的对话框，我唯一需要做的就是添加
   new { @class = "ckeditor" }) 到 TextAreaFor(partial view) 并在父页面中添加此行 delete CKEDITOR.instances['FieldName'];
4. Bravo ckeditor 团队

在父页面中我调用对话框：

function openDialog() {
    $('#dialog').dialog('open');

    delete CKEDITOR.instances['Ingredient'];

    CKEDITOR.editorConfig = function (config) {
        config.uiColor = "#EFEFEF";
        config.toolbar =
        [{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']}];
        config.width = 400;
        config.height = 100;
        config.autoParagraph = false;
        config.removePlugins = 'elementspath';
        config.resize_enabled = false;
        config.enterMode = CKEDITOR.ENTER_BR;
        config.startupFocus = true;
    };

    $('.ckeditor').ckeditor();
    $('input[type=submit]').bind('click', function () {
        $('.ckeditor').ckeditorGet().updateElement();
    });
}

在我使用 Ajax.BeginForm 的部分视图中：

<div class="editor-field">
        @Html.TextAreaFor(model => model.Ingredient, new { @class = "ckeditor" })
        @Html.ValidationMessageFor(model => model.Ingredient)
</div>

如您所见，我没有使用 OnCompelete 或 OnBegin。希望它能帮助别人！