Make the default editor styles more configurable

This commit is contained in:
Kijin Sung 2016-04-28 00:52:29 +09:00
parent 4a26220890
commit a1fc06f645
19 changed files with 175 additions and 121 deletions

View file

@ -146,25 +146,30 @@ class editorAdminController extends editor
$configVars = Context::getRequestVars();
$config = new stdClass;
if($configVars->font_defined != 'Y') $config->font_defined = $configVars->font_defined = 'N';
else $config->font_defined = 'Y';
if($config->font_defined == 'Y')
$config->content_font = $configVars->content_font_defined;
else
$config->content_font = $configVars->content_font;
$config->editor_skin = $configVars->editor_skin;
$config->editor_height = $configVars->editor_height;
$config->comment_editor_skin = $configVars->comment_editor_skin;
$config->comment_editor_height = $configVars->comment_editor_height;
$config->content_style = $configVars->content_style;
$config->content_font_size= $configVars->content_font_size.'px';
$config->sel_editor_colorset= $configVars->sel_editor_colorset;
$config->sel_comment_editor_colorset= $configVars->sel_comment_editor_colorset;
if ($configVars->font_defined === 'Y')
{
$config->font_defined = 'Y';
$config->content_font = $configVars->content_font_defined;
}
else
{
$config->font_defined = $configVars->font_defined = 'N';
$config->content_font = $configVars->content_font;
}
$config->content_font_size = intval($configVars->content_font_size) . 'px';
$config->content_line_height = intval($configVars->content_line_height) . '%';
$config->content_paragraph_spacing = intval($configVars->content_paragraph_spacing) . 'px';
$config->content_word_break = $configVars->content_word_break;
$oModuleController->insertModuleConfig('editor',$config);
$oModuleController->insertModuleConfig('editor', $config);
$this->setRedirectUrl(Context::get('error_return_url'));
}

View file

@ -74,7 +74,7 @@ class editorAdminView extends editor
{
if($packages[$xml_info->package_srl]) $xml_info->need_update = $packages[$xml_info->package_srl]->need_update;
}
$editor_config_default = array( "editor_height" => "300", "comment_editor_height" => "100","content_font_size"=>"13");
$editor_config_default = array('editor_height' => 300, 'comment_editor_height' => 100);
//editor preview
$config = $oEditorModel->getEditorConfig();
@ -84,6 +84,9 @@ class editorAdminView extends editor
$option->content_style = $config->content_style;
$option->content_font = $config->content_font;
$option->content_font_size = $config->content_font_size;
$option->content_line_height = $config->content_line_height;
$option->content_paragraph_spacing = $config->content_paragraph_spacing;
$option->content_word_break = $config->content_word_break;
$option->enable_autosave = false;
$option->enable_default_component = true;
$option->enable_component = true;
@ -102,6 +105,9 @@ class editorAdminView extends editor
$option_com->content_style = $config->content_style;
$option_com->content_font = $config->content_font;
$option_com->content_font_size = $config->content_font_size;
$option_com->content_line_height = $config->content_line_height;
$option_com->content_paragraph_spacing = $config->content_paragraph_spacing;
$option_com->content_word_break = $config->content_word_break;
$option_com->enable_autosave = false;
$option_com->enable_default_component = true;
$option_com->enable_component = true;

View file

