mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-06 18:21:39 +09:00
Replace CKEditor default LESS file with SCSS, and clean up related code in editor.html
- LESS 컴파일러 라이브러리 유지보수 중단으로, 모든 LESS는 SCSS로 변환 필요 - CKEditor 쪽에서 PHP 변수, JS 변수, CSS 변수 서로 전달하는 방식은 추가 개선 필요
This commit is contained in:
Kijin Sung
parent
5530a879cc
commit
283380ed0f
4 changed files with 208 additions and 238 deletions
184
modules/editor/skins/ckeditor/css/ckeditor.scss
Normal file
184
modules/editor/skins/ckeditor/css/ckeditor.scss
Normal file
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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; }
|
||||
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,26 @@
|
|||
<!-- css -->
|
||||
{@ $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';}
|
||||
<!--// Configuration -->
|
||||
{@
|
||||
$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);}
|
||||
<load target="css/default.less" vars="$css_var" />
|
||||
<load target="../../../../common/xeicon/xeicon.min.css" />
|
||||
$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));
|
||||
}
|
||||
|
||||
<!-- CSS -->
|
||||
<load target="css/ckeditor.scss" vars="$css_var" />
|
||||
<load target="../../../../common/css/xeicon/xeicon.min.css" />
|
||||
|
||||
<!-- JS -->
|
||||
<!--%load_js_plugin("ckeditor")-->
|
||||
|
|
@ -18,16 +29,9 @@
|
|||
<load target="js/xe_interface.js" />
|
||||
|
||||
<script>
|
||||
var auto_saved_msg = "{$lang->msg_auto_saved}";
|
||||
var auto_saved_msg = "{$lang->msg_auto_saved}";
|
||||
</script>
|
||||
|
||||
{@ $css_file_list = array()}
|
||||
<!--@foreach($editor_additional_css as $additional_css_url)-->
|
||||
{@ $css_file_list[] = $additional_css_url}
|
||||
<!--@endforeach-->
|
||||
|
||||
{@ $css_content = "" }
|
||||
|
||||
<!--@if($enable_autosave)-->
|
||||
<input type="hidden" name="_saved_doc_title" value="{(isset($saved_doc) && $saved_doc) ? escape($saved_doc->title) : ''}" />
|
||||
<input type="hidden" name="_saved_doc_content" value="{(isset($saved_doc) && $saved_doc) ? escape($saved_doc->content) : ''}" />
|
||||
|
|
@ -35,10 +39,6 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
|
|||
<input type="hidden" name="_saved_doc_message" value="{$lang->msg_load_saved_doc}" />
|
||||
<!--@end-->
|
||||
|
||||
{@ $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))}
|
||||
|
||||
<div id="ckeditor_instance_{$editor_sequence}" data-editor-sequence="{$editor_sequence}" data-editor-primary-key-name="{$editor_primary_key_name}" data-editor-content-key-name="{$editor_content_key_name}" style="min-height:{$editor_height_fixed}px;"></div>
|
||||
|
||||
<p cond="$enable_autosave" class="editor_autosaved_message autosave_message" id="editor_autosaved_message_{$editor_sequence}"> </p>
|
||||
|
|
@ -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.
|
||||
<!--@if($enable_component)-->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue