diff --git a/assets/css/app.scss b/assets/css/app.scss index 892ba4f1c5c..920fd89a9ef 100644 --- a/assets/css/app.scss +++ b/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 { diff --git a/assets/css/editor_content.css b/assets/css/editor_content.css index f47fecf813a..f2be9a8d794 100644 --- a/assets/css/editor_content.css +++ b/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; diff --git a/assets/vue/components/basecomponents/BaseTinyEditor.vue b/assets/vue/components/basecomponents/BaseTinyEditor.vue index 73acc43665e..4c3a331425f 100644 --- a/assets/vue/components/basecomponents/BaseTinyEditor.vue +++ b/assets/vue/components/basecomponents/BaseTinyEditor.vue @@ -21,7 +21,7 @@