我正在研究一个包含使用Ckeditor
的文本区域的模态。我希望能够使用可用的调色板设置文本的颜色。
我一直在审查和应用CKEditor issue with Bootstrap modal中的所有建议,这些建议指出将以下行添加到bootstrap.js定义中,以解决对模式的关注不足,并且还与下拉列表有关。 / p>
$.fn.modal.Constructor.prototype.enforceFocus = function() {
$( document )
.off( 'focusin.bs.modal' ) // guard against infinite focus loop
.on( 'focusin.bs.modal', $.proxy( function( e ) {
if (
this.$element[ 0 ] !== e.target && !this.$element.has( e.target ).length
// CKEditor compatibility fix start.
&& !$( e.target ).closest( '.cke_dialog, .cke' ).length
// CKEditor compatibility fix end.
) {
this.$element.trigger( 'focus' );
}
}, this ) );
};
但是,我无法找到解决方案,因为调色板显示在模式后面,并且我无法选择任何颜色。
我的模态html看起来像这样:
<div class="modal fade bs-modal-lg" id="text-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="header-close" data-dismiss="modal" aria-label="Close" ng-click="cpCtrl.newTaskContent.content = null"><span aria-hidden="true">×</span></span>
<h4 class="modal-title">{{'newTextBlock'|translate}}</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-body">
<div class="form-group">
<div>
<textarea id="new-text-block" ck-editor ng-model="cpCtrl.newTaskContent.content"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
{{'close' | translate}}
</button>
<button type="button" class="btn red" data-dismiss="modal" ng-click="cpCtrl.insertHTMLText()">
{{'save' | translate}}
</button>
</div>
</div>
</div>
在测试时,我减小了模态的宽度,以便解决问题。 P.D.当模态出现时,我想保持淡入淡出/阴影。 任何帮助将不胜感激。谢谢!