-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotepad.html
138 lines (115 loc) · 4.15 KB
/
notepad.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html>
<head>
<!-- Include stylesheet -->
<link href="quill/quill.snow.css" rel="stylesheet">
<style>
body {background: #F0F0F0;}
#editor-container {
height: 95%;
}
.container {
margin-bottom: 10px;
text-align: right;
}
.container a {
font-family: Helvetia, sans-serif;
}
h2 {margin-left: 55px;}
</style>
<script>
function drop_handler(ev) {
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
var data = ev.dataTransfer.getData("Text");
// Add information to quote
// data = "\n<br><div contenteditable=\"false\" style=\"width: 100%; background-color: ffffcc; font-size: 85%;\">\"" + data + "\" (Reference YEAR: PAGE#) [CITATION]</div>\n\n<br><br>";
// data = "<blockquote contenteditable=\"false\" style=\"width: 100%; background-color: ffffcc; font-size: 85%;\">\"" + data + "\" (Reference YEAR: PAGE#) [CITATION]</blockquote>";
// ev.currentTarget.innerHTML += data;
quill.insertText(quill.getLength(), data + " (Reference YEAR: PAGE#) [CITATION]\n", {
'color': '#000000',
'blockquote': true
});
quill.insertText(quill.getLength(), "\n", 'bold', true);
// console.log(data);
}
</script>
</head>
<body style="background-color: ffffff; margin: 0px;">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div style="position: absolute; right: 20px;">
<div class="g-savetodrive"
data-src="//example.com/path/to/myfile.pdf"
data-filename="My Statement.pdf"
data-sitename="My Company Name">
</div>
</div>
<!-- Create the editor container -->
<div id="editor-container" ondrop="drop_handler(event)" >
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<!--<script src="quill/image-drop.min.js"></script>-->
<!-- Initialize Quill editor -->
<script>
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
// [{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
// [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
// [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
// [{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
var Delta = Quill.import('delta');
var quill = new Quill('#editor-container', {
modules: {
toolbar: toolbarOptions,
// imageDrop: true
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
// Store accumulated changes
var change = new Delta();
quill.on('text-change', function(delta) {
change = change.compose(delta);
});
// Save periodically
setInterval(function() {
if (change.length() > 0) {
console.log('Saving changes', change);
/*
Send partial changes
$.post('/your-endpoint', {
partial: JSON.stringify(change)
});
*/
// Send entire document
$.post('/test-endpoint', {
doc: JSON.stringify(quill.getContents())
});
change = new Delta();
}
}, 5*1000);
// Check for unsaved data
window.onbeforeunload = function() {
if (change.length() > 0) {
return 'There are unsaved changes. Are you sure you want to leave?';
}
}
</script>
<!--
<div style="width: 100%; height: 100%; line-height: 1.4em;" ondrop="drop_handler(event)" ondragover="return false" ondragenter="return false" contenteditable></div>
<!--<textarea border="10px" background="#ddddff" style="width: 90%; height: 90%; border: 10px;" placeholder="This is an awesome comment box" rows="20" cols="40"></textarea>-->
</body>
</html>