如何使用嵌入式CKEditor 4在滿足需求的div中顯示Twitter Bootstrap彈出窗口？

Question

彈出窗口只顯示直到Ckeditor初始化。兩者是否可以一起工作？

這裏是一個演示：

http://jsfiddle.net/s2hxz99u/

HTML

<div contenteditable="true">Content 
Oh, I love you so!  
     <span id="example" rel="popover" 
    data-content="This is the body of Popover 1" 
    data-original-title="Creativity Tuts"> 
    POPOVER EXAMPLE HERE 
</span> 
</div> 
<p> 

Lorem Ipsum 
</p> 

<span id="example2"rel="popover" 
    data-content="This is the body of Popover 2" 
    data-original-title="Creativity Tuts"> 
    POPOVER EXAMPLE 2 HERE 
</span> 

JS

CKEDITOR.config.toolbarGroups = [ 
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] } 
]; 

$('#example').popover('show'); 
$('#example2').popover('show'); 

Answer 1

首先 - 你需要確保你的ckeditor實例允許所有的標籤和屬性。

CKEDITOR.editorConfig = function(config) { 
    config.allowedContent = true; 
    config.removeFormatAttributes = ''; 
} 

第二 - 您需要在ckeditor啓動後啓動彈出窗口。

CKEDITOR.on("instanceReady", function(event) { 
    $('#example').popover('show'); 
    $('#example2').popover('show'); 
}); 

下面是一個例子： http://jsfiddle.net/ya7gybwc/