mirror of
https://github.com/leanote/leanote-android.git
synced 2026-01-14 07:00:23 +08:00
support toggling block-quote/header, loading image
This commit is contained in:
houxg
@@ -5,68 +5,26 @@
|
||||
<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>Markdown Editor</title>
|
||||
<link href="quill.snow.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor">
|
||||
</div>
|
||||
<div id="toolbar">
|
||||
<button class="ql-bold">Bold</button>
|
||||
<button class="ql-italic">Italic</button>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
</body>
|
||||
<script src="quill.js"></script>
|
||||
<script src="quill.js" type="text/javascript"></script>
|
||||
<!-- Initialize Quill editor -->
|
||||
<script>
|
||||
var nativeCallbackHandler;
|
||||
var options = {
|
||||
// debug: 'info',
|
||||
modules: {
|
||||
toolbar: '#toolbar'
|
||||
}
|
||||
};
|
||||
var quill = new Quill('#editor', options);
|
||||
quill.on('text-change', function(delta, oldDelta, source) {
|
||||
console.log('source:' + source);
|
||||
if (source == 'api') {
|
||||
console.log("An API call triggered this change.");
|
||||
} else if (source == 'user') {
|
||||
console.log("A user action triggered this change.");
|
||||
}
|
||||
for (var i = 0; i < delta.ops.length; i++) {
|
||||
var operation = delta.ops[i];
|
||||
console.log(JSON.stringify(operation));
|
||||
if (operation.hasOwnProperty('attributes')) {
|
||||
nativeCallbackHandler.onFormatChanged(JSON.stringify(operation['attributes']));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
quill.on('selection-change', function(range, oldRange, source) {
|
||||
if (range) {
|
||||
var formats = quill.getFormat();
|
||||
if (range.length == 0) {
|
||||
console.log('User cursor is on', range.index);
|
||||
nativeCallbackHandler.onCusorChanged(range.index, JSON.stringify(formats))
|
||||
} else {
|
||||
var text = quill.getText(range.index, range.length);
|
||||
console.log('User has highlighted', text);
|
||||
nativeCallbackHandler.onHighlighted(range.index, range.length, JSON.stringify(quill.getFormat(range.index, range.length)))
|
||||
}
|
||||
} else {
|
||||
console.log('Cursor not in the editor');
|
||||
}
|
||||
});
|
||||
|
||||
quill.on('editor-change', function(eventName, ...args) {
|
||||
if (eventName === 'text-change') {
|
||||
// args[0] will be delta
|
||||
} else if (eventName === 'selection-change') {
|
||||
// args[0] will be old range
|
||||
console.log('hh');
|
||||
}
|
||||
});
|
||||
|
||||
function toggleBold() {
|
||||
var currentFormat = quill.getFormat();
|
||||
if (currentFormat.hasOwnProperty('bold') && currentFormat['bold'] == true) {
|
||||
@@ -89,7 +47,6 @@
|
||||
var currentFormat = quill.getFormat();
|
||||
var currentHeadingLevel = currentFormat.hasOwnProperty('header') ? currentFormat['header'] : 1;
|
||||
var settingValue = currentHeadingLevel + 1;
|
||||
console.log("current header:" + currentHeadingLevel + ", setHeader:" + settingValue);
|
||||
quill.format('header', settingValue);
|
||||
}
|
||||
|
||||
@@ -120,6 +77,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
quill.pasteHTML('<p><h2>LEANOTE, NOT JUST A NOTEPAD! </h2>\nWelcome to Leanote! Features:\n<ul>\n\t<li>Geek paradise: Wanna Markdown? We support it!</li>\n\t<li>Private notebook: Organize your knowledge & Snap every moment</li>\n\t<li>Awesome blog: Create unique themes & Share your ideas</li>\n\t<li>Collaboration: Learn together with your friends</li>\n\t<li>...</li>\n</ul>\nRelated links:\n<ul>\n\t<li>Help us improve at <a href=\"https://github.com/leanote\" target=\"_blank\" data-mce-href=\"https://github.com/leanote\">GitHub</a></li>\n\t<li><a href=\"http://leanote.leanote.com/post/Leanote-manual-project\" target=\"_blank\" data-mce-href=\"http://leanote.leanote.com/post/Leanote-manual-project\">How to use Leanote</a></li>\n\t<li><a href=\"http://app.leanote.com\" target=\"_blank\" data-mce-href=\"http://app.leanote.com\">Leanote App</a></li>\n\t<li><a href=\"http://bbs.leanote.com\" target=\"_blank\" data-mce-href=\"http://bbs.leanote.com\">Discussion</a></li>\n\t<li>QQ Group: 326073529</li>\n</ul>\nAny questions, please feel free to email us: <a href=\"mailto:leanote@leanote.com\" data-mce-href=\"mailto:leanote@leanote.com\">leanote@leanote.com</a></p><p><hr></p><p><h2>LEANOTE, 不只是笔记！ </h2>\n欢迎来到Leanote! Leanote特性: \n<ul>\n\t<li>笔记: Leanote是一个笔记, 你可以用它来管理自己的知识.</li>\n\t<li>博客: 将笔记公开, Leanote成为你的博客, 并且有多款博客主题供您安装.</li>\n\t<li>分享协作: 你也可以将知识分享给你的好友.</li>\n\t<li>两款编辑器, 支持Markdown, 代码高亮.</li>\n\t<li>桌面端三大平台全覆盖!</li>\n\t<li>写作模式.</li>\n\t<li>....</li>\n</ul>\n相关链接:\n<ul>\n\t<li>帮助我们改善Leanote <a href=\"https://github.com/leanote\" target=\"_blank\" data-mce-href=\"https://github.com/leanote\">GitHub</a></li>\n\t<li><a href=\"http://leanote.leanote.com/post/Leanote-manual-project\" target=\"_blank\" data-mce-href=\"http://leanote.leanote.com/post/Leanote-manual-project\">Leanote教程</a></li>\n\t<li><a href=\"http://app.leanote.com\" target=\"_blank\" data-mce-href=\"http://app.leanote.com\">客户端</a></li>\n\t<li><a href=\"http://bbs.leanote.com\" target=\"_blank\" data-mce-href=\"http://bbs.leanote.com\">社区</a></li>\n\t<li>QQ 群: 326073529</li>\n</ul>\n任何问题, 欢迎发送邮件至 <a href=\"mailto:leanote@leanote.com\" data-mce-href=\"mailto:leanote@leanote.com\">leanote@leanote.com</a></p>');
|
||||
function selectionChangeHandler() {
|
||||
var range = quill.getSelection();
|
||||
if (range) {
|
||||
if (range.length == 0) {
|
||||
var formats = quill.getFormat();
|
||||
nativeCallbackHandler.onCusorChanged(range.index, JSON.stringify(formats))
|
||||
} else {
|
||||
var text = quill.getText(range.index, range.length);
|
||||
nativeCallbackHandler.onHighlighted(range.index, range.length, JSON.stringify(quill.getFormat(range.index, range.length)))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function enable() {
|
||||
document.addEventListener("selectionchange", selectionChangeHandler, false);
|
||||
quill.enable();
|
||||
}
|
||||
|
||||
function disable() {
|
||||
document.removeEventListener("selectionchange", selectionChangeHandler, false);
|
||||
quill.disable();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@@ -8782,7 +8782,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
}, {
|
||||
key: 'sanitize',
|
||||
value: function sanitize(url) {
|
||||
return (0, _link.sanitize)(url, ['http', 'https', 'data']) ? url : '//:0';
|
||||
return (0, _link.sanitize)(url, ['http', 'https', 'data', 'file']) ? url : '//:0';
|
||||
}
|
||||
}, {
|
||||
key: 'value',
|
||||
|
||||
@@ -20,9 +20,8 @@ public abstract class Editor {
|
||||
BOLD,
|
||||
ITALIC,
|
||||
ORDER_LIST,
|
||||
UNORDER_LIST;
|
||||
|
||||
public boolean isEnabled;
|
||||
UNORDER_LIST,
|
||||
BLOCK_QUOTE;
|
||||
}
|
||||
|
||||
protected EditorListener mListener;
|
||||
|
||||
@@ -2,16 +2,12 @@ package org.houxg.leamonax.editor;
|
||||
|
||||
|
||||
import android.support.annotation.NonNull;
|
||||
import android.text.TextUtils;
|
||||
import android.util.Log;
|
||||
import android.webkit.JavascriptInterface;
|
||||
|
||||
import com.google.gson.Gson;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Locale;
|
||||
import java.util.Map;
|
||||
|
||||
public class QuillCallbackHandler {
|
||||
@@ -79,6 +75,9 @@ public class QuillCallbackHandler {
|
||||
case "italic":
|
||||
formatStatusMap.put(Editor.Style.ITALIC, getBoolean((Boolean) format.getValue()));
|
||||
break;
|
||||
case "blockquote":
|
||||
formatStatusMap.put(Editor.Style.BLOCK_QUOTE, getBoolean((Boolean) format.getValue()));
|
||||
break;
|
||||
}
|
||||
}
|
||||
return formatStatusMap;
|
||||
|
||||
@@ -4,7 +4,6 @@ package org.houxg.leamonax.editor;
|
||||
import android.annotation.SuppressLint;
|
||||
import android.text.TextUtils;
|
||||
import android.util.Log;
|
||||
import android.webkit.WebChromeClient;
|
||||
import android.webkit.WebView;
|
||||
|
||||
import com.google.gson.Gson;
|
||||
@@ -52,9 +51,9 @@ public class RichTextEditor extends Editor implements OnJsEditorStateChangedList
|
||||
@Override
|
||||
public void setEditingEnabled(boolean enabled) {
|
||||
if (enabled) {
|
||||
execJs("quill.enable();");
|
||||
execJs("enable();");
|
||||
} else {
|
||||
execJs("quill.disable();");
|
||||
execJs("disable();");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -125,7 +124,6 @@ public class RichTextEditor extends Editor implements OnJsEditorStateChangedList
|
||||
@Override
|
||||
public void toggleItalic() {
|
||||
execJs("toggleItalic();");
|
||||
// execJs("quill.format('list', false);");
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@@ -7,7 +7,6 @@ import android.content.Context;
|
||||
import android.content.Intent;
|
||||
import android.net.Uri;
|
||||
import android.os.Bundle;
|
||||
import android.support.annotation.BoolRes;
|
||||
import android.support.annotation.Nullable;
|
||||
import android.util.Log;
|
||||
import android.view.LayoutInflater;
|
||||
@@ -290,6 +289,9 @@ public class EditorFragment extends Fragment implements Editor.EditorListener {
|
||||
case UNORDER_LIST:
|
||||
mUnorderListBtn.setChecked(enabled);
|
||||
break;
|
||||
case BLOCK_QUOTE:
|
||||
mQuoteBtn.setChecked(enabled);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -326,6 +328,9 @@ public class EditorFragment extends Fragment implements Editor.EditorListener {
|
||||
case UNORDER_LIST:
|
||||
mUnorderListBtn.setChecked(enabled);
|
||||
break;
|
||||
case BLOCK_QUOTE:
|
||||
mQuoteBtn.setChecked(enabled);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user