使用ckeditor的调色板问题,仅显示在背景上

时间:2018-07-20 18:09:53

标签: angularjs ckeditor bootstrap-modal

我正在研究一个包含使用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">&times;</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.当模态出现时,我想保持淡入淡出/阴影。 任何帮助将不胜感激。谢谢!

enter image description here

0 个答案:

没有答案