Question

我有一个DropDownList，其中onChange设置了TextArea CKEditor控件的内容。

当编辑器未使用时，我会为onChange运行这段代码：

$(".setBody").change(function() {
    //
    var className = "." + $(this).attr("sExternalId");
    var text = $(this).val();
    //
    $(className).val(text);
});

我对Javascript / JQuery不是很熟悉，我只是无法弄清楚如何使用CKEditor的setData()函数执行相同操作。这就是我尝试过的：

$(".setCKBody").change(function() {
    //
    var className = "." + $(this).attr("sExternalId");
    var text = $(this).val();
    //
    var editor = $(className).ckeditorGet();
    editor.setData(text, function() {
        alert("The content was set");
    });
});

$(".setCKBody").change(function() {
    //
    var className = "." + $(this).attr("sExternalId");
    var text = $(this).val();
    //
    CKEDITOR.instances[$(className)].setData(text, function() {
        alert("The content was set");
    });
});

我关门了吗？我认为其中一个主要限制是我有多个具有相同id和名称的编辑器控件，只有类可以区分它们，这就是我在JQuery中使用它的原因。我已尝试在网上完成一些例子，但我不确定如何将它们应用于这种情况 - 这可能是我经历过的经验不足......

感谢。

修改

这就是我的textarea和dropdownlist在观看源中的显示方式：

<textarea class="editArea M3" cols="20" id="Body" name="Body" rows="5">
    *some text*
</textarea>

<select class="setCKBody" id="Templates" name="Templates" sExternalId="M3">
    <option value="some value">Option 1</option>
    <option value="some value">Option 2</option>
</select>

上述onChange事件是从dropDownList更改触发的，并通过“sExternalId”属性链接到textArea。 我意识到我在上面的示例中使用了“id”作为属性名称，这是错误的，所以我改变了它。

我用它将它设置为CKEditor控件：

<script>CKEDITOR.replaceAll('editArea');</script>

我在同一页面上有2到6个textarea个控件，用这样的剃刀创建：

@Html.TextAreaFor(m => m.Body, new { @class = "span12 editArea " + Model.ExternalId, rows = 5 })

它们包含在如下所用的部分视图中：

@foreach (MailTemplateModel oTemplate in Model.Templates)
{
    @Html.Partial("_MailPartial", oTemplate)
}

这就是为什么每个文本区域都将“正文”设置为id和name。我认为这是问题的核心，有多个具有相同id和名称的元素CKEditor无法选择正确的元素。我曾尝试做CKEDITOR.instances [“className”]，但这是未定义的，而做CKEDITOR.instances.Body确实有效，但只会返回相同的值。

我将重新构建页面的方式以避免这种情况，希望我的问题能够在同一时间得到解决。

Answer 1

这里有几点指示。

使用class="foo"如果你有许多你称之为群组的东西，就像在这里看起来你会听到很多用于变更事件的setCKBody元素。
如果您有一件具体的事情，请使用id="foo"。
对一个元素使用相同的id和类通常不是正确的做法。
CKEDITOR.instances[xxx]＆lt; - xxx应该是一个字符串，而不是一个jquery对象 - 所以CKEDITOR.instances[className]可能效果更好（我不能说没有看过你的HTML）。

如果我们看到你的HTML会有所帮助; textarea定义和setCKBody定义。你有很多ckeditors和很多setCKBody元素吗？

Answer 2

我对这种情况的原始方法是错误的，我有一个包含多个邮件模板的模型，因此我通过同一页面内的部分视图渲染每个模板，以便用户可以单击编辑其中任何一个和细节将出现在模态弹出窗口中 - 在同一窗口中。我想避免的是强制用户导航到另一个窗口来编辑邮件模板，但这导致多个元素具有相同的id和name属性，这使我无法正确访问它们。< / p>

我现在添加了一个列表框，用户可以在其中选择要编辑的模板，所选模板会在下方呈现，从而避免多个name和id问题。现在我知道只有1个CKEditor控件，所以我可以在我的js中访问它：

var editor = CKEDITOR.instances.SelectedTemplate_Body;

SelectedTemplate_Body是我在CKEditor控件中生成的元素的name和id。我为onChange编写的dropdownlist函数现在写成：

$(document).ready(function() {
    //
    $(".setBody").change(function() {
        //
        var templateId = $(this).val();
        //
        $.ajax({
            type: "GET",
            url: msHost + "MailTemplates/UpdateBody",
            data: { "templateId": templateId },
            cache: false,
            dataType: "text",
            success: function (data) {
                CKEDITOR.instances.SelectedTemplate_Body.setData(data);
            }
        })
    });
});

tempalteId属性是与dropdownlist选择相关联的值，这让我知道用于设置编辑器控件内容的模板。

MailTemplates/UpdateBody指向public控制器中的MailTemplates方法，该方法运行搜索可用的邮件模板并与传入的模板ID匹配，然后该方法返回模板作为字符串。

public string UpdateBody(string tempalteId)
{
    TemplateQuery oQuery;
    //
    oQuery = new TemplateQuery();
    oQuery.Execute();
    foreach (MailTemplate oTemplate in oQuery.Results)
        if (oTemplate.Id.Equals(templateId))
            return oTemplate.Body;
    //
    return string.Empty;
}

该行用控制器方法的响应替换CKEditor控件的内容。

CKEDITOR.instances.SelectedTemplate_Body.setData(data);

感谢@Nenotlep尝试提供帮助，你给了我一些思考的东西。

CKEditor SetData JQuery

2 个答案: