javascript - 如何使用内联 CKEditor 4 在 contenteditable 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/