如何使用内联 CKEditor 4 在 contenteditable div 中显示 Twitter Bootstrap 弹出窗口？

Question

弹出窗口仅在 Ckeditor 初始化之前显示。有没有可能让两者一起工作？

这是一个演示：

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/

如何使用内联 CKEditor 4 在 contenteditable div 中显示 Twitter Bootstrap 弹出窗口？

How to show a Twitter Bootstrap popover in a contenteditable div with inline CKEditor 4?

javascript

jquery

twitter-bootstrap

ckeditor

popover