Issue #4027: fixed default alignment for images in richtext

images are now aligned left by default when inserted into the richtext editor
RotherOSS · Jan 27, 2025 · fac420d · fac420d
1 parent f0df3e4
commit fac420d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/var/httpd/htdocs/js/Core.UI.RichTextEditor.js b/var/httpd/htdocs/js/Core.UI.RichTextEditor.js
@@ -245,6 +245,15 @@ Core.UI.RichTextEditor = (function (TargetNS) {
                         icon: 'custom'
                     }
                 ],
+                styles: {
+                    options: [
+                        'alignLeft', 'alignCenter', 'alignRight', 'alignBlockRight',
+                        {
+                            name: 'alignBlockLeft',
+                            isDefault: true
+                        }
+                    ]
+                },
                 toolbar: [
                     {
                         name: 'imageStyle:imagePositioningDropdown',
@@ -256,12 +265,12 @@ Core.UI.RichTextEditor = (function (TargetNS) {
                             'imageStyle:alignBlockLeft',
                             'imageStyle:alignBlockRight'
                         ],
-                        defaultItem: 'imageStyle:alignCenter'
+                        defaultItem: 'imageStyle:alignBlockLeft'
                     },
                     'resizeImage'
                 ],
                 insert: {
-                    type: 'auto',
+                    type: 'ImageBlock',
                     integrations: Integrations
                 }
             },

diff --git a/var/httpd/htdocs/skins/Agent/default/css/RichTextArticleContent.css b/var/httpd/htdocs/skins/Agent/default/css/RichTextArticleContent.css
@@ -61,3 +61,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 {
     padding: 0 50px;
 }
+
+/* default image style */
+.ck-content figure.image:not(   .image-style-align-center, 
+                                .image-style-block-align-right, 
+                                .image-style-align-left, 
+                                .image-style-align-right) 
+{
+    max-width: calc(100% - var(--ck-image-style-spacing));
+    margin-left: 0;
+    margin-right: auto
+}
diff --git a/var/httpd/htdocs/skins/Customer/default/css/RichTextArticleContent.css b/var/httpd/htdocs/skins/Customer/default/css/RichTextArticleContent.css
@@ -18,7 +18,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
     text-wrap: wrap;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
-    line-height: 1.5;
+    line-height: 1.3;
     color: #00023c;
 }
 
@@ -54,11 +54,23 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 .ck-content blockquote {
     font-style: normal !important;
     border-left: solid #000099 1.5pt !important; 
-    padding: 0cm 0cm 0cm 4pt !important;    
+    padding: 0cm 0cm 0cm 4pt !important;
+    margin: 0;
 }
 
 .ck-content ul,
 .ck-content ol  
 {
      padding: 0 50px;
 }
+
+/* default image style */
+.ck-content figure.image:not(   .image-style-align-center, 
+                                .image-style-block-align-right, 
+                                .image-style-align-left, 
+                                .image-style-align-right) 
+{
+    max-width: calc(100% - var(--ck-image-style-spacing));
+    margin-left: 0;
+    margin-right: auto
+}