Issue #4027: improved richtext styling

- fixed unneccessary empty lines being added - fixed table alignments - set default alignment for table and image to block center - stop ckeditor from filtering out harmless html tags
RotherOSS · Jan 14, 2025 · 264553e · 264553e
1 parent 1d26939
commit 264553e
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 31 deletions.
diff --git a/var/httpd/htdocs/js/Core.UI.RichTextEditor.js b/var/httpd/htdocs/js/Core.UI.RichTextEditor.js
@@ -183,6 +183,16 @@ Core.UI.RichTextEditor = (function (TargetNS) {
                 ui: UserLanguage,
                 content: UserLanguage
             },
+            htmlSupport: {
+                allow: [
+                    {name: 'section'}, 
+                    {name: 'article'}, 
+                    {name: 'div'}, 
+                    {name: 'span'}, 
+                    {name: 'cite'},
+                    {name: 'style'}
+                ]
+            },
             image: {
                 resizeUnit: 'px',
                 resizeOptions: [
@@ -210,7 +220,7 @@ Core.UI.RichTextEditor = (function (TargetNS) {
                             'imageStyle:alignBlockLeft',
                             'imageStyle:alignBlockRight'
                         ],
-                        defaultItem: 'imageStyle:alignBlockLeft'
+                        defaultItem: 'imageStyle:alignCenter'
                     },
                     'resizeImage'
                 ],
@@ -228,7 +238,7 @@ Core.UI.RichTextEditor = (function (TargetNS) {
                 },
                 tableProperties: {
                     defaultProperties: {
-                        alignment: 'left',
+                        alignment: 'center',
                     }
                 },
                 contentToolbar: [

diff --git a/var/httpd/htdocs/skins/Agent/default/css/CKEditorCustomStyles.css b/var/httpd/htdocs/skins/Agent/default/css/CKEditorCustomStyles.css
@@ -57,3 +57,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
     width: 100% !important;
     height: 100% !important;
 }
+
+.ck-content.ck-editor__editable_inline {
+    padding: 15px;
+}
diff --git a/var/httpd/htdocs/skins/Agent/default/css/RichTextArticleContent.css b/var/httpd/htdocs/skins/Agent/default/css/RichTextArticleContent.css
@@ -13,47 +13,42 @@ You should have received a copy of the GNU General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
 
-.ck-content {
+.ck-content,
+.ck-content * {
     text-wrap: wrap;
-    white-space: pre-wrap;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 12px;
     line-height: 1.6;
 }
 
-.ck-content.ck-editor__editable_inline {
-    padding: 15px;
-}
-
 .ck-content figure.table {
-    float: left;
     margin: 0 0 0 0;
 }
 
 .ck-content p {
-    margin-top: 0.8em;
-    margin-bottom: 0.8em;
+    margin-top: 0px;
+    margin-bottom: 0px;
 }
 
 .ck-content h1 {
     font-size: 2em;
- } 
+} 
 
 .ck-content h2 {
     font-size: 1.5em;
- }
+}
 
 .ck-content h3 {
     font-size: 1.17em;
- }
+}
 
 .ck-content h5 {
     font-size: 0.83em;
- } 
+} 
 
 .ck-content h6 {
     font-size: 0.67em;
- } 
+} 
 
 .ck-content blockquote {
     font-style: normal !important;

diff --git a/var/httpd/htdocs/skins/Customer/default/css/CKEditorCustomStyles.css b/var/httpd/htdocs/skins/Customer/default/css/CKEditorCustomStyles.css
@@ -87,3 +87,7 @@ textarea.Readonly ~ .ck .ck-editor__editable {
     box-shadow: inset 0px 0px 8px 2px #bfbfce;
     box-shadow: inset 0px 0px 8px 2px var(--colBGDark);
 }
+
+.ck-content.ck-editor__editable_inline {
+    padding: 15px;
+}
diff --git a/var/httpd/htdocs/skins/Customer/default/css/RichTextArticleContent.css b/var/httpd/htdocs/skins/Customer/default/css/RichTextArticleContent.css
@@ -13,48 +13,43 @@ You should have received a copy of the GNU General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
 
-.ck-content {
+.ck-content,
+.ck-content * {
     text-wrap: wrap;
-    white-space: pre-wrap;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
     line-height: 1.5;
     color: #00023c;
 }
 
-.ck-content.ck-editor__editable_inline {
-    padding: 15px;
-}
-
 .ck-content figure.table {
-    float: left;
     margin: 0 0 0 0;
 }
 
 .ck-content p {
-    margin-top: 0.8em;
-    margin-bottom: 0.8em;
- }
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
 
 .ck-content h1 {
     font-size: 2em;
- } 
+} 
 
 .ck-content h2 {
     font-size: 1.5em;
- }
+}
 
 .ck-content h3 {
     font-size: 1.17em;
- }
+}
 
 .ck-content h5 {
     font-size: 0.83em;
- } 
+} 
 
 .ck-content h6 {
     font-size: 0.67em;
- }  
+}  
 
 .ck-content blockquote {
     font-style: normal !important;