2014-04-25 97 views
0

我需要插入一個小部件兩次,但不同的附加類,這樣的事情:如何在CKEditor中同時插入一個小部件兩次?

[div 'open' with class "tabs"] 
<br /> 
[div 'close' with class "tabs tabs-end"] 

這不起作用:

template: 
    '<div class="tabs">Open</div> <br /> <div class="tabs tabs-end">Close</div>', 

它只是增加了第一個div完全無視第二個(和br)。這是爲什麼?

全碼:

CKEDITOR.plugins.add('tabs', { 
    requires: 'widget', 
    icons: 'tabs', 

    init: function(editor) { 
     editor.widgets.add('tabs', { 
      allowedContent: 'div(!tabs,tabs-end)', 
      requiredContent: 'div(tabs,tabs-end)', 
      template: '<div class="tabs">Open</div> <br /> <div class="tabs tabs-end">Close</div>', 
      button: 'Create Tabs', 
      upcast: function(element, data) { 
       return element.name == 'div' && (element.hasClass('tabs') || element.hasClass('tabs-end')); 
      } 
     } 
    ); 

     editor.ui.addButton('tabs', { 
     label : 'Tabs erstellen', 
     command : 'tabs' 
    }); 
    } 
}); 

我也使用「插入」事件,然後就用editor.execCommand()再次添加小部件嘗試,但這些事件都慣於火災和obiously應該只火一次,我插入通過UI按鈕控件,否則這將是一個無限循環我想在您使用文檔片段

+0

當在許多地方提出一個問題時,值得交叉鏈接。答案已經在http://ckeditor.com/forums/Support/How-to-add-a-widget-twice-via-template-property – Reinmar

回答

0

CKEditor的部件必須是單個元素 - 元素(參見widget#element)的集合。

的修復很簡單:你的包裝元素<div>所以

<div class="tabs">Open</div> <br /> <div class="tabs tabs-end">Close</div> 

成爲

<div class="tabs"> 
    <div class="tabs-start">Open</div> <br /> <div class="tabs-end">Close</div> 
</div> 

和更新upcast/downcast相應。

+0

上給出,但這會創建1個小部件,我需要2個帶空間的獨立小部件inbetween – Alex

+0

然後用'editor.widgets.add('tabs-start | end',{...})'創建兩個小部件。目前,不支持嵌套小部件,例如你不能創建一個父窗口部件,它可以保存'tabs-start | end'和''之間。爲什麼你需要2個獨立的小部件? – oleq

相關問題