mirror of
https://github.com/leanote/leanote-android.git
synced 2026-01-14 07:00:23 +08:00
167 lines
5.1 KiB
HTML
167 lines
5.1 KiB
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>Markdown Editor</title>
|
|
<link href="quill.bubble.css" rel="stylesheet">
|
|
<style type="text/css">
|
|
#title {outline: 0px solid transparent;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div contenteditable="false" id="title"></div>
|
|
<hr/>
|
|
<div id="content"></div>
|
|
</body>
|
|
<script src="quill.js" type="text/javascript"></script>
|
|
<!-- Initialize Quill editor -->
|
|
<script>
|
|
var nativeCallbackHandler;
|
|
var titleDiv = document.getElementById('title');
|
|
var options = {
|
|
theme: 'bubble',
|
|
modules: {
|
|
toolbar:false
|
|
}
|
|
};
|
|
var quill = new Quill('#content', options);
|
|
quill.on('text-change', function(delta, oldDelta, source) {
|
|
for (var i = 0; i < delta.ops.length; i++) {
|
|
var operation = delta.ops[i];
|
|
if (operation.hasOwnProperty('attributes')) {
|
|
nativeCallbackHandler.onFormatChanged(JSON.stringify(operation['attributes']));
|
|
}
|
|
}
|
|
});
|
|
|
|
function toggleBold() {
|
|
var currentFormat = quill.getFormat();
|
|
if (currentFormat.hasOwnProperty('bold') && currentFormat['bold'] == true) {
|
|
quill.format('bold', false);
|
|
} else {
|
|
quill.format('bold', true);
|
|
}
|
|
}
|
|
|
|
function toggleQuote() {
|
|
var currentFormat = quill.getFormat();
|
|
if (currentFormat.hasOwnProperty('blockquote') && currentFormat['blockquote'] == true) {
|
|
quill.format('blockquote', false);
|
|
} else {
|
|
quill.format('blockquote', true);
|
|
}
|
|
}
|
|
|
|
function toggleHeader() {
|
|
var currentFormat = quill.getFormat();
|
|
var currentHeadingLevel = currentFormat.hasOwnProperty('header') ? currentFormat['header'] : 1;
|
|
var settingValue = currentHeadingLevel + 1;
|
|
quill.format('header', settingValue);
|
|
}
|
|
|
|
function toggleItalic() {
|
|
var currentFormat = quill.getFormat();
|
|
if (currentFormat.hasOwnProperty('italic') && currentFormat['italic'] == true) {
|
|
quill.format('italic', false);
|
|
} else {
|
|
quill.format('italic', true);
|
|
}
|
|
}
|
|
|
|
function toggleBulletList() {
|
|
var currentFormat = quill.getFormat();
|
|
if (currentFormat.hasOwnProperty('list') && currentFormat['list'] == 'bullet') {
|
|
quill.format('list', null);
|
|
} else {
|
|
quill.format('list', 'bullet');
|
|
}
|
|
}
|
|
|
|
function toggleOrderedList() {
|
|
var currentFormat = quill.getFormat();
|
|
if (currentFormat.hasOwnProperty('list') && currentFormat['list'] == 'ordered') {
|
|
quill.format('list', null);
|
|
} else {
|
|
quill.format('list', 'ordered');
|
|
}
|
|
}
|
|
|
|
function selectionChangeHandler() {
|
|
var range = quill.getSelection();
|
|
if (range) {
|
|
if (range.length == 0) {
|
|
var formats = quill.getFormat();
|
|
nativeCallbackHandler.onCursorChanged(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 clickHandeler(e) {
|
|
var target = e.target;
|
|
if (target.tagName === 'A') {
|
|
var link = target.getAttribute('href');
|
|
var title = target.innerHTML;
|
|
e.preventDefault();
|
|
nativeCallbackHandler.gotoLink(title, link);
|
|
}
|
|
}
|
|
|
|
function enable() {
|
|
document.addEventListener("selectionchange", selectionChangeHandler, false);
|
|
document.removeEventListener("click", clickHandeler, false);
|
|
quill.enable();
|
|
titleDiv.setAttribute("contenteditable", true);
|
|
}
|
|
|
|
function disable() {
|
|
document.removeEventListener("selectionchange", selectionChangeHandler, false);
|
|
document.addEventListener("click", clickHandeler, false);
|
|
quill.disable();
|
|
titleDiv.setAttribute("contenteditable", false);
|
|
}
|
|
|
|
function insertImage(title, url) {
|
|
var range = quill.getSelection();
|
|
if (range) {
|
|
quill.insertEmbed(range.index, 'image', url);
|
|
}
|
|
}
|
|
|
|
function insertLink(title, url) {
|
|
var range = quill.getSelection();
|
|
if (range) {
|
|
quill.insertText(range.index,
|
|
title,
|
|
{'link':url});
|
|
}
|
|
}
|
|
|
|
function getTitle() {
|
|
return titleDiv.innerHTML;
|
|
}
|
|
|
|
function setTitle(title) {
|
|
return titleDiv.innerHTML = title;
|
|
}
|
|
|
|
function getSelection() {
|
|
var range = quill.getSelection();
|
|
if (range) {
|
|
var length = range.length;
|
|
if (length > 0) {
|
|
return quill.getText(range.index, range.length);
|
|
} else {
|
|
return "";
|
|
}
|
|
} else {
|
|
return "";
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|