From 805fa0d1af4479e3a9616c18689111a89c77e594 Mon Sep 17 00:00:00 2001 From: life Date: Wed, 22 Feb 2017 11:58:46 +0800 Subject: [PATCH] Editor style optimization --- .../main/assets/RichTextEditor/editor.html | 59 ++---- app/src/main/assets/RichTextEditor/style.css | 197 ++++++++++++++++++ .../markdownEditor/editor-mobile.min.html | 15 +- .../houxg/leamonax/editor/MarkdownEditor.java | 2 +- .../houxg/leamonax/editor/RichTextEditor.java | 2 +- 5 files changed, 234 insertions(+), 41 deletions(-) mode change 100755 => 100644 app/src/main/assets/RichTextEditor/editor.html create mode 100644 app/src/main/assets/RichTextEditor/style.css diff --git a/app/src/main/assets/RichTextEditor/editor.html b/app/src/main/assets/RichTextEditor/editor.html old mode 100755 new mode 100644 index c531c30..7de1866 --- a/app/src/main/assets/RichTextEditor/editor.html +++ b/app/src/main/assets/RichTextEditor/editor.html @@ -1,48 +1,18 @@ - + RichTextEditor - - + + -

-
-
+
+
+
@@ -61,13 +31,24 @@ - parseInt(hr.css('marginBottom')); $('#content').css('height', contentHeight + 'px'); + // lang + var ms = location.href.match(/lang=(.+)/); + var lang = 'en'; + if (ms) { + lang = ms[1].toLowerCase(); + } + if (lang.indexOf('zh') >= 0) { + $('#title').attr('placeholderText', '标题') + $('#content').attr('placeholderText', '内容') + } + var titleDiv = document.getElementById('title'); function getTitle() { - return titleDiv.innerHTML; + return titleDiv.innerText; } function setTitle(title) { - return titleDiv.innerHTML = title; + return titleDiv.innerText = title; } tinymce.init({ @@ -128,6 +109,8 @@ } function getSelectedContent() { + return $("#content").html(); + // 因为历史原因, mindMap的data-src="-", 如果这样, 就导致mindMap的src="-", 所以直接返回html return tinyMCE.editors[0].selection.getContent(); } diff --git a/app/src/main/assets/RichTextEditor/style.css b/app/src/main/assets/RichTextEditor/style.css new file mode 100644 index 0000000..cb17242 --- /dev/null +++ b/app/src/main/assets/RichTextEditor/style.css @@ -0,0 +1,197 @@ +@font-face { + font-family: 'OpenSans'; + src: local("OpenSans"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'OpenSans'; + src: local("OpenSans-Italic"); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'OpenSans'; + src: local("OpenSans-Bold"); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'OpenSans'; + src: local("OpenSans-BoldItalic"); + font-weight: bold; + font-style: italic; +} +@font-face { + font-family: 'Merriweather'; + src: local("Merriweather Light"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Merriweather'; + src: local("Merriweather-Italic"); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Merriweather'; + src: local("Merriweather-Bold"); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Merriweather'; + src: local("Merriweather-BoldItalic"); + font-weight: bold; + font-style: italic; +} + +* { + outline: 0px solid transparent; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-touch-callout: none; +} + +html { + padding:0; + box-sizing: border-box; +} + +html, body { + margin:0; + font-family: OpenSans, 'Source Sans Pro', 'Lucida Grande', sans-serif; + font-weight: normal; + font-size:1em; + color:#2D2D2D; +} + +html, body { + height: 100%; +} + + +body { + padding-left:5px; + padding-right:5px; + padding-top: 0px; + padding-bottom: 0px; + overflow-y: auto; + min-height: 100vh; + word-wrap: break-word; +} + +p { + line-height: 24px; + margin-top: 0px; + margin-bottom: 15px; /*24*/ +} + +hr { + border: none; + height: 1px; + color: #E9EFF3; + background-color: #E9EFF3; + width: 100%; +} + +img { + max-width: 100%; + width: auto; + height: auto; + margin: 0px 0 0px 0; + min-width: 30px; + min-height: 30px; + max-width: 100%; + opacity:1; +} + +video { + width: auto; + height: auto; + margin: 0px 0px 0px 0px; + min-width: 30px; + min-height: 30px; + max-width: 100%; + opacity:1; + background:#2e4453 +} + +a { + color: #0087be; + text-decoration: none; +} + +blockquote { + background: #e8f0f5; + padding: 10px 10px 10px 20px; + margin: 10px 0 10px 0; + border-radius: 2px; +} + +div.field[contenteditable] { + padding: 15px 10px 5px 10px; + box-sizing: border-box; + font-size: 16px; +} + +div.field[placeholderText][contenteditable=true]:empty:before { + content: attr(placeholderText); + transition: 0.2s ease opacity; +} + +div.field[placeholderText][contenteditable=true]:empty:focus:before { + opacity: 0.6; +} + +blockquote p:last-child { + margin: 0; +} + +/* pre */ +pre { + text-align: start; + border: 0; + padding: 10px 20px; +} +pre{ + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; + border-radius: 3px; + display: block; +} +pre { + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; +} + +.without-border {outline: 0px solid transparent;} + +#title { + font-family:'Merriweather', serif; + /*line-height: 1;*/ + width: 100%; + box-sizing: border-box; + padding: 15px 10px 5px 10px; + min-height: 42px; + font-weight: bold; + font-size: 18px; + margin: 0px; +} +.mce-floatpanel { + display: none !important; +} + +#separatorDiv { + -webkit-user-select: none; + padding-left: 10px; + padding-right: 10px; +} + +#content { + outline: 0px solid transparent; +} \ No newline at end of file diff --git a/app/src/main/assets/markdownEditor/editor-mobile.min.html b/app/src/main/assets/markdownEditor/editor-mobile.min.html index 5bd7fff..3622612 100644 --- a/app/src/main/assets/markdownEditor/editor-mobile.min.html +++ b/app/src/main/assets/markdownEditor/editor-mobile.min.html @@ -1 +1,14 @@ -Leanote Markdown Editor
\ No newline at end of file +Leanote Markdown Editor
+ + \ No newline at end of file diff --git a/app/src/main/java/org/houxg/leamonax/editor/MarkdownEditor.java b/app/src/main/java/org/houxg/leamonax/editor/MarkdownEditor.java index 260e5b7..8f784bc 100644 --- a/app/src/main/java/org/houxg/leamonax/editor/MarkdownEditor.java +++ b/app/src/main/java/org/houxg/leamonax/editor/MarkdownEditor.java @@ -27,7 +27,7 @@ public class MarkdownEditor extends Editor { mWebView.getSettings().setJavaScriptEnabled(true); mWebView.setWebViewClient(new Editor.EditorClient()); mWebView.setWebChromeClient(new WebChromeClient()); - mWebView.loadUrl("file:///android_asset/markdownEditor/editor-mobile.min.html"); + mWebView.loadUrl("file:///android_asset/markdownEditor/editor-mobile.min.html?lang=" + Locale.getDefault().getLanguage()); } private void execJs(final String script) { diff --git a/app/src/main/java/org/houxg/leamonax/editor/RichTextEditor.java b/app/src/main/java/org/houxg/leamonax/editor/RichTextEditor.java index bdfe178..ece15e8 100644 --- a/app/src/main/java/org/houxg/leamonax/editor/RichTextEditor.java +++ b/app/src/main/java/org/houxg/leamonax/editor/RichTextEditor.java @@ -32,7 +32,7 @@ public class RichTextEditor extends Editor implements TinnyMceCallback.TinnyMceL mWebView.setWebViewClient(new EditorClient()); mWebView.setWebChromeClient(new EditorChromeClient()); mWebView.addJavascriptInterface(new TinnyMceCallback(this), JS_CALLBACK_HANDLER); - mWebView.loadUrl("file:///android_asset/RichTextEditor/editor.html"); + mWebView.loadUrl("file:///android_asset/RichTextEditor/editor.html?lang=" + Locale.getDefault().getLanguage()); } private void execJs(final String script) {