Merge pull request chamilo#5703 from christianbeeznest/ofaj-21876-2

Internal: Improve font between TinyMCE editor and page view - refs BT#21876
AngelFQC · Aug 2, 2024 · 09ca69d · 09ca69d
2 parents 84c71eb + 6dbdfb8
commit 09ca69d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 26 deletions.
diff --git a/assets/css/editor_content.css b/assets/css/editor_content.css
@@ -25,6 +25,11 @@ Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
     border-collapse: collapse !important;
 }
 
+.tiny-content td {
+    font-size: 14px;
+    line-height: 16px;
+}
+
 .tiny-content td, .tiny-content th {
     padding: 5px !important;
 }
@@ -40,6 +45,14 @@ Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
     font-weight: bold !important;
 }
 
+.tiny-content .font-arial {
+    font-family: Arial, sans-serif;
+}
+
+.tiny-content .font-times-new-roman {
+    font-family: 'Times New Roman', Times, serif;
+}
+
 /* Hack for show Bootstrap alerts in CKEditor' style select */
 .cke_panel_listItem a > :first-child {
     margin-bottom: 0;

diff --git a/assets/vue/components/basecomponents/BaseTinyEditor.vue b/assets/vue/components/basecomponents/BaseTinyEditor.vue
@@ -100,7 +100,7 @@ const toolbarTextDirection = "ltr rtl"
 
 const defaultEditorConfig = {
   skin: false,
-  content_css: false,
+  content_css: ['/build/css/editor_content.css'],
   branding: false,
   relative_urls: false,
   height: 500,
@@ -132,31 +132,35 @@ const defaultEditorConfig = {
     "visualblocks",
     "wordcount",
   ],
-  toolbar: [
-    toolbarUndo,
-    toolbarFormatText,
-    toolbarInsertMedia,
-    toolbarFontConfig,
-    toolbarAlign,
-    toolbarIndent,
-    toolbarList,
-    toolbarColor,
-    toolbarPageBreak,
-    toolbarSpecialSymbols,
-    toolbarOther,
-    toolbarCode,
-    toolbarTextDirection
-  ].join(" | "),
-  file_picker_callback: filePickerCallback,
-  content_style: ".tiny-content { font-family: Arial, sans-serif; font-size: 14px; }",
-  body_class: 'tiny-content',
-  setup: (editor) => {
-    editor.on('init', () => {
-      const body = editor.getBody();
-      body.classList.add('tiny-content');
-    });
-  }
-}
+  toolbar:
+    toolbarUndo +
+    " | " +
+    toolbarFormatText +
+    " | " +
+    toolbarInsertMedia +
+    " | " +
+    toolbarFontConfig +
+    " | " +
+    toolbarAlign +
+    " | " +
+    toolbarIndent +
+    " | " +
+    toolbarList +
+    " | " +
+    toolbarColor +
+    " | " +
+    toolbarPageBreak +
+    " | " +
+    toolbarSpecialSymbols +
+    " | " +
+    toolbarOther +
+    " | " +
+    toolbarCode +
+    " | " +
+    toolbarTextDirection,
+  content_style: ".tiny-content { font-family: Arial, sans-serif; }",
+  body_class: 'tiny-content'
+};
 
 if (props.fullPage) {
   defaultEditorConfig.plugins.push("fullpage")