在選擇變更時加載模板

Question

是否有一種方法，使用javascript，只要特定的選擇標籤改變其值，就加載模板？例如，用戶將選擇的值從無到有更改爲「Template_1」，則ckeditor應加載「Template_1」。

HTML：

<select id="tipe"> 
    <option>Template_1</option> 
</select> 

<textarea class="ckeditor form-control html" id="motivo" name="motivo" rows="6" data-error-container="#editor2_error"></textarea> 

的JavaScript：

CKEDITOR.replace('motivo'); 
$('#tipe').change(function(){ 
    var template = $(this).val(); 
    ////Code Here to replace template 
}); 

我已經預裝 「Template_1」 關於CKEditor的模板。

Answer 1

定義對象中的不同模板。然後，爲輸入框添加一個事件偵聽器，並設置ckeditor內容。

HTML：

<select id="tipe"> 
    <option></option> 
    <option value="Template_1">Template 1</option> 
    <option value="Template_2">Template 2</option> 
</select> 

<textarea class="ckeditor form-control html" id="motivo" name="motivo" rows="6" data-error-container="#editor2_error"></textarea> 

的Javascript：

var templates={}; 
templates["Template_1"]="<p>This is the first template</p>"; 
templates["Template_2"]="<p>This is the second template</p>"; 
$('#tipe').change(function(){ 
    var template = $(this).val(); 
    CKEDITOR.instances["motivo"].setData(templates[template]) 
}); 

例子：http://jsfiddle.net/8ybxpku8/

Answer 2

如果你想添加一些內容模板，我敢肯定你意識到this plugin。如果您無論如何要做到這一點，我會做什麼如下，如果我想 - 例如 - 內容模板與AP一個div和圖像元素：

CKEDITOR.replace('motivo'); 
$('#tipe').change(function() 
{ 
    var template = $(this).val(); 

    if(template == 'Paragraph with some image') 
    { 
     var editor = CKEDITOR.instances.motivo; 

     editor.insertElement(
     CKEDITOR.dom.element.createFromHtml(
     '<div style="height: 100px; width: 100%; background: #C4C4C4;"> 
      <p style="height: 100px; width: 50%;"></p> 
      <image src="some/uri.jpg" style="height: 100px; width: 50%;" /> 
      </div>') 
     ); 
    } 

    //else other templates 
});