mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-27 23:29:57 +09:00
에디터 스타일과 기본 스타일의 합병
* 기본 에디터 스타일과 기본 스타일 설정이 충돌하는 경우가 많았습니다. - 기본 스타일을 지정했는데, 기본 에디터 스타일 내의 스타일 지정이 있는 경우 반영이 안되는 경우, 또는 기본 에디터 스타일을 변경했는데 기본 스타일 설정 때문에 반영이 적절하게 되지 않는 경우 등. * 기본 에디터 스타일에서도 less 또는 sass를 사용하도록 하고 싶었지만, 위지윅 에디터에서 본문에 나타날 스타일을 그대로 보여주는데 한계가 있었습니다. - 기본 에디터 스타일을 위지윅 에디터 내에서 나타내기 위해서 변칙적인 방법이 많이 활용되었습니다. 때문에 실제 본문에서 적용되는 스타일 시트의 우선순위와 위지윅 에디터 내에서 적용되는 스타일 시트의 우선순위에 차이가 있었습니다. 이 차이는 실제 보여지는 스타일과 작성하는 에디터 내의 스타일 차이를 크게 만들 가능성이 있었습니다. * 기능의 의미가 많이 퇴색되었고, 의미 전달이 명확하지 않은 기능이었습니다. - 기능상 기본 에디터 스타일과 기본 스타일은 서로 겹치는 영역의 기능입니다. 기본으로 포함된 두 에디터 스타일 간에 차이가 크지 않기도 해서 어떤 기능인지 사용자가 알아채기도 어려웠습니다. 자료실에 배포되고 있는 에디터 스타일도 대단히 적었습니다. * 게시판이나 각 글의 모듈 스킨에서 지정하는 스타일과 충돌할 가능성도 있습니다. 따라서, 에디터 스타일이 의도한 것 처럼 글의 스타일에 대한 관리자 통제 기능은 유지하면서, 다른 기능과 중복되거나 충돌할 수 있는 기능을 정리합니다. 가능한 많은 환경에서 테스트 하였으나, 추가로 이와 관련한 의견이 있을 경우 merge 후에도 계속 반영 해나가겠습니다.
This commit is contained in:
Min-Soo Kim
GitHub
parent
9b95ae0134
commit
e7cb5ede82
31 changed files with 212 additions and 339 deletions
|
|
@ -1,3 +1,7 @@
|
|||
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; }
|
||||
span.cke_combo__fontsize .cke_combo_button { width: 64px;}
|
||||
span.cke_combo__fontsize .cke_combo_text { width: 30px; }
|
||||
122
modules/editor/skins/ckeditor/css/default.less
Normal file
122
modules/editor/skins/ckeditor/css/default.less
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
@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: #494949;
|
||||
color: #fff;
|
||||
}
|
||||
.light_dark(@cs) when not (@cs = moono-dark) {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.light_dark_top(@cs) when (@cs = moono-dark) {
|
||||
border-bottom-color: #1b1b1b;
|
||||
}
|
||||
.light_dark_top(@cs) when not (@cs = moono-dark) {
|
||||
}
|
||||
|
||||
html {
|
||||
&.cke_panel_container, &.cke_panel_container body {
|
||||
background-color: #fff;
|
||||
}
|
||||
body.cke_editable {
|
||||
padding: 10px;
|
||||
.light_dark(@colorset);
|
||||
}
|
||||
}
|
||||
|
||||
p.editor_autosaved_message.autosave_message {
|
||||
display:none;
|
||||
background: #e0e0e0;
|
||||
padding: 10px;
|
||||
margin:0;
|
||||
line-height:1.2;
|
||||
}
|
||||
.cke_reset {
|
||||
span {
|
||||
&.cke_top {
|
||||
.light_dark_top(@colorset);
|
||||
a {
|
||||
&:hover, &:focus {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.cke_combo__fontsize {
|
||||
.cke_combo_button {
|
||||
width: 64px;
|
||||
}
|
||||
.cke_combo_text {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.xe_content.editable, .rhymix_content.editable {
|
||||
.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,5 +1,14 @@
|
|||
<!-- css -->
|
||||
<load target="css/default.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';}
|
||||
|
||||
{@ Context::set('css_var',$css_var);}
|
||||
<load target="css/default.less" vars="$css_var" />
|
||||
<load target="../../../../common/xeicon/xeicon.min.css" />
|
||||
|
||||
<!-- JS -->
|
||||
|
|
@ -12,22 +21,12 @@
|
|||
var auto_saved_msg = "{$lang->msg_auto_saved}";
|
||||
</script>
|
||||
|
||||
{@ $css_file_list = array(Context::getRequestUri() . $content_style_path . '/editor.css?' . date("YmdHis", @filemtime($content_style_path."/editor.css")))}
|
||||
{@ $css_file_list = array()}
|
||||
<!--@foreach($editor_additional_css as $additional_css_url)-->
|
||||
{@ $css_file_list[] = $additional_css_url}
|
||||
<!--@endforeach-->
|
||||
|
||||
{@ $css_content = null }
|
||||
<!--@if($content_font || $content_font_size)-->
|
||||
{@ $css_content .= ' .xe_content.editable { '}
|
||||
<block cond="$content_font">{@ $css_content .= 'font-family:' . $content_font . ';';}</block>
|
||||
<block cond="$content_font_size">{@ $css_content .= 'font-size:' . $content_font_size . ';';}</block>
|
||||
<block cond="$content_line_height">{@ $css_content .= 'line-height:' . $content_line_height . ';';}</block>
|
||||
<block cond="$content_word_break === 'none'">{@ $css_content .= 'white-space: nowrap;';}</block>
|
||||
<block cond="$content_word_break !== 'none'">{@ $css_content .= 'word-break:' . ($content_word_break ?: 'normal') . '; word-wrap: break-word;';}</block>
|
||||
{@ $css_content .= chr(125);}
|
||||
{@ $css_content .= '.xe_content.editable p { margin: 0 0 ' . ($content_paragraph_spacing ?: 0) . ' 0;' . chr(125);}
|
||||
<!--@endif-->
|
||||
|
||||
<!--@if($enable_autosave)-->
|
||||
<input type="hidden" name="_saved_doc_title" value="{escape($saved_doc->title)}" />
|
||||
|
|
@ -112,6 +111,14 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
|
|||
content_field: jQuery('[name={$editor_content_key_name}]')
|
||||
};
|
||||
|
||||
// Add style-sheet for the WYSIWYG
|
||||
$(document.getElementsByTagName('link')).each(function() {
|
||||
if ($(this).attr('rel') == 'stylesheet') {
|
||||
settings.ckeconfig.contentsCss.push($(this).attr('href'));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Prevent removal of icon fonts and Google code.
|
||||
CKEDITOR.dtd.$removeEmpty.i = 0;
|
||||
CKEDITOR.dtd.$removeEmpty.ins = 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue