Skip to content
Code-Schnipsel Gruppen Projekte
Editor.js 41,3 KiB
Newer Older
  • Learn to ignore specific revisions
  • Henning Leutz's avatar
    Henning Leutz committed
    /**
     * ckeditor4 for QUIQQER
     *
    
     * @module package/quiqqer/ckeditor4/bin/Editor
    
    Henning Leutz's avatar
    Henning Leutz committed
     * @author www.pcsg.de (Henning Leutz)
     *
    
    Henning Leutz's avatar
    Henning Leutz committed
     * @require require
    
    Henning Leutz's avatar
    Henning Leutz committed
     * @require qui/QUI
    
    Henning Leutz's avatar
    Henning Leutz committed
     * @require controls/editors/Editor
     * @require Locale
     * @require Ajax
     * @require qui/utils/Math
    
    Henning Leutz's avatar
    Henning Leutz committed
     * @require qui/utils/Elements
    
    Henning Leutz's avatar
    Henning Leutz committed
     * @require css!package/quiqqer/ckeditor4/bin/Editor.css
    
    Henning Leutz's avatar
    Henning Leutz committed
     */
    
    define('package/quiqqer/ckeditor4/bin/Editor', [
    
    Henning Leutz's avatar
    Henning Leutz committed
    
        'require',
    
    Henning Leutz's avatar
    Henning Leutz committed
        'controls/editors/Editor',
    
        'Locale',
    
        'qui/utils/Elements',
    
        'qui/utils/String',
    
        'package/quiqqer/ckeditor4/bin/Settings',
    
        'css!package/quiqqer/ckeditor4/bin/Editor.css'
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    ], function (require, QUI, Editor, Locale, Ajax, QUIMath, QUIElements, QUIStringUtils, Settings) {
    
    Henning Leutz's avatar
    Henning Leutz committed
        "use strict";
    
        return new Class({
    
    
    Henning Leutz's avatar
    Henning Leutz committed
            Extends: Editor,
            Type   : 'package/quiqqer/ckeditor4/bin/Editor',
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
            Binds: [
    
    Henning Leutz's avatar
    Henning Leutz committed
                '$onLoad',
                '$onDestroy',
                '$onSetContent',
                '$onGetContent',
                '$onDrop',
                '$onResize',
                '$onAddCSS',
                '$onInstanceReadyListener'
    
    Henning Leutz's avatar
    Henning Leutz committed
            ],
    
    
            /**
             * Control Constructor
             * @param Manager
             * @param options
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            initialize: function (Manager, options) {
                this.parent(Manager, options);
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
                this.$cssFiles = {};
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                this.addEvents({
    
    Henning Leutz's avatar
    Henning Leutz committed
                    onLoad      : this.$onLoad,
                    onResize    : this.$onResize,
                    onDestroy   : this.$onDestroy,
                    onSetContent: this.$onSetContent,
                    onGetContent: this.$onGetContent,
                    onDrop      : this.$onDrop,
                    onAddCSS    : this.$onAddCSS
    
    Henning Leutz's avatar
    Henning Leutz committed
                });
            },
    
    
    Henning Leutz's avatar
    Henning Leutz committed
            /**
             * Editor onLoad Event
             * if the editor is to be drawn and inserted
             *
             * @param {Object} data - Editor data
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onLoad: function (data) {
    
                const self = this;
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                // load CKEDITOR
    
    Henning Leutz's avatar
    Henning Leutz committed
                require([URL_OPT_DIR + 'ckeditor/ckeditor/ckeditor.js'], function () {
    
    Henning Leutz's avatar
    Henning Leutz committed
                    window.CKEDITOR.on('instanceReady', function (ev) {
    
                        const Editor = QUI.Controls.getById(ev.editor.name);
    
                        if (Editor && "$onInstanceReadyListener" in Editor) {
                            Editor.$onInstanceReadyListener(ev);
                        }
    
                    });
    
                    // http://docs.ckeditor.com/#!/guide/dev_howtos_dialog_windows
    
    Henning Leutz's avatar
    Henning Leutz committed
                    window.CKEDITOR.on('dialogDefinition', function (ev) {
    
                        const Editor = QUI.Controls.getById(ev.editor.name);
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
                        Editor.$image2Dialog(ev);
    
                        Editor.$html5AudioDialog(ev);
                        Editor.$html5VideoDialog(ev);
    
    Henning Leutz's avatar
    Henning Leutz committed
            /**
             * Load the CKEditor Instance into an Textarea or DOMNode Element
             *
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {Object} data - Editor settings data
    
    Henning Leutz's avatar
    Henning Leutz committed
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $loadInstance: function (data) {
                if (typeof window.CKEDITOR === 'undefined') {
    
    Henning Leutz's avatar
    Henning Leutz committed
                    return;
                }
    
    
                const self      = this,
                      Container = this.getContainer();
    
                let Textarea = false,
                    size     = Container.getSize();
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (!Container.getElement('textarea')) {
    
    Henning Leutz's avatar
    Henning Leutz committed
                    Textarea = new Element('textarea', {
    
                        id    : self.getId(),
    
    Henning Leutz's avatar
    Henning Leutz committed
                        styles: {
                            height: size.y,
    
    Henning Leutz's avatar
    Henning Leutz committed
                            width : size.x
    
    Henning Leutz's avatar
    Henning Leutz committed
                        }
    
    Henning Leutz's avatar
    Henning Leutz committed
                    }).inject(Container);
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (!Textarea) {
                    Textarea = Container.getElement('textarea');
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    
                const instance = Textarea.get('id');
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (window.CKEDITOR.instances[instance]) {
                    window.CKEDITOR.instances[instance].destroy(true);
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                self.setAttribute('instancename', instance);
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                // parse the buttons for the ckeditor
    
                let b, g, i, len, blen, glen, group, items,
    
    Henning Leutz's avatar
    Henning Leutz committed
                    buttonEntry, lineEntry, groupEntry;
    
    
                const buttons = data.toolbar,
                      lines   = buttons.lines || [],
                      toolbar = [];
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                for (i = 0, len = lines.length; i < len; i++) {
    
                    items = [];
    
    Henning Leutz's avatar
    Henning Leutz committed
                    lineEntry = lines[i];
    
    Henning Leutz's avatar
    Henning Leutz committed
    
                    // groups
    
    Henning Leutz's avatar
    Henning Leutz committed
                    for (g = 0, glen = lineEntry.length; g < glen; g++) {
    
                        group = [];
    
    Henning Leutz's avatar
    Henning Leutz committed
                        groupEntry = lineEntry[g];
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                        // buttons
    
    Henning Leutz's avatar
    Henning Leutz committed
                        for (b = 0, blen = groupEntry.length; b < blen; b++) {
                            buttonEntry = groupEntry[b];
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
                            if (buttonEntry.type === 'separator') {
    
    Henning Leutz's avatar
    Henning Leutz committed
                                group.push('-');
    
    Henning Leutz's avatar
    Henning Leutz committed
                                continue;
    
    Henning Leutz's avatar
    Henning Leutz committed
                            }
    
    Henning Leutz's avatar
    Henning Leutz committed
                            group.push(buttonEntry.button);
    
    Henning Leutz's avatar
    Henning Leutz committed
                        }
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                        toolbar.push(group);
    
    Henning Leutz's avatar
    Henning Leutz committed
                    }
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                    toolbar.push('/');
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
                let height = size.y,
    
    Henning Leutz's avatar
    Henning Leutz committed
                    width  = size.x;
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (self.getAttribute('width')) {
                    width = self.getAttribute('width');
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (self.getAttribute('height')) {
                    height = self.getAttribute('height');
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
                const zIndex = QUIElements.getComputedZIndex(Container);
    
    Henning Leutz's avatar
    Henning Leutz committed
                // parse styles to fckedit styles
    
                let entry, styles = [];
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (!("styles" in data)) {
    
    Henning Leutz's avatar
    Henning Leutz committed
                    data.styles = [];
                }
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                for (i = 0, len = data.styles.length; i < len; i++) {
                    entry = data.styles[i];
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                    styles.push({
    
    Henning Leutz's avatar
    Henning Leutz committed
                        name      : entry.text,
                        element   : entry.element,
                        attributes: entry.attributes
    
    Henning Leutz's avatar
    Henning Leutz committed
                    });
    
                if (!("cssFiles" in data)) {
                    data.cssFiles = [];
                }
    
    
                data.cssFiles.push(
    
    Henning Leutz's avatar
    Henning Leutz committed
                    URL_OPT_DIR + 'quiqqer/ckeditor4/bin/defaultWysiwyg.css'
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
                data.cssFiles.push(
    
                    URL_OPT_DIR + 'quiqqer/core/bin/css/fonts/font-awesome.min.css'
    
                Settings.getConfig().then(function (config) {
    
                    let plugins = config.plugins;
    
                    plugins = self.$parseToolbarToPlugins(toolbar).concat(plugins);
                    plugins = plugins.unique();
    
    
                    const pluginPath = config.pluginPath;
                    const extraPlugins = plugins.join(",");
    
                    let i, len, pluginName;
    
    
                    for (i = 0, len = plugins.length; i < len; i++) {
                        pluginName = plugins[i];
    
    
                        if (!window.CKEDITOR.plugins.get(pluginName)) {
    
                            window.CKEDITOR.plugins.addExternal(
                                pluginName,
                                pluginPath + "/bin/" + pluginName + "/",
                                ""
                            );
    
                    window.CKEDITOR.replace(instance, {
    
                        skinName           : 'moono-lisa',
                        customConfig       : '',
                        language           : Locale.getCurrent(),
                        baseHref           : URL_DIR,
                        basePath           : URL_DIR,
                        height             : height,
                        width              : width,
                        toolbar            : toolbar,
                        allowedContent     : true,
    
                        extraAllowedContent: 'figure(*)[*]{*}; figcaption; iframe(*)[*]{*}; img(*)[*]{*}; script(*)[*]{*}; ins(*)[*]{*}',
    
                        protectedSource    : [/<ins[\s|\S]+?<\/ins>/g],
                        stylesSet          : styles,
                        contentsCss        : data.cssFiles || [],
                        bodyClass          : data.bodyClass,
    
                        // templates_files : [URL_OPT_DIR +'base/bin/pcsgEditorPlugins/templates.php'],
    
                        baseFloatZIndex: zIndex,
                        extraPlugins   : extraPlugins,
    
                        disableNativeSpellChecker: config.disableNativeSpellChecker,
                        autoGrow_onStartup       : false,
                        resize_enabled           : false
    
    
                    // because of font awesome
                    window.CKEDITOR.dtd.$removeEmpty.span = false;
    
                    window.CKEDITOR.dtd.$removeEmpty.i = false;
    
    Henning Leutz's avatar
    Henning Leutz committed
                });
    
    Henning Leutz's avatar
    Henning Leutz committed
            },
    
            /**
             * Editor onDestroy Event
             *
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {Object} Editor - controls/editors/Editor
    
    Henning Leutz's avatar
    Henning Leutz committed
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onDestroy: function (Editor) {
    
                const Instance = Editor.getInstance();
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
                if (!Instance || !(name in Instance)) {
                    return;
                }
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (window.CKEDITOR.instances[Instance.name]) {
                    try {
                        window.CKEDITOR.instances[Instance.name].destroy(true);
                    } catch (e) {
    
    Henning Leutz's avatar
    Henning Leutz committed
                    window.CKEDITOR.instances[Instance.name] = null;
                    delete window.CKEDITOR.instances[Instance.name];
    
    Henning Leutz's avatar
    Henning Leutz committed
                    window.CKEDITOR.removeListener(
                        'instanceReady',
                        this.$onInstanceReadyListener
                    );
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
            /**
             * event : instance ready
             * @param instance
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onInstanceReadyListener: function (instance) {
                if (typeof instance.editor === 'undefined' ||
                    typeof instance.editor.name === 'undefined' ||
                    instance.editor.name !== this.getAttribute('instancename')) {
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                // resize the editor
    
                const Container     = this.getContainer(),
                      containerSize = Container.getSize();
    
    Henning Leutz's avatar
    Henning Leutz committed
    
                // fckeditor resize, setHeight is sooooooooooo mysterious
    
    Henning Leutz's avatar
    Henning Leutz committed
                instance.editor.resize(containerSize.x, containerSize.y);
    
    Henning Leutz's avatar
    Henning Leutz committed
                this.setInstance(instance.editor);
    
                this.fireEvent('loaded', [
                    this,
                    instance.editor
                ]);
    
    
                instance.editor.focus();
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
            /**
             * event : on resize
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onResize: function () {
    
                const Container     = this.getContainer(),
                      Instance      = this.getInstance(),
                      containerSize = Container.getSize();
    
    Henning Leutz's avatar
    Henning Leutz committed
                Instance.resize(containerSize.x, containerSize.y);
    
    Henning Leutz's avatar
    Henning Leutz committed
            /**
             * Editor onSetContent Event
             *
             * @param {String} content
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {Object} Editor - controls/editors/Editor
    
    Henning Leutz's avatar
    Henning Leutz committed
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onSetContent: function (content, Editor) {
                if (Editor.getInstance()) {
                    Editor.getInstance().setData(content);
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
            /**
             * Editor onGetContent Event
             *
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {Object} Editor - controls/editors/Editor
    
    Henning Leutz's avatar
    Henning Leutz committed
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onGetContent: function (Editor) {
                if (Editor.getInstance()) {
                    Editor.setAttribute('content', Editor.getInstance().getData());
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
            /**
             * Set the focus to the editor
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            focus: function () {
                if (this.getInstance()) {
    
    Henning Leutz's avatar
    Henning Leutz committed
                    this.getInstance().focus();
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
            /**
             * Switch to source mode
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            switchToSource: function () {
                if (this.getInstance()) {
                    this.getInstance().setMode('source');
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
            /**
             * Switch to wysiwyg editor
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            switchToWYSIWYG: function () {
                if (this.getInstance()) {
                    this.getInstance().setMode('wysiwyg');
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
            /**
             * Hide the toolbar
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            hideToolbar: function () {
    
                const Toolbar = this.getElm().getElement('.cke_top');
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (Toolbar) {
                    Toolbar.setStyle('display', 'none');
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
            /**
             * show the toolbar
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            showToolbar: function () {
    
                const Toolbar = this.getElm().getElement('.cke_top');
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (Toolbar) {
                    Toolbar.setStyle('display', null);
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
    
            /**
             * Set the height of the instance
             *
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {Number} height
    
    Henning Leutz's avatar
    Henning Leutz committed
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            setHeight: function (height) {
                if (this.getInstance()) {
                    this.getInstance().resize(false, height);
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
    Henning Leutz's avatar
    Henning Leutz committed
                this.setAttribute('height', height);
    
    
            /**
             * Set the height of the instance
             *
             * @param {Number} width
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            setWidth: function (width) {
                if (this.getInstance()) {
                    this.getInstance().resize(width, false);
    
    Henning Leutz's avatar
    Henning Leutz committed
                this.setAttribute('width', width);
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
            /**
             * event : on add css
             *
             * @param {String} file - path to the css file
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {Object} Editor - controls/editor/Editor
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onAddCSS: function (file, Editor) {
    
                const Instance = this.getInstance();
    
    Henning Leutz's avatar
    Henning Leutz committed
                this.$cssFiles[file] = true;
    
    Henning Leutz's avatar
    Henning Leutz committed
                if (Instance) {
    
                    const Doc  = Editor.getDocument(),
                          Link = Doc.createElement('link');
    
    
                    Link.href = file;
    
                    Link.rel = "stylesheet";
    
                    Link.type = "text/css";
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                    Doc.head.appendChild(Link);
    
    Henning Leutz's avatar
    Henning Leutz committed
            /**
    
    Henning Leutz's avatar
    Henning Leutz committed
             * event : on Drop
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {Object} params
             */
    
    Henning Leutz's avatar
    Henning Leutz committed
            $onDrop: function (params) {
    
                const Instance = this.getInstance();
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
                for (let i = 0, len = params.length; i < len; i++) {
    
    Henning Leutz's avatar
    Henning Leutz committed
                    Instance.insertHtml("<img src=" + params[i].url + " />");
    
    Henning Leutz's avatar
    Henning Leutz committed
                }
    
            /**
             * Generate the extra plugins option in dependence of the toolbar
             * @param toolbar
             *
             * @return Array
             */
            $parseToolbarToPlugins: function (toolbar) {
    
                let extra      = [],
    
                if (typeOf(toolbar) === 'array') {
    
                for (let i = 0, len = buttonList.length; i < len; i++) {
    
                    switch (buttonList[i]) {
                        case 'Templates':
                            extra.push('templates');
                            break;
    
                        case 'Find':
                        case 'Replace':
                            extra.push('find');
                            break;
    
                        case 'SelectAll':
                            extra.push('selectall');
                            break;
    
                        case 'Form':
                        case 'Checkbox':
                        case 'Radio':
                        case 'TextField':
                        case 'Textarea':
                        case 'Select':
                        case 'Button':
                        case 'ImageButton':
                        case 'HiddenField':
                            extra.push('forms');
                            break;
    
                        case 'CreateDiv':
                            extra.push('div');
                            break;
    
                        case 'JustifyLeft':
                        case 'JustifyCenter':
                        case 'JustifyRight':
                        case 'JustifyBlock':
                            extra.push('justify');
                            break;
    
                        case 'BidiLtr':
                        case 'BidiRtl':
                            extra.push('bidi');
                            break;
    
                        case 'Language':
                            extra.push('language');
                            break;
    
                        case 'Link':
                        case 'Unlink':
                        case 'Anchor':
                            extra.push('link');
                            break;
    
                        case 'Flash':
                            extra.push('flash');
                            break;
    
                        case 'Smiley':
                            extra.push('smiley');
                            break;
    
                        case 'PageBreak':
                            extra.push('pagebreak');
                            break;
    
                        case 'Iframe':
                            extra.push('iframe');
                            break;
    
                        case 'Font':
                        case 'FontSize':
                            extra.push('font');
                            break;
    
                        case 'BGColor':
                        case 'TextColor':
                            extra.push('colorbutton');
                            break;
    
                        case 'Code':
                            extra.push('codetag');
                            break;
                        case 'Image':
    
                            break;
                        case 'Zoom':
                            extra.push('zoom');
                            break;
                        case 'Youtube':
                            extra.push('youtube');
                            break;
                        case 'Videodetector':
                            extra.push('videodetector');
                            break;
                        case 'Tweetabletext':
                            extra.push('tweetabletext');
                            break;
                        case 'Createtoken':
                            extra.push('token');
                            break;
                        case 'TransformTextSwitcher':
                        case 'TransformTextToLowercase':
                        case 'TransformTextToUppercase':
                        case 'TransformTextCapitalize':
                            extra.push('texttransform');
                            break;
                        case 't2s_button':
                            extra.push('text2speech');
                            break;
                        case 'Symbol':
                            extra.push('symbol');
                            break;
                        case 'pre':
                            extra.push('pre');
                            break;
                        case 'pbckeditor':
                            extra.push('pbckeditor');
                            break;
                        case 'page2images':
                            extra.push('page2images');
                            break;
                        case 'Markdown':
                            extra.push('markdown');
                            break;
                        case 'Loremipsum':
                            extra.push('loremipsum');
                            break;
                        case 'inserthtml4x':
                            extra.push('inserthtml4x');
                            break;
                        case 'Html5Video':
                            extra.push('html5video');
                            break;
                        case 'Html5Audio':
                            extra.push('html5audio');
                            break;
                        case 'EqnEditor':
                            extra.push('eqneditor');
                            break;
                        case 'cssanim':
                            extra.push('cssanim');
                            break;
                        case 'WebSpeechEnabled':
                        case 'WebSpeechSettings':
                            extra.push('ckwebspeech');
                            break;
                        case 'base64image':
                            extra.push('base64image');
                            break;
                        case 'AutoCorrect':
                            extra.push('autocorrect');
                            break;
    
            /**
             * edit the image dialog
             *
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {DOMEvent} ev - CKEvent
             * @return {DOMEvent} ev (CKEvent)
    
    Henning Leutz's avatar
    Henning Leutz committed
            $imageDialog: function (ev) {
    
                // Take the dialog name and its definition from the event data.
    
                const self             = this,
                      dialogName       = ev.data.name,
                      dialogDefinition = ev.data.definition;
    
    
                /**
                 * Image dialog
                 */
    
                const oldOnShow = dialogDefinition.onShow;
    
                // Get a reference to the "Link Info" tab.
    
    Henning Leutz's avatar
    Henning Leutz committed
                dialogDefinition.onShow = function () {
    
                    let Button;
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                    oldOnShow.bind(this)();
    
                    // image button
    
                    const UrlGroup = this.getContentElement('info', 'txtUrl')
                                         .getElement().$;
    
                    const UrlInput = UrlGroup.getElement('input[type="text"]');
    
                    /*
                    let HeightInput = this.getContentElement('info', 'txtHeight')
    
                                          .getElement().$
                                          .getElement('input[type="text"]');
    
                    const WidthInput = this.getContentElement('info', 'txtWidth')
                                           .getElement().$
                                           .getElement('input[type="text"]');
    
                    UrlGroup.getElement('label').setStyles({
                        'float': 'left',
                        'width': '100%'
                    });
    
    
    Henning Leutz's avatar
    Henning Leutz committed
                    if (!UrlGroup.getElement('.qui-button')) {
    
    Henning Leutz's avatar
    Henning Leutz committed
                        Button = new Element('button', {
    
    Henning Leutz's avatar
    Henning Leutz committed
                            'class': 'qui-button',
    
    Henning Leutz's avatar
    Henning Leutz committed
                            html   : '<span class="fa fa-picture-o"></span>',
    
    Henning Leutz's avatar
    Henning Leutz committed
                            events : {
                                click: function () {
    
                                    let fileId = false;
    
                                    if (UrlInput.value !== '') {
                                        let urlParams = QUIStringUtils.getUrlParams(UrlInput.value);
    
                                        if (typeof urlParams.project !== 'undefined' &&
                                            typeof urlParams.id !== 'undefined' &&
                                            urlParams.project === self.$Project.getName()) {
    
                                            fileId = urlParams.id;
                                        }
                                    }
    
    
                                    self.openMedia({
    
                                        fileid: fileId,
    
    Henning Leutz's avatar
    Henning Leutz committed
                                        events: {
                                            onSubmit: function (Win, data) {
    
                                                UrlInput.value = data.url;
    
    Henning Leutz's avatar
    Henning Leutz committed
                                                Ajax.get('ajax_media_details', function (fileData) {
                                                    if (fileData.image_height > 500 ||
                                                        fileData.image_width > 500) {
    
                                                        const result = QUIMath.resizeVar(
    
                                                            fileData.image_height,
                                                            fileData.image_width,
                                                            500
                                                        );
    
                                                        // es darf keine image height gesetzt
                                                        // da das Bild sonst im mobile view sich verzieht
                                                        // HeightInput.value = result.var1;
                                                        WidthInput.value = result.var2;
    
    Henning Leutz's avatar
    Henning Leutz committed
                                                    } else {
    
                                                        // HeightInput.value = fileData.image_height;
                                                        WidthInput.value = fileData.image_width;
    
                                                    // if (!fileData.image_height) {
                                                    //     HeightInput.value = '';
                                                    // }
    
    
                                                    if (!fileData.image_width) {
                                                        WidthInput.value = '';
                                                    }
    
    Henning Leutz's avatar
    Henning Leutz committed
                                                    project: data.project,
                                                    fileid : data.id
    
    Henning Leutz's avatar
    Henning Leutz committed
                        }).inject(UrlGroup);
    
    
                        Button.getPrevious().setStyles({
    
    Henning Leutz's avatar
    Henning Leutz committed
                            'float': 'left'
    
                    const LinkGroup = this.getContentElement('Link', 'txtUrl').getElement().$;
    
    Henning Leutz's avatar
    Henning Leutz committed
                    if (LinkGroup.getElement('.qui-button')) {
    
                    const LinkInput = LinkGroup.getElement('input[type="text"]');
    
    Henning Leutz's avatar
    Henning Leutz committed
                    Button = new Element('button', {
    
    Henning Leutz's avatar
    Henning Leutz committed
                        'class': 'qui-button',
    
    Henning Leutz's avatar
    Henning Leutz committed
                        html   : '<span class="fa fa-home"></span>',
    
    Henning Leutz's avatar
    Henning Leutz committed
                        events : {
                            click: function () {
    
                                self.openProject({
    
    Henning Leutz's avatar
    Henning Leutz committed
                                    events: {
                                        onSubmit: function (Win, data) {
                                            LinkInput.value = data.urls[0];
    
    Henning Leutz's avatar
    Henning Leutz committed
                    }).inject(LinkGroup);
    
                    const Prev = Button.getPrevious();
    
    
                    Prev.setStyles({
    
    Henning Leutz's avatar
    Henning Leutz committed
                        'float': 'left',
                        width  : Prev.getSize().x - 100
    
    Henning Leutz's avatar
    Henning Leutz committed
                };
    
    
                return ev;
    
            $image2Dialog: function (ev) {
                // Take the dialog name and its definition from the event data.
    
                const self             = this,
                      dialogName       = ev.data.name,
                      dialogDefinition = ev.data.definition;
    
    
                /**
                 * Image dialog
                 */
                if (dialogName !== 'image2') {
                    return ev;
                }
    
    
                const oldOnShow = dialogDefinition.onShow;
    
    
                // Get a reference to the "Link Info" tab.
                dialogDefinition.onShow = function () {
                    oldOnShow.bind(this)();
    
                    // image button
    
                    const UrlGroup = this.getContentElement('info', 'src')
                                         .getElement().$;
    
                    /*
                    let HeightInput = this.getContentElement('info', 'height')
    
                                          .getElement().$
                                          .getElement('input[type="text"]');
    
                    const WidthInput = this.getContentElement('info', 'width')
                                           .getElement().$
                                           .getElement('input[type="text"]');
    
                    const UrlInput = UrlGroup.getElement('input[type="text"]');
    
    
                    if (!UrlGroup.getElement('.qui-button')) {
                        new Element('button', {
                            'class': 'qui-button',
                            html   : '<span class="fa fa-picture-o"></span>',
                            styles : {
                                margin: 0
                            },
                            events : {
                                click: function () {
    
                                    let fileId = false;
    
                                    if (UrlInput.value !== '') {
                                        let urlParams = QUIStringUtils.getUrlParams(UrlInput.value);
    
                                        if (typeof urlParams.project !== 'undefined' &&
                                            typeof urlParams.id !== 'undefined' &&
                                            urlParams.project === self.$Project.getName()) {
    
                                            fileId = urlParams.id;
                                        }
                                    }
    
    
                                    self.openMedia({
    
                                        fileid: fileId,
    
                                        events: {
                                            onSubmit: function (Win, data) {
                                                UrlInput.value = data.url;
    
                                                Ajax.get('ajax_media_details', function (fileData) {
                                                    if (fileData.image_height > 500 ||
                                                        fileData.image_width > 500) {
    
                                                        const result = QUIMath.resizeVar(
    
                                                            fileData.image_height,
                                                            fileData.image_width,
                                                            500
                                                        );
                                                        // es darf keine image height gesetzt
                                                        // da das Bild sonst im mobile view sich verzieht
                                                        // HeightInput.value = result.var1;
                                                        WidthInput.value = result.var2;
                                                    } else {
                                                        // HeightInput.value = fileData.image_height;
                                                        WidthInput.value = fileData.image_width;
                                                    }
    
                                                    // if (!fileData.image_height) {
                                                    //     HeightInput.value = '';
                                                    // }
    
                                                    if (!fileData.image_width) {
                                                        WidthInput.value = '';
                                                    }
                                                }, {
                                                    project: data.project,
                                                    fileid : data.id
                                                });
                                            }
                                        }
                                    });
                                }
                            }
                        }).inject(UrlGroup);
    
                        UrlInput.setStyle('float', 'left');
                        UrlInput.setStyle('width', 'calc(100% - 35px)');
                        UrlInput.setStyle('lineHeight', 20);
                    }
    
                    console.log(UrlInput);
                };
            },
    
    
            /**
             * edit the link dialog
             *
    
    Henning Leutz's avatar
    Henning Leutz committed
             * @param {DOMEvent} ev - CKEvent
             * @return {DOMEvent} ev - CKEvent
    
    Henning Leutz's avatar
    Henning Leutz committed
            $linkDialog: function (ev) {
    
                // Take the dialog name and its definition from the event data.
    
                const dialogName = ev.data.name;
    
                 * Link dialog
    
                if (dialogName !== 'link') {
    
                // remove protokoll dropdown
    
    Henning Leutz's avatar
    Henning Leutz committed
                //dialogDefinition.getContents( 'info' ).remove( 'protocol');
    
    
                // remove protokoll at insertion
    
                let Protokoll;
    
    Henning Leutz's avatar
    Henning Leutz committed
    
    
                const dialogDefinition = ev.data.definition,
                      Url              = dialogDefinition.getContents('info').get('url'),
                      orgCommit        = Url.commit;
    
    Henning Leutz's avatar
    Henning Leutz committed
                Url.commit = function (data) {
                    orgCommit.call(this, data);
    
    Henning Leutz's avatar
    Henning Leutz committed
                    Protokoll = dialogDefinition.dialog
    
                                                .getContentElement('info', 'protocol')
                                                .getElement()
                                                .$
                                                .getElement('select');
    
                    data.url = {
    
    Henning Leutz's avatar
    Henning Leutz committed
                        protocol: Protokoll.value,
                        url     : this.getValue()
    
                const self      = this,
                      oldOnShow = dialogDefinition.onShow;
    
                // Get a reference to the "Link Info" tab.
    
    Henning Leutz's avatar
    Henning Leutz committed
                dialogDefinition.onShow = function () {
                    oldOnShow.bind(this)();
    
                    const UrlGroup = this.getContentElement('info', 'url')
                                         .getElement()
    
    Henning Leutz's avatar
    Henning Leutz committed
                        .$;
    
    Henning Leutz's avatar
    Henning Leutz committed
                    if (UrlGroup.getElement('.qui-button')) {
    
                    const UrlInput = UrlGroup.getElement('input[type="text"]');
    
    Henning Leutz's avatar
    Henning Leutz committed
                    Protokoll = this.getContentElement('info', 'protocol')
    
    
                    UrlInput.setStyles({
    
    Henning Leutz's avatar
    Henning Leutz committed
                        'float': 'left',
                        width  : UrlInput.getSize().x - 100
    
                    const Links = new Element('button', {
    
    Henning Leutz's avatar
    Henning Leutz committed
                        'class': 'qui-button',
    
    Henning Leutz's avatar
    Henning Leutz committed
                        html   : '<span class="fa fa-home"></span>',
    
    Henning Leutz's avatar
    Henning Leutz committed
                        events : {
                            click: function () {
    
                                self.openProject({
    
    Henning Leutz's avatar
    Henning Leutz committed
                                    events: {
                                        onSubmit: function (Win, data) {
    
                                            UrlInput.value = data.urls[0];
    
    Henning Leutz's avatar
    Henning Leutz committed
                                            Protokoll.value = '';