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

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,33 @@
 Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
 */
 
+/* Reset styles */
+.tiny-content {
+    all: initial;
+    display: block;
+    width: 100%;
+}
+
+.tiny-content * {
+    all: revert;
+    box-sizing: border-box;
+}
+
+/* Specific styles for TinyMCE content */
+.tiny-content img {
+    display: block !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: auto !important;
+    height: auto !important;
+}
+
+.tiny-content table {
+    margin: auto !important;
+    width: auto !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,7 +21,7 @@
 </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"
@@ -29,9 +29,6 @@ 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:
+  toolbar: [
-    toolbarUndo +
+    toolbarUndo,
-    " | " +
+    toolbarFormatText,
-    toolbarFormatText +
+    toolbarInsertMedia,
-    " | " +
+    toolbarFontConfig,
-    toolbarInsertMedia +
+    toolbarAlign,
-    " | " +
+    toolbarIndent,
-    toolbarFontConfig +
+    toolbarList,
-    " | " +
+    toolbarColor,
-    toolbarAlign +
+    toolbarPageBreak,
-    " | " +
+    toolbarSpecialSymbols,
-    toolbarIndent +
+    toolbarOther,
-    " | " +
+    toolbarCode,
-    toolbarList +
+    toolbarTextDirection
-    " | " +
+  ].join(" | "),
-    toolbarColor +
-    " | " +
-    toolbarPageBreak +
-    " | " +
-    toolbarSpecialSymbols +
-    " | " +
-    toolbarOther +
-    " | " +
-    toolbarCode +
-    " | " +
-    toolbarTextDirection,
   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) {