Improved handling of images and image attachments

diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
index d09207e764534dfb299e1e0fed919b5a17d58c57..59061926687dce639d7ca263acabe371728f0580 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
@@ -688,8 +688,28 @@ RedactorPlugins.wbbcode = function() {
                                
                        // [img]
                        data = data.replace(/\[img\]([^"]+?)\[\/img\]/gi,'<img src="$1" />');
-                       data = data.replace(/\[img='?([^"]*?)'?,'?(left|right)'?\]\[\/img\]/gi,'<img src="$1" style="float: $2" />');
-                       data = data.replace(/\[img='?([^"]*?)'?,'?(left|right|none)'?,'?(\d+)'?\]\[\/img\]/gi, '<img src="$1" style="float: $2; width: $3px" />');
+                       data = data.replace(/\[img='?([^"]*?)'?,'?(left|right)'?\]\[\/img\]/gi, function(match, src, float, width) {
+                               var $style = 'float: ' + float + ';';
+                               if (float === 'left') {
+                                       $style += 'margin: 0 15px 7px 0';
+                               }
+                               else {
+                                       $style += 'margin: 0 0 7px 15px';
+                               }
+                               
+                               return '<img src="' + src + '" style="' + $style + '" />';
+                       });
+                       data = data.replace(/\[img='?([^"]*?)'?,'?(left|right|none)'?,'?(\d+)'?\]\[\/img\]/gi, function(match, src, float, width) {
+                               var $style = 'float: ' + float + '; width: ' + width + 'px';
+                               if (float === 'left') {
+                                       $style += 'margin: 0 15px 7px 0';
+                               }
+                               else {
+                                       $style += 'margin: 0 0 7px 15px';
+                               }
+                               
+                               return '<img src="' + src + '" style="' + $style + '" />';
+                       });
                        data = data.replace(/\[img='?([^"]*?)'?\]\[\/img\]/gi,'<img src="$1" />');
                        
                        // [size]
@@ -795,6 +815,13 @@ RedactorPlugins.wbbcode = function() {
                                                var $style = '';
                                                if (alignment === 'left' || alignment === 'right') {
                                                        $style = 'float: ' + alignment + ';';
+                                                       
+                                                       if (alignment === 'left') {
+                                                               $style += 'margin: 0 15px 7px 0';
+                                                       }
+                                                       else {
+                                                               $style += 'margin: 0 0 7px 15px';
+                                                       }
                                                }
                                                
                                                $style = ' style="' + $style + '"';
@@ -812,6 +839,13 @@ RedactorPlugins.wbbcode = function() {
                                                var $style = 'width: ' + width + 'px; max-height: ' + $imageAttachments[attachmentID].height + 'px; max-width: ' + $imageAttachments[attachmentID].width + 'px;';
                                                if (alignment === 'left' || alignment === 'right') {
                                                        $style += 'float: ' + alignment + ';';
+                                                       
+                                                       if (alignment === 'left') {
+                                                               $style += 'margin: 0 15px 7px 0';
+                                                       }
+                                                       else {
+                                                               $style += 'margin: 0 0 7px 15px';
+                                                       }
                                                }
                                                
                                                $style = ' style="' + $style + '"';

diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js
index b1f0afb63d9257cd70250d85a073177ecbff5996..fafd67b5d4e5c2abcb1a7ad607f0f0fa97b1e4c8 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js
@@ -440,12 +440,21 @@ RedactorPlugins.wmonkeypatch = function() {
                        }).bind(this);
                        
                        // image.update
+                       var $moveImage = (function(image) {
+                               var $parent = image.parent();
+                               image = image.detach();
+                               image.prependTo($parent);
+                               
+                               this.caret.setAfter(image);
+                       }).bind(this);
+                       
                        this.image.update = (function(image) {
                                this.image.hideResize();
                                this.buffer.set();
                                
                                image.attr('src', $('#redactor-image-link-source').val());
                                this.image.setFloating(image);
+                               $moveImage(image);
                                
                                this.modal.close();
                                this.observe.images();
@@ -816,11 +825,11 @@ RedactorPlugins.wmonkeypatch = function() {
                                '<fieldset id="redactor-modal-link">'
                                        + '<dl>'
                                                + '<dt><label for="redactor-link-url" />URL</label></dt>' /* TODO: use a phrase instead of hardcoding it! */
-                                               + '<dd><input type="url" id="redactor-link-url" /></dd>'
+                                               + '<dd><input type="url" id="redactor-link-url" class="long" /></dd>'
                                        + '</dl>'
                                        + '<dl>'
                                                + '<dt><label for="redactor-link-url-text">' + this.lang.get('text') + '</label></dt>'
-                                               + '<dd><input type="text" id="redactor-link-url-text" /></dd>'
+                                               + '<dd><input type="text" id="redactor-link-url-text" class="long" /></dd>'
                                        + '</dl>'
                                + '</fieldset>';
                        

diff --git a/wcfsetup/install/files/style/bbcode.less b/wcfsetup/install/files/style/bbcode.less
index 25935340dc37371cb124daae5c77e07d939adf64..a0db3e11ede0a21f7f469e627f2e57576711f8a4 100644 (file)
--- a/wcfsetup/install/files/style/bbcode.less
+++ b/wcfsetup/install/files/style/bbcode.less
@@ -225,6 +225,7 @@ html[dir='rtl'] {
                background-color: @wcfContentBackgroundColor;
                min-height: 28px;
                margin-bottom: @wcfGapTiny;
+               overflow: hidden;
                position: relative;
                
                &.containerPadding {

diff --git a/wcfsetup/install/files/style/redactor.less b/wcfsetup/install/files/style/redactor.less
index 355fd75c99e1bbff86b506f1b3186af851793a1e..4ca8d116e7ac239a7836f4e345c4eb1721a9f9af 100644 (file)
--- a/wcfsetup/install/files/style/redactor.less
+++ b/wcfsetup/install/files/style/redactor.less
@@ -131,6 +131,7 @@
        }
        
        img {
+               border: 1px solid transparent;
                max-width: 100%;
        }
        
@@ -257,6 +258,7 @@
        position: relative;
        
        > img {
+               border-width: 0;
                opacity: .5;
        }
 }