CKEDITOR.dialog.add( 'figureDialog', function( editor ) { function createDiv( editor ) { var dialog = this; var containers = []; var database = {}; var containedBlocks = [], block; var selection = editor.getSelection(), ranges = selection.getRanges(); var bookmarks = selection.createBookmarks(); var i, iterator; console.log(selection); console.log(bookmarks); var figure = editor.document.createElement( 'span' ); figure.setAttribute('class', 'infoblock'); figure.setAttribute( 'type', dialog.getValueOf('tab-basic', 'orientation') ); figure.setAttribute( 'data-info', dialog.getValueOf( 'tab-basic', 'data-info' ) ); var selection = editor.getSelection(), ranges = selection.getRanges(); var bookmarks = selection.createBookmarks(); var i, iterator; var txt = selection.getSelectedText(); figure.appendHtml(txt); editor.insertElement( figure ); containers.push( divElement ); return containers; } return { title: 'Вставка информационный блок', minWidth: 400, minHeight: 200, contents: [ { id: 'tab-basic', label: 'Базовые', elements: [ { type: 'text', id: 'data-title', rows: 4, controlStyle: 'height:100%', inputStyle: 'height:100%', label: 'Заголовок', validate: CKEDITOR.dialog.validate.notEmpty( "Поле не должно быть пустым" ), setup: function( element ) { this.setValue( element.getAttribute( "data-title" ) ); }, commit: function( element ) { element.setText( this.getValue() ); } }, { type: 'textarea', id: 'data-info', rows: 4, controlStyle: 'height:100%', inputStyle: 'height:100%', label: 'Текст', validate: CKEDITOR.dialog.validate.notEmpty( "Поле не должно быть пустым" ), setup: function( element ) { this.setValue( element.getAttribute( "data-info" ) ); }, commit: function( element ) { element.setText( this.getValue() ); } }, { type: 'radio', id: 'orientation', label: 'Выбрать', items: [ [ 'тип 1', '1' ], [ 'тип 2', '2' ] ], 'default': '1', setup: function( element ) { this.setValue( element.getAttribute( "type" ) ); }, commit: function( element ) { element.setAttribute( "orientation", this.getValue() ); } } ] }, ], onShow: function() { var selection = editor.getSelection(); var element = selection.getStartElement(); if ( !element || $(element).attr('class') != 'infoblock' ) { element = editor.document.createElement( 'span' ); this.insertMode = true; } else this.insertMode = false; this.element = element; if ( !this.insertMode ) this.setupContent( this.element ); }, onOk: function() { var dialog = this; var fitem = this.element; var selection = editor.getSelection(); // console.log(selection); if ( this.insertMode ){ var figure = editor.document.createElement( 'span' ); figure.setAttribute('class', 'infoblock'); figure.setAttribute( 'type', dialog.getValueOf('tab-basic', 'orientation') ); figure.setAttribute( 'data-info', dialog.getValueOf( 'tab-basic', 'data-info' ) ); figure.setAttribute( 'data-title', dialog.getValueOf( 'tab-basic', 'data-title' ) ); var selection = editor.getSelection(); var txt = selection.getSelectedText(); figure.appendHtml( txt ); // editor.insertElement( figure ); //console.log(figure.getOuterHtml()); editor.insertHtml( ' '+figure.getOuterHtml()+' ','text'); }else{ fitem.setAttribute( 'data-info', dialog.getValueOf( 'tab-basic', 'data-info' ) ); fitem.setAttribute( 'data-title', dialog.getValueOf( 'tab-basic', 'data-title' ) ); fitem.setAttribute( 'type', dialog.getValueOf('tab-basic', 'orientation') ); //dialog.commitContent( fitem ); } /* containers.push( figure ); var size = containers.length; for ( var i = 0; i < size; i++ ) { this.commitContent( containers[ i ] ); !containers[ i ].getAttribute( 'style' ) && containers[ i ].removeAttribute( 'style' ); }*/ this.hide(); } } } );