From 135f0787e6d466a9bbf2c6fba0d6c6caf824f795 Mon Sep 17 00:00:00 2001 From: "jihong.lee" <0125ses@hanmail.net> Date: Thu, 4 Oct 2018 04:44:43 +0900 Subject: [PATCH] modify: button style, fix: contents style --- README.md | 24 ++++++++---------- sample/bootstrap/bootstrap.css | 2 +- sample/html/examples.html | 36 +++++++++++++++++++-------- sample/html/getting-started.html | 24 ++++++++---------- src/assets/css/suneditor-contents.css | 9 +++++++ src/assets/css/suneditor.css | 32 ++++++++++++------------ test/suneditor_build_test.js | 21 ++++++++-------- 7 files changed, 83 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 7283702c4..43c27fb0a 100644 --- a/README.md +++ b/README.md @@ -157,8 +157,7 @@ suneditor.create('sample', { ], buttonList: [ ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], - ['font', 'fontSize', 'formatBlock'], - ['removeFormat'] + ['font', 'fontSize', 'formatBlock', 'removeFormat', 'preview', 'print'] ] }) ``` @@ -201,17 +200,16 @@ import plugins from 'suneditor/src/plugins' const initEditor = suneditor.init({ plugins: plugins, buttonList: [ - ['undo', 'redo'], - ['font', 'fontSize', 'formatBlock'], - ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], - ['removeFormat'], - '/', // line break - ['fontColor', 'hiliteColor'], - ['indent', 'outdent'], - ['align', 'horizontalRule', 'list', 'table'], - ['link', 'image', 'video'], - ['fullScreen', 'showBlocks', 'codeView'], - ['preview', 'print'] + ['undo', 'redo', + 'font', 'fontSize', 'formatBlock', + 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', + 'removeFormat', + 'fontColor', 'hiliteColor', + 'indent', 'outdent', + 'align', 'horizontalRule', 'list', 'table', + 'link', 'image', 'video', + 'fullScreen', 'showBlocks', 'codeView', + 'preview', 'print'] ] }); diff --git a/sample/bootstrap/bootstrap.css b/sample/bootstrap/bootstrap.css index efe9c1ddb..12b103945 100644 --- a/sample/bootstrap/bootstrap.css +++ b/sample/bootstrap/bootstrap.css @@ -1477,7 +1477,7 @@ abbr[data-original-title] { blockquote { padding: 10px 20px; margin: 0 0 20px; - /* font-size: 17.5px; */ + font-size: 17.5px; border-left: 5px solid #eee; } blockquote p:last-child, diff --git a/sample/html/examples.html b/sample/html/examples.html index 969e5f8b9..976e90f11 100644 --- a/sample/html/examples.html +++ b/sample/html/examples.html @@ -116,8 +116,7 @@

1. Options Setting

- 
SUNEDITOR.create('sample',{
-            // insert options
+        
SUNEDITOR.create('exampleOptions',{
             fontSize : [
                 8, 10, 14, 18, 24, 36
             ],
@@ -126,18 +125,25 @@ 
1. Options Setting

                 'tahoma',
                 'Courier New,Courier'
             ],
-            width : '450px',
+            width : '100%',
             height : '150px',
             videoX : 360,
             videoY : 115,
-            imageSize : 150,
+            imageSize : 150,
             buttonList : [
-                ['font', 'fontSize'],
-                ['image', 'video'
+                ['undo', 'redo',
+                'font', 'fontSize', 'formatBlock',
+                'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript',
+                'removeFormat',
+                'fontColor', 'hiliteColor',
+                'indent', 'outdent',
+                'align', 'horizontalRule', 'list', 'table',
+                'link', 'image', 'video',
+                'fullScreen', 'showBlocks', 'codeView',
+                'preview', 'print']
             ],
-            popupDisplay: 'full'
-        });

-        

+            popupDisplay: 'full'
+        });

@@ -327,8 +333,16 @@

3-1. Sample) Java

videoY : 115, imageSize : 150, buttonList : [ - ['font', 'fontSize'], - ['image', 'video'] + ['undo', 'redo', + 'font', 'fontSize', 'formatBlock', + 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', + 'removeFormat', + 'fontColor', 'hiliteColor', + 'indent', 'outdent', + 'align', 'horizontalRule', 'list', 'table', + 'link', 'image', 'video', + 'fullScreen', 'showBlocks', 'codeView', + 'preview', 'print'] ], popupDisplay: 'full' }); diff --git a/sample/html/getting-started.html b/sample/html/getting-started.html index 6b849cd4c..34d382df1 100644 --- a/sample/html/getting-started.html +++ b/sample/html/getting-started.html @@ -162,8 +162,7 @@

3. Load all plugins

], buttonList: [ ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], - ['font', 'fontSize', 'formatBlock'], - ['removeFormat'] + ['font', 'fontSize', 'formatBlock', 'removeFormat', 'preview', 'print'] ] }) @@ -201,17 +200,16 @@

5. Use init function

const initEditor = suneditor.init({ plugins: plugins, buttonList: [ - ['undo', 'redo'], - ['font', 'fontSize', 'formatBlock'], - ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], - ['removeFormat'], - '/', // line break - ['fontColor', 'hiliteColor'], - ['indent', 'outdent'], - ['align', 'horizontalRule', 'list', 'table'], - ['link', 'image', 'video'], - ['fullScreen', 'showBlocks', 'codeView'], - ['preview', 'print'] + ['undo', 'redo', + 'font', 'fontSize', 'formatBlock', + 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', + 'removeFormat', + 'fontColor', 'hiliteColor', + 'indent', 'outdent', + 'align', 'horizontalRule', 'list', 'table', + 'link', 'image', 'video', + 'fullScreen', 'showBlocks', 'codeView', + 'preview', 'print'] ] }); diff --git a/src/assets/css/suneditor-contents.css b/src/assets/css/suneditor-contents.css index ff835c695..858380785 100644 --- a/src/assets/css/suneditor-contents.css +++ b/src/assets/css/suneditor-contents.css @@ -2,11 +2,20 @@ .sun-editor-editable { font-family: Helvetica Neue, sans-serif; font-size: 13px; + color: #000; + background-color: #fff; word-break: break-all; padding: 10px 20px 10px 20px; margin: 0; } +.sun-editor-editable * { + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: inherit; +} + /* float */ .sun-editor-editable .float-left { float: left; diff --git a/src/assets/css/suneditor.css b/src/assets/css/suneditor.css index 9d959fe31..b54b7c03e 100644 --- a/src/assets/css/suneditor.css +++ b/src/assets/css/suneditor.css @@ -1,10 +1,11 @@ /* suneditor main */ -.sun-editor {width:auto; height:auto; box-sizing:border-box; font-family:inherit; border:1px solid #dadada; background-color:#FFF;} +.sun-editor {width:auto; height:auto; box-sizing:border-box; font-family:Helvetica Neue, sans-serif; border:1px solid #dadada; background-color:#FFF;} .sun-editor * {box-sizing:border-box; user-select: none; -webkit-user-drag:none;} -.sun-editor-common th, .sun-editor-common td, .sun-editor-common input, .sun-editor-common select, .sun-editor-common textarea, .sun-editor-common button {font-size:14px; line-height:1.5; color:#111;} +.sun-editor-common input, .sun-editor-common select, .sun-editor-common textarea, .sun-editor-common button {font-size:14px; line-height:1.5;} .sun-editor-common body, .sun-editor-common div, .sun-editor-common dl, .sun-editor-common dt, .sun-editor-common dd, .sun-editor-common ul, .sun-editor-common ol, .sun-editor-common li, -.sun-editor-common h1, .sun-editor-common h2, .sun-editor-common h3, .sun-editor-common h4, .sun-editor-common h5, .sun-editor-common h6, .sun-editor-common pre, .sun-editor-common code, .sun-editor-common form, .sun-editor-common fieldset, -.sun-editor-common legend, .sun-editor-common textarea, .sun-editor-common p, .sun-editor-common blockquote, .sun-editor-common th, .sun-editor-common td, .sun-editor-common input, .sun-editor-common select, .sun-editor-common textarea, .sun-editor-common button {margin:0; padding:0; border:0; color:#000 !important;} +.sun-editor-common h1, .sun-editor-common h2, .sun-editor-common h3, .sun-editor-common h4, .sun-editor-common h5, .sun-editor-common h6, .sun-editor-common pre, .sun-editor-common code, +.sun-editor-common form, .sun-editor-common fieldset, .sun-editor-common legend, .sun-editor-common textarea, .sun-editor-common p, .sun-editor-common blockquote, .sun-editor-common th, +.sun-editor-common td, .sun-editor-common input, .sun-editor-common select, .sun-editor-common textarea, .sun-editor-common button {margin:0; padding:0; border:0; color:#000 !important;} .sun-editor-common dl, .sun-editor-common ul, .sun-editor-common ol, .sun-editor-common menu, .sun-editor-common li {list-style: none !important;} .sun-editor-common hr {margin:6px 0 6px 0 !important;} .sun-editor textarea {resize:none !important; border:0 !important;} @@ -90,22 +91,22 @@ /* container */ .sun-editor .sun-editor-container {position:relative; width:100%; height:100%;} -/* arrow */ +/* controller arrow */ .sun-editor .arrow, .sun-editor .arrow:after {position:absolute; display:block; width:0; height:0; border:11px solid transparent;} .sun-editor .arrow {top:-11px; left:20px !important; margin-left:-11px; border-top-width:0; border-bottom-color:#999; border-bottom-color:rgba(0, 0, 0, .25);} .sun-editor .arrow:after {top:1px; margin-left:-10px; content:" "; border-top-width:0; border-bottom-color:#fff;} /* tool bar */ -.sun-editor .sun-editor-id-toolbar-cover {position:absolute; display:none; font-size:36px; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:#fefefe; opacity:.5; filter:alpha(opacity=50); cursor:not-allowed; z-index:1;} -.sun-editor .sun-editor-id-toolbar {overflow:visible; position:relative; height:auto; font-family:Helvetica Neue, sans-serif; padding:3px 3px 3px 0; background-color:#fafafa; border-bottom:1px solid #dadada;} +.sun-editor .sun-editor-id-toolbar-cover {position:absolute; display:none; font-size:36px; width:100%; height:100%; top:0; left:0; background-color:#fefefe; opacity:.5; filter:alpha(opacity=50); cursor:not-allowed; z-index:1;} +.sun-editor .sun-editor-id-toolbar {display:block; overflow:visible; position:relative; height:auto; padding:3px; margin:0; background-color:#fafafa; border-bottom:1px solid #dadada;} .sun-editor .tool_module {display:inline-block;} -.sun-editor .tool_module_enter {display:block; width:0; height:0;} -.sun-editor .editor_tool {float: left;height: 32px;margin:5px 0 5px 5px;} -.sun-editor .editor_tool li {position:relative; float:left;} +.sun-editor .tool_module_enter {display:block; width:100%; height:1px; margin-bottom:5px; background-color:transparent;} +.sun-editor .editor_tool {float:left; padding:0; margin:0;} +.sun-editor .editor_tool li {position:relative; float:left; padding:0; margin:0;} /** .btn_editor button effect */ -.sun-editor .btn_editor {overflow:hidden; float:left; width:32px; height:32px; border:0; margin-left:2px; font-size:12px; line-height:27px; background-color:transparent;} +.sun-editor .btn_editor {overflow:hidden; float:left; width:35px; height:35px; border:0; margin:0 1px 0 1px !important; font-size:12px; line-height:27px;} .sun-editor .btn_editor:enabled:hover, .sun-editor .btn_editor:enabled:focus {background-color: #d4e3ea; border-color: #bbd5e0; outline: 0 none;} .sun-editor .btn_editor:enabled:active {border-color:#bbd5e0; background-color:#d4e3ea; -webkit-box-shadow: inset 0 3px 5px #bbd5e0; box-shadow: inset 0 3px 5px #bbd5e0;} /** .btn_editor.on button effect */ @@ -158,13 +159,12 @@ .sun-editor .layer_editor.layer_line {left:0; width:158px;} .sun-editor .btn_edit {width:100%; height:28px; padding:0 14px; margin-left:0; font-size:12px; line-height:22px; text-indent:0; text-decoration:none; text-align:left;} -.sun-editor .btn_font {width:100px; text-align:left; text-indent:7px; padding:0 5px 0 5px;} -.sun-editor .btn_format {width:100px; text-align:left; text-indent:7px; padding:0 5px 0 5px;} -.sun-editor .btn_size {width:70px; text-align:left; text-indent:7px; padding:0 5px 0 5px;} -.sun-editor .btn_line {padding:0 5px 0 5px;} +.sun-editor .btn_font {width:100px; text-align:left; text-indent:7px; padding:0;} +.sun-editor .btn_format {width:90px; text-align:left; text-indent:7px; padding:0;} +.sun-editor .btn_size {width:70px; text-align:left; text-indent:7px; padding:0;} .sun-editor .btn_font .txt {width:65px; float:left;} -.sun-editor .btn_format .txt {width:65px; float:left;} +.sun-editor .btn_format .txt {width:55px; float:left;} .sun-editor .btn_size .txt {width:35px; float:left;} /* editor area */ diff --git a/test/suneditor_build_test.js b/test/suneditor_build_test.js index f14b64552..5dd7568a9 100644 --- a/test/suneditor_build_test.js +++ b/test/suneditor_build_test.js @@ -12,17 +12,16 @@ import custom_plugin_submenu from './custom_plugin_submenu' suneditor.create(document.getElementById('editor'), { plugins: plugins, buttonList: [ - ['undo', 'redo'], - ['font', 'fontSize', 'formatBlock'], - ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], - ['removeFormat'], - '/', - ['fontColor', 'hiliteColor'], - ['indent', 'outdent'], - ['align', 'horizontalRule', 'list', 'table'], - ['link', 'image', 'video'], - ['fullScreen', 'showBlocks', 'codeView'], - ['preview', 'print'] + ['undo', 'redo', + 'font', 'fontSize', 'formatBlock', + 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', + 'removeFormat', + 'fontColor', 'hiliteColor', + 'indent', 'outdent', + 'align', 'horizontalRule', 'list', 'table', + 'link', 'image', 'video', + 'fullScreen', 'showBlocks', 'codeView', + 'preview', 'print'] ] });