CKeditor在模态窗口中,在链接对话窗口打开时关闭。

huangapple 未分类评论48阅读模式
英文:

CKeditor in modal window closes when link dialog window is open

问题

(function ($) {

    var MegaEditor = function (options) {
        this.init('megaeditor', options, MegaEditor.defaults);
    };

    $.fn.editableutils.inherit(MegaEditor, $.fn.editabletypes.abstractinput);

    $.extend(MegaEditor.prototype, {
        render: function () {
            MegaEditor.superclass.render.call(this);

            //ctrl + enter
            this.$input.keydown(function (e) {
                if (e.ctrlKey && e.which === 13) {
                    $(this).closest('form').submit();
                }
            });
        },

        value2html: function(value, element) {
            $(element).html(value);
        },

        html2value: function(html) {
            return html;
        },        
        
        input2value: function() { 
            var wartosc = CKEDITOR.instances[this.$input.get(0).name].getData();
            return wartosc;
        },

        activate: function() {
            if(this.$input.is(':visible')) {
                $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
                if(CKEDITOR.instances[this.$input.get(0).name]) {
                    CKEDITOR.remove(this.$input.get(0));
                }
                
                CKEDITOR.replace( this.options.editorId,
                    {
                    //extraPlugins : 'uicolor',
                    language : 'pl',
                    uiColor: '#C9E3F2',
                    scayt_autoStartup: false,
                    forcePasteAsPlainText: false,
                    toolbarCanCollapse: false,
                    toolbar :
                    [
                        ['Bold','Italic','Underline','Strike','-','Undo','Redo','-','Outdent','Indent'],
                        ['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                        ['Link','Unlink'], ['-','Source']
                    ]
                    } );
                
                this.$input.focus();
            }
        }         
    });

    MegaEditor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        /**
        @property tpl 
        @default '<textarea></textarea>'
        **/          
        tpl:'<textarea id="ckEditor"></textarea>',
        /**
        @property inputclass 
        @default input-large
        **/          
        inputclass: 'input-large',
        /**
        Placeholder attribute of input. Shown when input is empty.

        @property placeholder 
        @type string
        @default null
        **/             
        placeholder: null ,
        editorId: 'ckEditor'
    });

    $.fn.editabletypes.megaeditor = MegaEditor;    

}(window.jQuery));
英文:

I`ve got a problem with modal window in bootstrap. The default behavior is set to close when clicking outside of a container(it has to stay that way). CKEditor is nested in that window. Everything works great but when adding a link to a text. Ckeditor opens a new dialog window in that case and while editing that link CKeditor closes. I know the reason. Bootstrap doesn't recognize that its children and therefore recognize click on link dialog window as if outside of CKEeditor.
Is there a way to change that behavior, so link dialog window will be treated as a part of CKEditor.

this code that represents ckeditor based on bootstrap in my project. Cheers in advance!

(function ($) {

    var MegaEditor = function (options) {
        this.init(&#39;megaeditor&#39;, options, MegaEditor.defaults);
    };

    $.fn.editableutils.inherit(MegaEditor, $.fn.editabletypes.abstractinput);

    $.extend(MegaEditor.prototype, {
        render: function () {
        	MegaEditor.superclass.render.call(this);

            //ctrl + enter
            this.$input.keydown(function (e) {
                if (e.ctrlKey &amp;&amp; e.which === 13) {
                    $(this).closest(&#39;form&#39;).submit();
                }
            });
        },

        value2html: function(value, element) {
         
            $(element).html(value);
        },

        html2value: function(html) {
        
        	return html;
        },        
        
        input2value: function() { 
        	var wartosc = CKEDITOR.instances[this.$input.get(0).name].getData();
            return wartosc;
        },

        activate: function() {
            if(this.$input.is(&#39;:visible&#39;)) {
                $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
                if(CKEDITOR.instances[this.$input.get(0).name]) {
                	CKEDITOR.remove(this.$input.get(0));
          		}
          		
          		CKEDITOR.replace( this.options.editorId,
          			{
          			//extraPlugins : &#39;uicolor&#39;,
          			language : &#39;pl&#39;,
          			uiColor: &#39;#C9E3F2&#39;,
          			scayt_autoStartup: false,
          			forcePasteAsPlainText: false,
          			toolbarCanCollapse: false,
          			toolbar :
          			[
          			    [&#39;Bold&#39;,&#39;Italic&#39;,&#39;Underline&#39;,&#39;Strike&#39;,&#39;-&#39;,&#39;Undo&#39;,&#39;Redo&#39;,&#39;-&#39;,&#39;Outdent&#39;,&#39;Indent&#39;],
          			    [&#39;NumberedList&#39;,&#39;BulletedList&#39;,&#39;-&#39;,&#39;JustifyLeft&#39;,&#39;JustifyCenter&#39;,&#39;JustifyRight&#39;,&#39;JustifyBlock&#39;],
                        [&#39;Link&#39;,&#39;Unlink&#39;], [&#39;-&#39;,&#39;Source&#39;]

          			]
          			} );
                
                this.$input.focus();
            }
        }         
    });

    MegaEditor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        /**
        @property tpl 
        @default &lt;textarea&gt;&lt;/textarea&gt;
        **/          
        tpl:&#39;&lt;textarea id=&quot;ckEditor&quot;&gt;&lt;/textarea&gt;&#39;,
        /**
        @property inputclass 
        @default input-large
        **/          
        inputclass: &#39;input-large&#39;,
        /**
        Placeholder attribute of input. Shown when input is empty.

        @property placeholder 
        @type string
        @default null
        **/             
        placeholder: null ,
        editorId: &#39;ckEditor&#39;
    });

    $.fn.editabletypes.megaeditor = MegaEditor;    

}(window.jQuery));

huangapple
  • 本文由 发表于 2020年5月30日 01:29:38
  • 转载请务必保留本文链接:https://java.coder-hub.com/62091536.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定