Question

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

该应用程序：

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

应用程序的用户界面只是一个带有“上一页”和“下一页”按钮的表单，可以在课程中导航。

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

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

从一步到另一步的滚动用Ajax调用关闭，然后转到控制器，获取下一个（或前一个）步骤的数据，并将其注入页面。 ajax调用返回从部分视图创建的html。

问题：

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

结果是ckEditor没有出现它的全部优点，我只是得到textarea的无吸引力的裸体。

为什么会发生这种情况？

SETUP（显示为参考）（已编辑）：

使用以下脚本：

<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表格：

<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而不是onccess，因为无论ajax调用成功与否，我都希望它重新绑定。

SUCCESS：

我不能高度推荐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重新绑定了！

我已编辑此代码并添加了必需的属性/验证（字段在我的模型中具有必需属性），它完美无缺！看看这个神奇的代码：$('input[type=submit]').bind('click', function () { $('.ckeditor').ckeditorGet().updateElement(); });
我还为ckeditor添加了一些配置代码！从CKEDITOR.editorConfig =
我在父页面上出现了不同的对话框，我唯一需要做的就是添加 new { @class = "ckeditor" })到TextAreaFor（部分视图）并在父页面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。希望它对某人有帮助！

当<textarea>被ajax响应</textarea>更新时，ckeditor消失