/** * Open ckeditor in almostfullscreen mode, when the selected element is clicked and save the data to an (hidden) textarea. * * The `de_epages.presentationUiPrevieweditor()` opens the ckeditor in almostfullscreen mode, when the selected element is clicked and saves the data to an (hidden) textarea, when almostfullscreen mode is exited. * * ### Examples * Attach a presentationUiPrevieweditor to a div and associate a hidden textarea with it. * * JavaScript: * * de_epages('#editable').presentationUiPrevieweditor({ * name : 'myContent' * }); * * HTML: * * <div id="editable">Some fancy content to edit.</div> * <textarea name="myContent" style="display:none;">Some fancy content to edit.</textarea> * * * @class jQuery.ui.presentationUiPrevieweditor * @extends jQuery.widget * * @uses jQuery.ckeditor.adapters.jquery * @uses jQuery.ui.widget * @uses de_epages * @since 6.15.0 */ /** * @cfg {String} name The associated textarea is $('textarea[name="' + name + '"]').first() */ /** * @cfg {Object} [config] A config hash to pass to the editor. */ /** * See `jQuery.ui.presentationUiPrevieweditor` for details. * * @param {Object} options A map of additional options pass to the method. * @param {String} name The associated textarea is $('textarea[name="' + name + '"]').first() * @param {Object} [config] A config hash to pass to the editor. * * @method presentationUiPrevieweditor * @member jQuery * * @since 6.15.0 */ define( "de_epages/presentation/ui/previeweditor", [ "jquery", "de_epages", "ckeditor/ckeditor", "jquery/ckeditor", "jquery/ui/widget" ], function ($, de_epages, CKEDITOR) { // Widget. $.widget('ui.presentationUiPrevieweditor', { options : { name : '', // Name of associated (hidden) textarea. config : {} // Options to pass to the *ckeditor*. }, _create : function () { var self = this, o = self.options; // Merge in options from data attribute. $.extend(true, o, $.parseJSON(self.element.attr('data-de_epages-presentation-ui-previeweditor'))); // Set textarea. self.textarea = $('textarea[name="' + o.name + '"]').first(); // Create editor. // We have to remove the *toolbar* plugin, because otherwise we run into a bug // in the *destroy* event listener of the toolbar plugin, since // we never actually display a toolbar. self.ckeditor = new CKEDITOR.editor($.extend(o.config, {removePlugins : (o.config.removePlugins ? (o.config.removePlugins + ',toolbar') : 'toolbar')}), new CKEDITOR.dom.element('div'), CKEDITOR.ELEMENT_MODE_INLINE ); // Assign *setData* listener to update *textarea* after editing in *epAlmostFullscreen*. self.ckeditor.on('afterSetData', $.proxy(self, '_afterSetData')); // Assign *click* listener to execute *epAlmostFullscreen* plugin. self.element.on('click.presentationUiPrevieweditor', $.proxy(self, '_execEpAlmostFullscreen')); }, _execEpAlmostFullscreen : function (event) { this.ckeditor.setData(this.textarea.val()); this.ckeditor.getCommand('epalmostfullscreen').setState(CKEDITOR.TRISTATE_OFF); this.ckeditor.execCommand('epalmostfullscreen'); }, _afterSetData : function (event) { var data = event.editor.getData(); this.textarea.val(data); this.element.html(data); this.textarea.trigger('change'); }, destroy : function () { this.ckeditor && this.ckeditor.destroy(); this.element && this.element.off('click.presentationUiPrevieweditor'); this._superApply(arguments); } }); return de_epages; });