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

【问题标题】：How to show a Twitter Bootstrap popover in a contenteditable div with inline CKEditor 4?如何使用内联 CKEditor 4 在 contenteditable div 中显示 Twitter Bootstrap 弹出窗口？
【发布时间】：2016-08-25 09:38:51
【问题描述】：

弹出框只在 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>

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

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

【问题讨论】：

也将感谢对答案的投票。谢谢！
完成了 :) 很棒的解决方案。

标签： javascript jquery twitter-bootstrap ckeditor popover

【解决方案1】：

首先 - 您需要确保您的 ckeditor 实例允许所有标签和属性。

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

第二个——你需要在ckeditor启动后启动popover。

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

这是一个例子： http://jsfiddle.net/ya7gybwc/

【讨论】：