当 <textarea> 通过 ajax 响应更新时，ckeditor 消失答案

【问题标题】：ckeditor disappears when <textarea> gets updated by ajax response当 <textarea> 通过 ajax 响应更新时，ckeditor 消失
【发布时间】：2011-07-06 16:14:01
【问题描述】：

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

应用程序：

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

应用程序的 UI 只是一个带有“上一个”和“下一个”按钮的表单，用于浏览课程。

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

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

通过 Ajax 调用从一步到一步的滚动是向下的，它转到控制器，获取下一个（或上一个）步骤的数据，并将其注入页面。 ajax 调用返回从局部视图创建的 html。

问题：

textarea 在这个局部视图中。 CKEditor 在页面第一次加载时正确绑定，但对于任何后续的 ajax 响应都没有。

结果是 ckEditor 并没有完全显示出来，我只是得到了 textarea 不吸引人的裸露。

任何想法为什么会发生这种情况？

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

使用以下脚本：

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

这是您所期望的：控件名称仍然相同，并且还没有完整的页面刷新。

【问题讨论】：

请提供更多代码（即“ajax 调用覆盖”是什么意思）。并提供 ckeditor 的 jQuery 适配器的链接（或者它是标准 ckeditor 版本的内置？）。
不，它不是内置的。如果你想在 jQuery 中使用 ckEditor，你必须在 ckeditor.js 文件之后包含适配器文件，如上面的编辑版本所示。
是不是像调用你在document.ready上运行的代码一样简单，在ajax之后运行？
会发生什么？ CKEditor 是回滚到文本区域还是只是丢失了一些 UI 元素？
好的，ajax 调用会覆盖页面，放回相同的元素和 ids 但不同的数据。在 textarea 上，我有 CKeditor 实例，现在我只有光秃秃的、裸露的 textarea。该应用程序本质上是一个表单，它通过 ajax 从数据库中加载连续记录。鉴于这些 cmets 反映了混乱，将更新问题。

标签： jquery asp.net-mvc-3 ckeditor

【解决方案1】：

打电话给克里斯·马里西奇：

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

我已解决如下：

Ajax 表单：

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

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

成功！：

我不能高度推荐ckeditor。我原以为这将是一场噩梦，但当我坐下来抛开这些想法时，我发现这里有非常简洁的文档和很好的用户论坛。

我查看了很多其他富文本编辑器，但没有一个像它一样好或支持得那么好。雅虎的那个看起来不错，但除非你是我不是的 javascript 专家，否则它是一场噩梦和糟糕的文档。

我差点用 lwrte，它看起来不错，但背后没有支持。

我查看了其他未命名的内容。

但是 ckEditor 确实给我留下了深刻的印象。我现在可以毫无畏惧地把它推出到我想去的地方。

注意：

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

【讨论】：

您好，您的回答对我很有用。感谢那。但是还需要做一件事，我必须从的 ckeditor/adapter 添加 Jquery.js 文件。我无法理解这种行为。如果您知道什么，请告诉我。

【解决方案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'
    }
);

}

【讨论】：

【解决方案3】：

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

我已经编辑了这段代码并添加了必需的属性/验证（我的模型中的字段具有必需的属性），它工作得很好！看看这个神奇的代码：$('input[type=submit]').bind('click', function () { $('.ckeditor').ckeditorGet().updateElement(); });
我还为ckeditor添加了一些配置代码！由CKEDITOR.editorConfig = 开始
我在父页面上出现了不同的对话框，我唯一需要做的就是添加 new { @class = "ckeditor" }) 到 TextAreaFor(partial view) 并在父页面中添加这一行 delete CKEDITOR.instances['FieldName'];
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。希望它可以帮助别人！

【讨论】：