Editor style optimization

2026-01-13 07:03:54 +08:00 · 2017-02-22 11:58:46 +08:00
parent 55ca0af690
commit 805fa0d1af
5 changed files with 234 additions and 41 deletions
--- a/app/src/main/assets/RichTextEditor/editor.html
+++ b/app/src/main/assets/RichTextEditor/editor.html
@@ -1,48 +1,18 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    <meta charset="utf-8">
    <title>RichTextEditor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="./tinymce/tinymce.min.js"></script>
-    <script src="jquery-3.1.1.min.js"></script>
-    <style type="text/css">
-        .without-border {outline: 0px solid transparent;}
-        .ace-tomorrow {
-            overflow: auto;
-            font-family: monospace, monospace;
-            font-size: 18px;
-            border: 1px solid rgb(221, 219, 204);
-            border-top-left-radius: 3px;
-            border-top-right-radius: 3px;
-            border-bottom-right-radius: 3px;
-            border-bottom-left-radius: 3px;
-            margin-top: 0px;
-            margin-bottom: 40px;
-            padding: 15px 20px;
-            color: rgb(66, 66, 66);
-            line-height: normal;
-            widows: 1;
-            background-color: rgb(241, 240, 234);
-            background-position: initial initial;
-            background-repeat: initial initial;
-        }
-
-        html, body {
-            height: 100%;
-        }
-
-        img {
-            max-width: 100%;
-        }
-
-    </style>
+    <script src="./jquery-3.1.1.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="./style.css">
 </head>

 <body>
-    <h3 id="title" style="outline: 0px solid transparent;" class="without-border" contenteditable="true"></h3>
-    <hr id="hr" />
-    <div id="content" style="outline: 0px solid transparent;"></div>
+    <div id="title" style="outline: 0px solid transparent;" class="without-border field" placeholderText="Title" contenteditable="true"></div>
+    <div contenteditable=false id=separatorDiv><hr></div>
+    <div id="content" class="field" placeholderText="Content"></div>
    <p id="dummyP" style="display:none;"></p>
 </body>

@@ -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();
    }

--- a/app/src/main/assets/RichTextEditor/style.css
+++ 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;
+}
--- a/app/src/main/assets/markdownEditor/editor-mobile.min.html
+++ b/app/src/main/assets/markdownEditor/editor-mobile.min.html
@@ -1 +1,14 @@
-<!DOCTYPE html><html lang=zh><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Leanote Markdown Editor</title></head><body class="clearfix writting"><div id=title class=field contenteditable=false></div><div contenteditable=false id=separatorDiv><hr></div><div id=mdEditor><div class=layout-wrapper-l1><div class=layout-wrapper-l2><div class=layout-wrapper-l3><div id=left-column><pre id=wmd-input class=form-control><div id=wmd-input-sub class="editor-content mousetrap field" contenteditable=false></div><div class=editor-margin></div></pre></div><div id=right-column><div class="preview-panel panel-open" id=preview-panel><div class=preview-container><div id=preview-contents><div id=wmd-preview class=preview-content></div></div></div></div></div></div><div class="navbar navbar-default" id=tools><div class=navbar-inner id=wmd-button-bar><ul class="nav left-buttons"><li class="wmd-button-group1 btn-group"></li></ul><ul class="nav left-buttons"><li class="wmd-button-group2 btn-group"></li></ul><ul class="nav left-buttons"><li class="wmd-button-group3 btn-group"></li></ul><ul class="nav left-buttons"><li class="wmd-button-group5 btn-group"></li></ul></div></div></div></div></div><link rel=stylesheet href=all.css><script src=all.js></script></body></html>
+<!DOCTYPE html><html lang=zh><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Leanote Markdown Editor</title></head><body class="clearfix writting"><div id=title placeholderText="Title" class=field contenteditable=false></div><div contenteditable=false id=separatorDiv><hr></div><div id=mdEditor><div class=layout-wrapper-l1><div class=layout-wrapper-l2><div class=layout-wrapper-l3><div id=left-column><pre id=wmd-input class=form-control><div id=wmd-input-sub class="editor-content mousetrap field" placeholderText="Content" contenteditable=false></div><div class=editor-margin></div></pre></div><div id=right-column><div class="preview-panel panel-open" id=preview-panel><div class=preview-container><div id=preview-contents><div id=wmd-preview class=preview-content></div></div></div></div></div></div><div class="navbar navbar-default" id=tools><div class=navbar-inner id=wmd-button-bar><ul class="nav left-buttons"><li class="wmd-button-group1 btn-group"></li></ul><ul class="nav left-buttons"><li class="wmd-button-group2 btn-group"></li></ul><ul class="nav left-buttons"><li class="wmd-button-group3 btn-group"></li></ul><ul class="nav left-buttons"><li class="wmd-button-group5 btn-group"></li></ul></div></div></div></div></div><link rel=stylesheet href=all.css><script src=all.js></script>
+<script>
+    // lang
+    var ms = location.href.match(/lang=(.+)/);
+    var lang = 'en';
+    if (ms) {
+        lang = ms[1].toLowerCase();
+    }
+    if (lang.indexOf('zh') >= 0) {
+        $('#title').attr('placeholderText', '标题')
+        $('#wmd-input-sub').attr('placeholderText', '内容')
+    }
+</script>
+</body></html>
--- 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) {
--- 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) {