diff --git a/bin/Editor.js b/bin/Editor.js index f4d6990d7d4a517f4de21a01e74c92c4c58e000c..c5c48e20d4f1b98814a113f200a82591798c2946 100644 --- a/bin/Editor.js +++ b/bin/Editor.js @@ -97,6 +97,7 @@ define('package/quiqqer/ckeditor4/bin/Editor', [ var Editor = QUI.Controls.getById(ev.editor.name); Editor.$imageDialog(ev); + Editor.$image2Dialog(ev); Editor.$linkDialog(ev); Editor.$html5AudioDialog(ev); Editor.$html5VideoDialog(ev); @@ -256,7 +257,7 @@ define('package/quiqqer/ckeditor4/bin/Editor', [ width : width, toolbar : toolbar, allowedContent : true, - extraAllowedContent: 'iframe(*)[*]{*}; img(*)[*]{*}; script(*)[*]{*}; ins(*)[*]{*}', + extraAllowedContent: 'figure(*)[*]{*}; figcaption; iframe(*)[*]{*}; img(*)[*]{*}; script(*)[*]{*}; ins(*)[*]{*}', protectedSource : [/<ins[\s|\S]+?<\/ins>/g], stylesSet : styles, contentsCss : data.cssFiles || [], @@ -787,6 +788,102 @@ define('package/quiqqer/ckeditor4/bin/Editor', [ return ev; }, + $image2Dialog: function (ev) { + // Take the dialog name and its definition from the event data. + var self = this, + dialogName = ev.data.name, + dialogDefinition = ev.data.definition; + + /** + * Image dialog + */ + if (dialogName !== 'image2') { + return ev; + } + + var oldOnShow = dialogDefinition.onShow; + + // Get a reference to the "Link Info" tab. + dialogDefinition.onShow = function () { + var Button; + + oldOnShow.bind(this)(); + console.log(this); + // image button + var UrlGroup = this.getContentElement('info', 'src') + .getElement().$; + + var HeightInput = this.getContentElement('info', 'height') + .getElement().$ + .getElement('input[type="text"]'); + + var WidthInput = this.getContentElement('info', 'width') + .getElement().$ + .getElement('input[type="text"]'); + + + console.log('#############'); + console.log(UrlGroup); + var 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 () { + self.openMedia({ + 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) { + var 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 * @@ -800,7 +897,7 @@ define('package/quiqqer/ckeditor4/bin/Editor', [ /** * Link dialog */ - if (dialogName != 'link') { + if (dialogName !== 'link') { return ev; } diff --git a/composer.json b/composer.json index 6893b6b1ac549b815691f55e8118759c83557b6f..e713ca11411851111d2f5d397d011e3a273bfe97 100644 --- a/composer.json +++ b/composer.json @@ -17,7 +17,7 @@ "require": { "quiqqer\/quiqqer": "*", "quiqqer\/qui": ">=1|*@dev", - "ckeditor\/ckeditor": "4.10.*" + "ckeditor\/ckeditor": "4.16.*" }, "autoload": { "psr-4": { diff --git a/plugins/activePlugins.json b/plugins/activePlugins.json index d9cf99bca2880b35661f5fc0294996603dfafeb4..65fb6e42e5719a7e2fc5276bd1d7c5854b70d220 100644 --- a/plugins/activePlugins.json +++ b/plugins/activePlugins.json @@ -18,7 +18,7 @@ "html5video", "iframe", "iframedialog", - "image", + "image2", "indentblock", "justify", "language",