Question

有没有办法，使用javascript，只要特定的选择标记加载模板，更改其值？例如，用户将select的值从“nothing”更改为“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
});

我已在ckeditor模板上预加载“Template_1”。

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。如果你想要这样做，我会做以下事情，如果我想 - 例如 - 带有p和图像元素的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 
});

在选择更改时加载模板

2 个答案: