CKEditor SetData JQuery

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> 

I 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

這裏有幾個指針。

1. 使用class="foo"，如果你有，你是指作爲一個羣體，就像喜歡這裏，它看起來像你將有你聽的變化事件很多setCKBody元素很多東西。
2. 如果您有一件特定的事情，請使用id="foo"。
3. 使用了一個元素相同的id和類通常是不應該做的事情。
4. CKEDITOR.instances[xxx] < - xxx應該是一個字符串，而不是jquery對象 - 所以CKEDITOR.instances[className]可能會更好（我不能說沒有看到過你的HTML）。

如果我們看到您的HTML這將幫助; textarea定義和setCKBody定義。你有很多ckeditor和許多setCKBody元素嗎？

Answer 2

我原來的辦法處理這一情況是完全錯誤的，我有這樣的包含多個郵件模板，所以我通過在同一頁內的局部視圖渲染的每一個，使用戶可以點擊編輯它們中的任何一個模型，並詳細信息將顯示在同一個窗口中的模式彈出窗口中。我想避免被強迫用戶導航到另一個窗口編輯郵件模板，但是這導致具有阻止我訪問正確的他們同樣id和name屬性的多個元素。

我已經添加了一個列表框，用戶可以在其中選擇要編輯的模板，選定的模板將在下面呈現，從而避免出現多個name和id問題。現在我知道，只有不斷1 CKEditor的控制，所以我可以訪問它在我的JS是這樣的：

var editor = CKEDITOR.instances.SelectedTemplate_Body; 

SelectedTemplate_Body是name我到CKEditor的控制進行的元素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指向我MailTemplates控制器public方法運行在可用郵件模板的搜索和反對標識傳入的模板相匹配，該方法回到模板作爲字符串的身體。

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試圖幫助，你給了我幾件事情去思考。