@ -186,15 +186,35 @@ class editorController extends editor
}
$content_font = $editor_config->content_font;
$content_font_size = $editor_config->content_font_size;
if($content_font || $content_font_size)
$content_line_height = $editor_config->content_line_height;
$content_paragraph_spacing = $editor_config->content_paragraph_spacing;
$content_word_break = $editor_config->content_word_break;
$buff = array();
$buff[] = '<style> .xe_content {';
if ($content_font)
{
$buff = array();
$buff[] = '<style> .xe_content { ';
if($content_font) $buff[] = 'font-family:'.$content_font.';';
if($content_font_size) $buff[] = 'font-size:'.$content_font_size.';';
$buff[] = ' }</style>';
Context::addHtmlHeader(implode('', $buff));
$buff[] = "font-family: $content_font;";
}
if ($content_font_size)
{
$buff[] = "font-size: $content_font_size;";
}
if ($content_line_height)
{
$buff[] = "line-height: $content_line_height;";
}
if ($content_word_break === 'none')
{
$buff[] = 'white-space: nowrap;';
}
else
{
$buff[] = 'word-break: ' . ($content_word_break ?: 'normal') . '; word-wrap: break-word;';
}
$buff[] = '}';
if ($content_paragraph_spacing) $buff[] = ".xe_content p { margin: 0 0 $content_paragraph_spacing 0; }";
$buff[] = '</style>';
Context::addHtmlHeader(implode(' ', $buff));
}
$content = $this->transComponent($content);

View file

