Merge pull request #5696 from christianbeeznest/ofaj-21876-1

Internal: Add CSS reset for TinyMCE editor content - refs BT#21876

Author: NicoDucou

assets/css/app.scss

@@ -9,6 +9,7 @@
 //@import '~jquery-ui/themes/base/all.css';
 
 @import "tinymce/skins/ui/oxide/skin.css";
+@import './editor_content.css';
 
 @layer utilities {
   .border-gray-300 {

assets/css/editor_content.css

@@ -2,6 +2,44 @@
 Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
 */
 
+/* Reset styles */
+.tiny-content {
+    all: initial;
+    display: block;
+    width: 100%;
+}
+
+.tiny-content * {
+    box-sizing: border-box;
+}
+
+/* Specific styles for TinyMCE content */
+.tiny-content img {
+    display: block !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.tiny-content table {
+    margin: auto !important;
+    border-collapse: collapse !important;
+}
+
+.tiny-content td, .tiny-content th {
+    padding: 5px !important;
+}
+
+.tiny-content a {
+    color: blue !important;
+    text-decoration: underline !important;
+}
+
+.tiny-content caption {
+    caption-side: top !important;
+    text-align: center !important;
+    font-weight: bold !important;
+}
+
 /* Hack for show Bootstrap alerts in CKEditor' style select */
 .cke_panel_listItem a > :first-child {
     margin-bottom: 0;

assets/vue/components/basecomponents/BaseTinyEditor.vue

@@ -21,17 +21,14 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import TinyEditor from "../../components/Editor"
 import { useRoute, useRouter } from "vue-router"
 import { useCidReqStore } from "../../store/cidReq"
 import { storeToRefs } from "pinia"
 import { useSecurityStore } from "../../store/securityStore"
 import FloatLabel from "primevue/floatlabel"
 
-//import contentUiCss from "css-loader!tinymce/skins/ui/oxide/content.css"
-//import contentCss from "css-loader!tinymce/skins/content/default/content.css"
-
 const modelValue = defineModel({
   type: String,
   required: true,
@@ -104,7 +101,6 @@ const toolbarTextDirection = "ltr rtl"
 const defaultEditorConfig = {
   skin: false,
   content_css: false,
-  //content_style: contentUiCss.toString() + "\n" + contentCss.toString(),
   branding: false,
   relative_urls: false,
   height: 500,
@@ -136,33 +132,30 @@ const defaultEditorConfig = {
     "visualblocks",
     "wordcount",
   ],
-  toolbar:
-    toolbarUndo +
-    " | " +
-    toolbarFormatText +
-    " | " +
-    toolbarInsertMedia +
-    " | " +
-    toolbarFontConfig +
-    " | " +
-    toolbarAlign +
-    " | " +
-    toolbarIndent +
-    " | " +
-    toolbarList +
-    " | " +
-    toolbarColor +
-    " | " +
-    toolbarPageBreak +
-    " | " +
-    toolbarSpecialSymbols +
-    " | " +
-    toolbarOther +
-    " | " +
-    toolbarCode +
-    " | " +
-    toolbarTextDirection,
+  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');
+    });
+  }
 }
 
 if (props.fullPage) {
@@ -175,6 +168,12 @@ const editorConfig = computed(() => ({
   ...props.editorConfig,
 }))
 
+watch(modelValue, (newValue) => {
+  if (newValue && !newValue.includes('tiny-content')) {
+    modelValue.value = `<div class="tiny-content">${newValue}</div>`
+  }
+})
+
 async function filePickerCallback(callback, value, meta) {
   let url = getUrlForTinyEditor()
   if ("image" === meta.filetype) {