Display: Disable skin and content css for TinyMCE and include default skin in editor component #5253

assets/vue/components/Editor.js

@@ -1,5 +1,6 @@
 
 import Editor from '@tinymce/tinymce-vue'
+import "tinymce/skins/ui/oxide/skin.css"
 
 import 'tinymce/tinymce'
 import 'tinymce/icons/default'

assets/vue/components/basecomponents/BaseTinyEditor.vue

@@ -25,13 +25,16 @@
 
 <script setup>
 import { computed, ref } from "vue"
-import TinyEditor from "@tinymce/tinymce-vue"
+import TinyEditor from "../../components/Editor"
 import { useRoute, useRouter } from "vue-router"
 import { useCidReqStore } from "../../store/cidReq"
 import { storeToRefs } from "pinia"
 import { useStore } from "vuex"
 import { TINYEDITOR_MODE_DOCUMENTS, TINYEDITOR_MODE_PERSONAL_FILES, TINYEDITOR_MODES } from "./TinyEditorOptions"
 
+//import contentUiCss from "css-loader!tinymce/skins/ui/oxide/content.css"
+//import contentCss from "css-loader!tinymce/skins/content/default/content.css"
+
 const props = defineProps({
   editorId: {
     type: String,
@@ -109,8 +112,9 @@ const toolbarCode = "code codesample"
 const toolbarTextDirection = "ltr rtl"
 
 const defaultEditorConfig = {
-  skin_url: "/build/libs/tinymce/skins/ui/oxide",
-  content_css: "/build/libs/tinymce/skins/content/default/content.css",
+  skin: false,
+  content_css: false,
+  //content_style: contentUiCss.toString() + "\n" + contentCss.toString(),
   branding: false,
   relative_urls: false,
   height: 500,

assets/vue/main.js

@@ -34,8 +34,6 @@ import "@mdi/font/css/materialdesignicons.css"
 
 import DashboardLayout from "./components/layout/DashboardLayout.vue"
 import EmptyLayout from "./components/layout/EmptyLayout.vue"
-// Tinymce
-import Editor from "./components/Editor"
 
 // Prime
 import PrimeVue from "primevue/config"
@@ -202,7 +200,6 @@ app.component("ColumnGroup", ColumnGroup)
 app.component("Toolbar", Toolbar)
 app.component("DashboardLayout", DashboardLayout)
 app.component("EmptyLayout", EmptyLayout)
-app.component("TinyEditor", Editor)
 
 app.config.globalProperties.axios = axios
 app.config.globalProperties.window = window

webpack.config.js

@@ -121,10 +121,6 @@ Encore.copyFiles({
   from: "./node_modules/mathjax/config",
   to: "libs/mathjax/config/[path][name].[ext]",
 })
-Encore.copyFiles({
-  from: "./node_modules/tinymce/skins",
-  to: "libs/tinymce/skins/[path][name].[ext]",
-})
 Encore.copyFiles({
   from: "node_modules/moment/locale",
   to: "libs/locale/[path][name].[ext]",