diff --git a/modules/editor/skins/ckeditor/css/ckeditor.scss b/modules/editor/skins/ckeditor/css/ckeditor.scss new file mode 100644 index 000000000..f77f91dba --- /dev/null +++ b/modules/editor/skins/ckeditor/css/ckeditor.scss @@ -0,0 +1,184 @@ +@charset "UTF-8"; + +@mixin light-dark($colorset) { + @if $colorset == "moono-dark" { + background-color: #333; + color: #fff; + } @else { + background-color: #fff; + color: #000; + &.color_scheme_dark.cke_auto_dark_mode { + background-color: #333; + color: #fff; + } + } +} + +@mixin light-dark-top($colorset) { + @if $colorset == "moono-dark" { + body & { + border-color: #555; + &.cke_bottom { + background: #333; + .cke_button_icon, .cke_combo_button, .cke_button_arrow, .cke_button_label { + filter: invert(1); + } + } + } + } @else { + .color_scheme_dark.cke_auto_dark_mode & { + background: #333; + border-color: #555; + .cke_button_on { + background: #000; + border-color: #555; + } + .cke_button_icon, .cke_combo_button, .cke_button_arrow, .cke_button_label { + filter: invert(1); + } + &.cke_dialog_body { + background: #555; + } + .cke_dialog_title { + background: #333; + color: #fff; + border-bottom-color: #555; + .cke_dialog_close_button { + color: #fff; + } + } + .cke_dialog_tabs { + background: #555; + .cke_dialog_tab { + background: #555; + color: #999; + border-color: #777; + } + .cke_dialog_tab_selected { + background: #777; + color: #fff; + border-color: #777; + } + } + .cke_dialog_contents { + background: #555; + border-top-color: #777; + label { + color: #fff; + } + select, input, .ImagePreviewBox td { + background: #333; + color: #fff; + border-color: #777; + } + } + .cke_dialog_footer { + background: #333; + border-top-color: #555; + } + } + } +} + +// Editor UI styling +html { + &.cke_panel_container, &.cke_panel_container body { + @include light-dark("default"); + } + width: unset; + height: unset; + min-width: unset; + min-height: 100vh; + box-sizing: border-box; + margin: 0; + padding: 0; +} +body.cke_editable { + width: unset; + height: unset; + min-width: unset; + min-height: 100vh; + box-sizing: border-box; + margin: 0; + padding: 10px; + @include light-dark($colorset); +} +body.color_scheme_dark.cke_auto_dark_mode .cke_wysiwyg_div { + background-color: #333; + color: #fff; +} + +p.editor_autosaved_message.autosave_message { + display:none; + background: #e0e0e0; + color: #000; + padding: 10px; + margin:0; + line-height:1.2; + .color_scheme_dark & { + background: #222; + color: #fff; + } +} +.cke_reset { + .cke_top, .cke_bottom { + @include light-dark-top($colorset); + a { + &:hover, &:focus { + transition: none; + } + } + } + .cke_combo__fontsize { + .cke_combo_button { + width: 64px; + } + .cke_combo_text { + width: 30px; + } + } +} +.cke_dialog_body { + @include light-dark-top($colorset); +} + +// Content area styling +.xe_content.editable, .rhymix_content.editable, .cke_wysiwyg_div { + font-family: $content_font; + font-size: $content_font_size; + line-height: $content_line_height; + @if $content_word_break == 'none' { + white-space: nowrap; + } @else { + word-break: $content_word_break; + word-wrap: break-word; + } + p { + margin: 0 0 $content_paragraph_spacing 0; + line-height: $content_line_height; + span { + line-height: $content_line_height; + } + } + img, video { + max-width: 100%; + height: auto; + } + blockquote { + padding: 2px 0; + border-style: solid; + border-color: #ccc; + border-width: 0; + border-left-width: 5px; + padding-left: 20px; + padding-right: 8px; + + &:lang(ar), &:lang(arc), &:lang(dv), &:lang(ha), &:lang(he), &:lang(khw), &:lang(ks), &:lang(ku), &:lang(ps), &:lang(fa), &:lang(ur), &:lang(yi) { + border-left-width: 0px; + border-right-width: 5px; + padding-left: 8px; + padding-right: 20px; + + } + } +} diff --git a/modules/editor/skins/ckeditor/css/default.css b/modules/editor/skins/ckeditor/css/default.css deleted file mode 100644 index 859652b05..000000000 --- a/modules/editor/skins/ckeditor/css/default.css +++ /dev/null @@ -1,7 +0,0 @@ -body.cke_editable { padding: 5px; background-color: #fff; } -html.cke_panel_container, html.cke_panel_container body { - background-color: #fff -} -p.editor_autosaved_message.autosave_message {display:none;background: #f6ffdb;padding:6px 10px;margin:0;line-height:1;} -span.cke_combo__fontsize .cke_combo_button { width: 64px;} -span.cke_combo__fontsize .cke_combo_text { width: 30px; } \ No newline at end of file diff --git a/modules/editor/skins/ckeditor/css/default.less b/modules/editor/skins/ckeditor/css/default.less deleted file mode 100644 index 200f21257..000000000 --- a/modules/editor/skins/ckeditor/css/default.less +++ /dev/null @@ -1,207 +0,0 @@ -@charset "UTF-8"; -/* Content Default Styles */ -.word_break(@wb) when (@wb = normal), (@wb = keep-all), (@wb = break-all) { - word-break: @wb; - word-wrap: break-word; -} -.word_break(@wb) when (@wb = none) { - white-space: nowrap; -} - -.cont_font(@ft) when (@ft = none) { -} -.cont_font(@ft) when not (@ft = none) { - font-family: @content_font; -} - -.cont_fontsize(@fs) when (@fs = none) { -} -.cont_fontsize(@fs) when not (@fs = none) { - font-size: @content_font_size; -} - -.cont_lineheight(@lh) when (@lh = none) { -} -.cont_lineheight(@lh) when not (@lh = none) { - line-height: @content_line_height; -} - -.cont_linespacing(@ls) when (@ls = none) { -} -.cont_linespacing(@ls) when not (@ls = none) { - margin: 0 0 @content_paragraph_spacing 0; -} - -.light_dark(@cs) when (@cs = moono-dark) { - background-color: #333; - color: #fff; -} -.light_dark(@cs) when not (@cs = moono-dark) { - background-color: #fff; - color: #000; - &.color_scheme_dark.cke_auto_dark_mode { - background-color: #333; - color: #fff; - } -} - -.light_dark_top(@cs) when (@cs = moono-dark) { - body & { - border-color: #555; - &.cke_bottom { - background: #333; - .cke_button_icon, .cke_combo_button, .cke_button_arrow, .cke_button_label { - filter: invert(1); - } - } - } -} -.light_dark_top(@cs) when not (@cs = moono-dark) { - .color_scheme_dark.cke_auto_dark_mode & { - background: #333; - border-color: #555; - .cke_button_on { - background: #000; - border-color: #555; - } - .cke_button_icon, .cke_combo_button, .cke_button_arrow, .cke_button_label { - filter: invert(1); - } - &.cke_dialog_body { - background: #555; - } - .cke_dialog_title { - background: #333; - color: #fff; - border-bottom-color: #555; - .cke_dialog_close_button { - color: #fff; - } - } - .cke_dialog_tabs { - background: #555; - .cke_dialog_tab { - background: #555; - color: #999; - border-color: #777; - } - .cke_dialog_tab_selected { - background: #777; - color: #fff; - border-color: #777; - } - } - .cke_dialog_contents { - background: #555; - border-top-color: #777; - label { - color: #fff; - } - select, input, .ImagePreviewBox td { - background: #333; - color: #fff; - border-color: #777; - } - } - .cke_dialog_footer { - background: #333; - border-top-color: #555; - } - } -} - -html { - &.cke_panel_container, &.cke_panel_container body { - .light_dark(default); - } - width: unset; - height: unset; - min-width: unset; - min-height: 100vh; - box-sizing: border-box; - margin: 0; - padding: 0; -} -body.cke_editable { - width: unset; - height: unset; - min-width: unset; - min-height: 100vh; - box-sizing: border-box; - margin: 0; - padding: 10px; - .light_dark(@colorset); -} -body.color_scheme_dark.cke_auto_dark_mode .cke_wysiwyg_div { - background-color: #333; - color: #fff; -} - -p.editor_autosaved_message.autosave_message { - display:none; - background: #e0e0e0; - color: #000; - padding: 10px; - margin:0; - line-height:1.2; - .color_scheme_dark & { - background: #222; - color: #fff; - } -} -.cke_reset { - .cke_top, .cke_bottom { - .light_dark_top(@colorset); - a { - &:hover, &:focus { - transition: none; - } - } - } - .cke_combo__fontsize { - .cke_combo_button { - width: 64px; - } - .cke_combo_text { - width: 30px; - } - } -} -.cke_dialog_body { - .light_dark_top(@colorset); -} - -.xe_content.editable, .rhymix_content.editable, .cke_wysiwyg_div { - .cont_font(@content_font); - .cont_fontsize(@content_font_size); - .cont_lineheight(@content_line_height); - .word_break(@content_word_break); - p { - .cont_linespacing(@content_paragraph_spacing); - .cont_lineheight(@content_line_height); - span { - .cont_lineheight(@content_line_height); - } - } - img, video { - max-width: 100%; - height: auto; - } - blockquote { - padding: 2px 0; - border-style: solid; - border-color: #ccc; - border-width: 0; - border-left-width: 5px; - padding-left: 20px; - padding-right: 8px; - - &:lang(ar), &:lang(arc), &:lang(dv), &:lang(ha), &:lang(he), &:lang(khw), &:lang(ks), &:lang(ku), &:lang(ps), &:lang(fa), &:lang(ur), &:lang(yi) { - border-left-width: 0px; - border-right-width: 5px; - padding-left: 8px; - padding-right: 20px; - - } - } -} diff --git a/modules/editor/skins/ckeditor/editor.html b/modules/editor/skins/ckeditor/editor.html index 00833f15f..2c72b39b7 100644 --- a/modules/editor/skins/ckeditor/editor.html +++ b/modules/editor/skins/ckeditor/editor.html @@ -1,15 +1,26 @@ - -{@ $css_var = new stdClass; } -{@ $css_var->colorset = $colorset; } -{@ $css_var->content_font = $content_font ? $content_font : 'none'; } -{@ $css_var->content_font_size = $content_font_size ? $content_font_size : 'none';} -{@ $css_var->content_line_height = $content_line_height ? $content_line_height: 'none';} -{@ $css_var->content_word_break = $content_word_break ? $content_word_break : 'none';} -{@ $css_var->content_paragraph_spacing = $content_paragraph_spacing ? $content_paragraph_spacing : 'none';} + +{@ + $css_var = new stdClass; + $css_var->colorset = $colorset; + $css_var->content_font = $content_font ?: 'none'; + $css_var->content_font_size = $content_font_size ?: 'none'; + $css_var->content_line_height = $content_line_height ?: 'none'; + $css_var->content_word_break = $content_word_break ?: 'none'; + $css_var->content_paragraph_spacing = $content_paragraph_spacing ?: 'none'; -{@ Context::set('css_var',$css_var);} - - + $css_file_list = array_values($editor_additional_css ?: []); + $css_content = ''; + + $filemtime1 = filemtime(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/ckeditor.js'); + $filemtime2 = file_exists(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/config.js') ? filemtime(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/config.js') : 0; + $filemtimestamp = max($filemtime1, $filemtime2, $editor_config_timestamp ?? 0); + + $editor_height_fixed = $editor_height + ($editor_toolbar_hide ? 58 : ($editor_toolbar === 'simple' ? 74 : 140)); +} + + + + @@ -18,16 +29,9 @@ -{@ $css_file_list = array()} - - {@ $css_file_list[] = $additional_css_url} - - -{@ $css_content = "" } - @@ -35,10 +39,6 @@ var auto_saved_msg = "{$lang->msg_auto_saved}"; -{@ $ckeditor_main_filemtime = filemtime(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/ckeditor.js')} -{@ $ckeditor_config_filemtime = file_exists(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/config.js') ? filemtime(RX_BASEDIR . 'common/js/plugins/ckeditor/ckeditor/config.js') : 0} -{@ $editor_height_fixed = $editor_height + ($editor_toolbar_hide ? 58 : ($editor_toolbar === 'simple' ? 74 : 140))} -

 

@@ -137,7 +137,7 @@ var auto_saved_msg = "{$lang->msg_auto_saved}"; CKEDITOR.dtd.$removeEmpty.ins = 0; // Set the timestamp for plugins. - CKEDITOR.timestamp = '{max($ckeditor_main_filemtime, $ckeditor_config_filemtime, $editor_config_timestamp ?? 0)}'; + CKEDITOR.timestamp = {json_encode($filemtimestamp)}; // Add editor components.