@ -83,6 +83,18 @@ class editorModel extends editor
{
$editor_config->content_font_size = $editor_default_config->content_font_size;
}
if((!$editor_config->content_line_height && $editor_default_config->content_line_height) || $editor_config->default_editor_settings === 'Y')
{
$editor_config->content_line_height = $editor_default_config->content_line_height;
}
if((!$editor_config->content_paragraph_spacing && $editor_default_config->content_paragraph_spacing) || $editor_config->default_editor_settings === 'Y')
{
$editor_config->content_paragraph_spacing = $editor_default_config->content_paragraph_spacing;
}
if((!$editor_config->content_word_break && $editor_default_config->content_word_break) || $editor_config->default_editor_settings === 'Y')
{
$editor_config->content_word_break = $editor_default_config->content_word_break;
}
if((!$editor_config->sel_editor_colorset && $editor_default_config->sel_editor_colorset) || $editor_config->default_editor_settings === 'Y')
{
$editor_config->sel_editor_colorset = $editor_default_config->sel_editor_colorset;
@ -218,8 +230,11 @@ class editorModel extends editor
Context::set('content_style', $option->content_style);
Context::set('content_style_path', $this->module_path . 'styles/' . $option->content_style);
// Default font setting
Context::set('content_font', addslashes($option->content_font));
Context::set('content_font', $option->content_font);
Context::set('content_font_size', $option->content_font_size);
Context::set('content_line_height', $option->content_line_height);
Context::set('content_paragraph_spacing', $option->content_paragraph_spacing);
Context::set('content_word_break', $option->content_word_break);
// Option setting to allow auto-save
if(!$option->enable_autosave) $enable_autosave = false;
@ -379,6 +394,9 @@ class editorModel extends editor
$config->content_style = $editor_config->content_style;
$config->content_font = $editor_config->content_font;
$config->content_font_size = $editor_config->content_font_size;
$config->content_line_height = $editor_config->content_line_height;
$config->content_paragraph_spacing = $editor_config->content_paragraph_spacing;
$config->content_word_break = $editor_config->content_word_break;
$config->sel_editor_colorset = $editor_config->sel_editor_colorset;
$config->upload_file_grant = $editor_config->upload_file_grant;
$config->enable_default_component_grant = $editor_config->enable_default_component_grant;
@ -393,6 +411,9 @@ class editorModel extends editor
$config->content_style = $editor_config->comment_content_style;
$config->content_font = $editor_config->content_font;
$config->content_font_size = $editor_config->content_font_size;
$config->content_line_height = $editor_config->content_line_height;
$config->content_paragraph_spacing = $editor_config->content_paragraph_spacing;
$config->content_word_break = $editor_config->content_word_break;
$config->sel_editor_colorset = $editor_config->sel_comment_editor_colorset;
$config->upload_file_grant = $editor_config->comment_upload_file_grant;
$config->enable_default_component_grant = $editor_config->enable_comment_default_component_grant;
@ -418,6 +439,9 @@ class editorModel extends editor
$option->content_style = $config->content_style;
$option->content_font = $config->content_font;
$option->content_font_size = $config->content_font_size;
$option->content_line_height = $config->content_line_height;
$option->content_paragraph_spacing = $config->content_paragraph_spacing;
$option->content_word_break = $config->content_word_break;
$option->colorset = $config->sel_editor_colorset;
// Permission check for file upload
$option->allow_fileupload = false;

View file

@ -161,6 +161,9 @@ class editorView extends editor
$option_com->content_style = $config->content_style;
$option_com->content_font = $config->content_font;
$option_com->content_font_size = $config->content_font_size;
$option_com->content_line_height = $config->content_line_height;
$option_com->content_paragraph_spacing = $config->content_paragraph_spacing;
$option_com->content_word_break = $config->content_word_break;
$option_com->enable_autosave = false;
$option_com->enable_default_component = true;
$option_com->enable_component = true;
@ -180,6 +183,9 @@ class editorView extends editor
$option->content_style = $config->content_style;
$option->content_font = $config->content_font;
$option->content_font_size = $config->content_font_size;
$option->content_line_height = $config->content_line_height;
$option->content_paragraph_spacing = $config->content_paragraph_spacing;
$option->content_word_break = $config->content_word_break;
$option->enable_autosave = false;
$option->enable_default_component = true;
$option->enable_component = true;

View file

@ -2,14 +2,22 @@
$lang->editor_component = 'Editor Component';
$lang->main_editor = 'Main editor';
$lang->comment_editor = 'Comment editor';
$lang->editor_option = 'Editor Option';
$lang->guide_choose_main_editor = 'Main editor.';
$lang->guide_set_height_main_editor = 'Height of the main editor.';
$lang->guide_choose_comment_editor = 'Comment editor.';
$lang->guide_set_height_comment_editor = 'Height of the comment editor.';
$lang->guide_choose_text_formatting = 'Text formatting';
$lang->guide_choose_font_body = 'Font body';
$lang->guide_choose_font_size_body = 'Size body';
$lang->editor_option = 'Editor Options';
$lang->guide_choose_main_editor = 'Main editor';
$lang->guide_set_height_main_editor = 'Main editor height';
$lang->guide_choose_comment_editor = 'Comment editor';
$lang->guide_set_height_comment_editor = 'Comment editor height';
$lang->guide_choose_text_formatting = 'Text formatting style';
$lang->guide_choose_font_preview = 'Preview';
$lang->guide_choose_font_body = 'Default font';
$lang->guide_choose_font_size_body = 'Default font size';
$lang->guide_choose_line_height = 'Line spacing';
$lang->guide_choose_paragraph_spacing = 'Paragraph spacing';
$lang->guide_choose_word_break = 'Line wrapping';
$lang->word_break_normal = 'Wrap Asian scripts at character boundary and Latin scripts at word boundary (default)';
$lang->word_break_keep_all = 'Wrap at word boundary';
$lang->word_break_break_all = 'Wrap at character boundary';
$lang->word_break_none = 'Do not wrap long lines';
$lang->font_preview = 'The quick brown fox jumps over the lazy dog.
いろはにほへと / ちりぬるを / わかよたれそ / つねならむ / うゐのおくやま / けふこえて / あさきゆめみし / ゑひもせす
키스의 고유 조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다.';

View file

@ -9,8 +9,16 @@ $lang->guide_set_height_main_editor = '본문 에디터 높이';
$lang->guide_choose_comment_editor = '댓글 에디터';
$lang->guide_set_height_comment_editor = '댓글 에디터 높이';
$lang->guide_choose_text_formatting = '본문 서식';
$lang->guide_choose_font_preview = '미리보기';
$lang->guide_choose_font_body = '본문 글꼴';
$lang->guide_choose_font_size_body = '본문 글꼴크기';
$lang->guide_choose_font_size_body = '글꼴 크기';
$lang->guide_choose_line_height = '줄 간격';
$lang->guide_choose_paragraph_spacing = '문단 간격';
$lang->guide_choose_word_break = '줄바꿈 방식';
$lang->word_break_normal = '한글은 글자 단위로 줄바꿈, 영문은 단어 단위로 줄바꿈 (기본값)';
$lang->word_break_keep_all = '모든 언어를 단어 단위로 줄바꿈';
$lang->word_break_break_all = '모든 언어를 글자 단위로 줄바꿈';
$lang->word_break_none = '줄을 바꾸지 않음';
$lang->font_preview = 'The quick brown fox jumps over the lazy dog.
いろはにほへと / ちりぬるを / わかよたれそ / つねならむ / うゐのおくやま / けふこえて / あさきゆめみし / ゑひもせす
키스의 고유 조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다.';

View file

@ -14,17 +14,14 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
{@ $css_content = null }
<!--@if($content_font || $content_font_size)-->
<!--@if($content_style === 'ckeditor_light')-->{@ $css_content = '.xe_content.editable p { margin: 0;'. chr(125); }<!--@endif-->
{@ $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_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);}
<block cond="$content_paragraph_spacing">{@ $css_content .= '.xe_content.editable p { margin: 0 0 ' . $content_paragraph_spacing . ' 0;' . chr(125);}</block>
<!--@endif-->
<!--@if($enable_autosave)-->
@ -52,7 +49,7 @@ var auto_saved_msg = "{$lang->msg_auto_saved}";
ckeconfig: {
height: '{$editor_height}',
skin: '{$colorset}',
contentsCss: '{$content_style_path}/editor.css',
contentsCss: '{$content_style_path}/editor.css?{date("YmdHis", @filemtime($content_style_path."/editor.css"))}',
xe_editor_sequence: {$editor_sequence},
toolbarCanCollapse: true,
language: "{str_replace('jp','ja',$lang_type)}"

View file

@ -1,6 +1,6 @@
@charset "utf-8";
/* NAVER (developers@xpressengine.com) */
.xe_content.editable {color:#000;font-size:13px;font-family:sans-serif;line-height:1.5;word-break:break-all;word-wrap:break-word}
.xe_content.editable { }
.xe_content.editable img{border:0;max-width:100%;}
.xe_content.editable blockquote.q1,
.xe_content.editable blockquote.q2,
@ -17,4 +17,3 @@
.xe_content.editable blockquote.q6{border:1px dashed #707070}
.xe_content.editable blockquote.q7{border:1px dashed #707070;background:#fbfbfb}
.xe_content.editable table .xe_selected_cell{background-color:#d6e9ff}
.xe_content.editable p{margin:0}

View file

@ -1,8 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
<title xml:lang="ko">XE CKEditor 기본 서식</title>
<version>1.8</version>
<date>2014-02-27</date>
<title xml:lang="ko">Rhymix 기본 서식</title>
<title xml:lang="en">Rhymix Default</title>
<version>1.9</version>
<date>2016-04-27</date>
<author email_address="developers@xpressengine.com" link="http://xpressengine.com/">
<name xml:lang="ko">NAVER</name>
</author>

View file

@ -16,4 +16,3 @@
.xe_content blockquote.q6{border:1px dashed #707070}
.xe_content blockquote.q7{border:1px dashed #707070;background:#fbfbfb}
.xe_content p{margin:0}

View file

@ -1 +1 @@
style.css

View file

@ -1,19 +0,0 @@
@charset "utf-8";
/* NAVER (developers@xpressengine.com) */
.xe_content.editable {color:#000;font-size:14px;font-family:sans-serif;line-height:1.6;word-break:break-all;word-wrap:break-word}
.xe_content.editable img{border:0;max-width:100%;}
.xe_content.editable blockquote.q1,
.xe_content.editable blockquote.q2,
.xe_content.editable blockquote.q3,
.xe_content.editable blockquote.q4,
.xe_content.editable blockquote.q5,
.xe_content.editable blockquote.q6,
.xe_content.editable blockquote.q7{padding:10px;margin:0 15px}
.xe_content.editable blockquote.q1{padding:0 10px;border-left:2px solid #ccc}
.xe_content.editable blockquote.q2{padding:0 10px;background:url(./img/bg_qmark.gif) no-repeat left top}
.xe_content.editable blockquote.q3{border:1px solid #d9d9d9}
.xe_content.editable blockquote.q4{border:1px solid #d9d9d9;background:#fbfbfb}
.xe_content.editable blockquote.q5{border:2px solid #707070}
.xe_content.editable blockquote.q6{border:1px dashed #707070}
.xe_content.editable blockquote.q7{border:1px dashed #707070;background:#fbfbfb}
.xe_content.editable table .xe_selected_cell{background-color:#d6e9ff}

View file

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="editor.css" />
<title>Rhymix</title>
</head>
<body class="xe_content editable">
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 B

View file

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
<title xml:lang="ko">XE CKEditor 권장 서식</title>
<version>1.8</version>
<date>2014-02-27</date>
<author email_address="developers@xpressengine.com" link="http://xpressengine.com/">
<name xml:lang="ko">NAVER</name>
</author>
</skin>

View file

@ -1,17 +0,0 @@
@charset "utf-8";
/* NAVER (developers@xpressengine.com) */
.xe_content {color:#000;font-size:14px;font-family:sans-serif;line-height:1.6}
.xe_content blockquote.q1,
.xe_content blockquote.q2,
.xe_content blockquote.q3,
.xe_content blockquote.q4,
.xe_content blockquote.q5,
.xe_content blockquote.q6,
.xe_content blockquote.q7{padding:10px;margin:0 15px}
.xe_content blockquote.q1{padding:0 10px;border-left:2px solid #ccc}
.xe_content blockquote.q2{padding:0 10px;background:url(./img/bg_qmark.gif) no-repeat left top}
.xe_content blockquote.q3{border:1px solid #d9d9d9}
.xe_content blockquote.q4{border:1px solid #d9d9d9;background:#fbfbfb}
.xe_content blockquote.q5{border:2px solid #707070}
.xe_content blockquote.q6{border:1px dashed #707070}
.xe_content blockquote.q7{border:1px dashed #707070;background:#fbfbfb}

View file

@ -1 +0,0 @@
style.css

View file

@ -87,32 +87,64 @@
<!--@end-->
</div>
</div>
<div class="x_control-group">
<label class="x_control-label">{$lang->guide_choose_font_preview}</label>
<div class="x_controls">
<textarea rows="4" cols="42" class="fontPreview" style="
font-family: {$editor_config->content_font};
font-size: {$editor_config->content_font_size ?: '13px'};
line-height: {$editor_config->content_line_height ?: '160%'};
width:90%" title="Font Preview">{$lang->font_preview}</textarea>
</div>
</div>
<div class="x_control-group">
<label class="x_control-label">{$lang->guide_choose_font_body}</label>
<div class="x_controls">
{@
if($editor_config->content_font_size) $fontSize = str_replace('px','',$editor_config->content_font_size);
else $fontSize = str_replace('px','',$editor_config_default['content_font_size']);
}
<div style="margin-right:14px">
<textarea rows="4" cols="42" class="fontPreview" style="font-family:{$editor_config->content_font};font-size:{$fontSize}px;width:100%" title="Font Preview">{$lang->font_preview}</textarea>
</div>
<label style="font-family:''" class="fontSelector">
<input type="radio" name="content_font" id="font_noFont" value="" checked="checked"|cond="!$editor_config->content_font && $editor_config->font_defined!= 'Y'" />none(inherit)
<input type="radio" name="content_font" id="font_noFont" value="" checked="checked"|cond="!$editor_config->content_font && $editor_config->font_defined != 'Y'" /> none (inherit)
</label>
<label style="font-family:{$detail}" class="fontSelector" loop="$lang->edit->fontlist=>$name,$detail">
<input type="radio" name="content_font" id="font_{$name}" value="{$detail}" checked="checked"|cond="stripcslashes($editor_config->content_font)==$detail && $editor_config->font_defined!= 'Y'" />{$detail}
<input type="radio" name="content_font" id="font_{$name}" value="{$detail}" checked="checked"|cond="$editor_config->content_font == $detail && $editor_config->font_defined != 'Y'" /> {$detail}
</label>
<label>
<input type="radio" name="font_defined" id="font_defined" value="Y" checked="checked"|cond="$editor_config->font_defined== 'Y'" />{$lang->by_you} :
<input type="text" name="content_font_defined" value="{stripcslashes($editor_config->content_font)}"|cond="$editor_config->font_defined == 'Y'" />
<input type="radio" class="fontSelector" name="font_defined" id="font_defined" value="Y" checked="checked"|cond="$editor_config->font_defined== 'Y'" /> {$lang->by_you} :
<input type="text" name="content_font_defined" value="{$editor_config->content_font}"|cond="$editor_config->font_defined == 'Y'" />
</label>
</div>
</div>
<div class="x_control-group">
<label class="x_control-label" for="fontSize">{$lang->guide_choose_font_size_body}</label>
<label class="x_control-label" for="font_size">{$lang->guide_choose_font_size_body}</label>
<div class="x_controls">
<input type="number" id="fontSize" name="content_font_size" value="{$fontSize}" /> px
<input type="number" id="font_size" name="content_font_size" value="{intval($editor_config->content_font_size) ?: 13}" /> px
</div>
</div>
<div class="x_control-group">
<label class="x_control-label" for="line_height">{$lang->guide_choose_line_height}</label>
<div class="x_controls">
<input type="number" id="line_height" name="content_line_height" value="{intval($editor_config->content_line_height) ?: 160}" /> %
</div>
</div>
<div class="x_control-group">
<label class="x_control-label" for="paragraph_spacing">{$lang->guide_choose_paragraph_spacing}</label>
<div class="x_controls">
<input type="number" id="paragraph_spacing" name="content_paragraph_spacing" value="{intval($editor_config->content_paragraph_spacing) ?: 0}" /> px
</div>
</div>
<div class="x_control-group">
<label class="x_control-label">{$lang->guide_choose_word_break}</label>
<div class="x_controls">
<label for="word_break_normal">
<input type="radio" name="content_word_break" id="word_break_normal" value="normal" checked="checked"|cond="$editor_config->content_word_break == 'normal' || !$editor_config->content_word_break" /> {$lang->word_break_normal}
</label>
<label for="word_break_keep_all">
<input type="radio" name="content_word_break" id="word_break_keep_all" value="keep-all" checked="checked"|cond="$editor_config->content_word_break == 'keep-all'" /> {$lang->word_break_keep_all}
</label>
<label for="word_break_break_all">
<input type="radio" name="content_word_break" id="word_break_break_all" value="break-all" checked="checked"|cond="$editor_config->content_word_break == 'break-all'" /> {$lang->word_break_break_all}
</label>
<label for="word_break_none">
<input type="radio" name="content_word_break" id="word_break_none" value="none" checked="checked"|cond="$editor_config->content_word_break == 'none'" /> {$lang->word_break_none}
</label>
</div>
</div>
<div class="x_clearfix btnArea">
@ -192,16 +224,21 @@ jQuery(function($){
var fontPreview = $('.fontPreview');
var fontSelector = $('.fontSelector');
var checkedFont = fontSelector.filter(':checked').css('fontFamily');
var changedSize = $('#fontSize').val();
var changedSize = $('#font_size').val();
//change event
fontSelector.change(function(){
var myFont = $(this).css('fontFamily');
fontPreview.css('fontFamily',myFont);
var myFont = $(this).css('font-family');
if ($(this).val() === 'Y') {
myFont = $("input[name='content_font_defined']").val();
}
fontPreview.css('font-family', myFont);
});
$('#fontSize').keyup(function(){
var mySize = $(this).val();
fontPreview.css('fontSize',mySize+'px');
$('#font_size').keyup(function(){
fontPreview.css('font-size', $(this).val() + 'px');
}).change(function(){$(this).keyup()});
$('#line_height').keyup(function(){
fontPreview.css('line-height', $(this).val() + '%');
}).change(function(){$(this).keyup()});
$('input[name=font_defined]').click(function(){