forked from theonion/editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (155 loc) · 12.6 KB
/
index.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CMS Demo</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link href='editor-main.css' rel='stylesheet' type='text/css'></link>
<link href='inline.css' rel='stylesheet' type='text/css'></link>
<style>
#content-body .editor {
min-height: 600px;
padding-bottom: 800px;
}
</style>
</head>
<body>
<div>WORDCOUNT <span class="wordcount"></span></div>
<div id="content-wrapper" class="container">
<div class="editor-wrapper">
<div id="editorPlaceholder" class="editorPlaceholder" style="display: block;"></div>
<div id="editor" class="editor scribe"></div>
<div class="document-tools toolbar fixed">
<div class="toolbar-contents">
<button data-command-name="linkUI"><span class="fa fa-link"></span><span class="btn-label">Link</span></button>
<button data-command-name="bold"><span class="fa fa-bold"></span><span class="btn-label">Bold</span></button>
<button data-command-name="italic"><span class="fa fa-italic"></span><span class="btn-label">Italic</span></button>
<button data-command-name="h4"><span class="heading-icon">H<sub>2<sub></span><span class="btn-label">Sub Heading</span></button>
<button data-command-name="h3" class="hiddenbydefault"><span class="heading-icon">H<sub>1</sub></span><span class="btn-label">Heading</span></button>
<button class="hiddenbydefault" data-command-name="blockquote"><span class="fa fa-quote-left"></span><span class="btn-label">Block quote</span></button>
<button class="hiddenbydefault" data-command-name="insertOrderedList"><span class="fa fa-list-ol"></span><span class="btn-label">Numbered List</span></button>
<button class="hiddenbydefault" data-command-name="insertUnorderedList"><span class="fa fa-list-ul"></span><span class="btn-label">Bullet List</span></button>
<button class="hiddenbydefault" data-command-name="strikeThrough"><span class="fa fa-strikethrough"></span><span class="btn-label">Strikethrough</span></button>
<button class="hiddenbydefault" data-command-name="toggleAnchor"><span class="fa fa-anchor"></span><span class="btn-label">Anchor</span></button>
<button class="hiddenbydefault" data-command-name="removeFormat"><span class="fa fa-times"></span><span class="btn-label">Remove Formatting</span></button>
</div>
</div>
<div class="embed-modal modal fade bs-modal-lg edit-page"
tabindex="-1"
role="dialog"
aria-labelledby="extra-info"
aria-hidden="true"
data-backdrop="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Embed something</h4>
</div><!--/modal-header-->
<div class="modal-body">
<label>Embed code</label>
<textarea class="embed-body"></textarea>
<div class="embed-error alert alert-danger" style="display:none"><strong>Can't embed nothin'</strong>. Be sure to enter something into the embed code field.</div>
<label>Caption (optional)</label>
<input type="text" class="embed-caption"></input>
<br><br>
<input type="radio" name="size" value="original-original" checked> Do not resize<br>
<br>
<div>
<label>Use these for video embeds</label><br>
<input type="radio" name="size" value="big-16x9"> Big 16x9<br>
<input type="radio" name="size" value="small-16x9"> Small 16x9<br>
<input type="radio" name="size" value="big-4x3"> Big 4x3<br>
<input type="radio" name="size" value="small-4x3"> Small 4x3<br>
</div>
</div><!--/modal-body-->
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="set-embed-button btn btn-primary" aria-hidden="true">Embed</button>
</div><!--/modal-footer-->
</div><!--/modal-content-->
</div><!--/modal-dialog-->
</div>
<div class="embed-tools embed-overlay">
<button data-command-name="embed-before" class="embed-button insert-above"><span class="fa fa-plus-circle" data-command-name="show"></span></button>
<button data-command-name="embed-after" class="embed-button insert-below"><span class="fa fa-plus-circle"></span></button>
</div>
<div class="embed-fly-out" style="display: none;">
<button data-command-name="image" title="Image">
<span class="fa fa-picture-o"></span><span class="btn-label">Image</span>
</button>
<button data-command-name="onion-video" title="AV Video">
<span class="fa fa-film"></span><span class="btn-label">AV Video</span>
</button>
<button data-command-name="youtube" title="Youtube">
<span class="fa fa-youtube"></span><span class="btn-label">Youtube Video</span>
</button>
<button data-command-name="embed" title="Embed Something">
<span class="fa fa-code"></span><span class="btn-label">Embed</span>
</button>
<button data-command-name="embed-instagram" title="Embed Instagram">
<span class="fa fa-instagram"></span><span class="btn-label">Instagram</span>
</button>
<button data-command-name="hr" title="HR">
<span class="fa fa-minus"></span><span class="btn-label">Horizontal Rule</span>
</button>
</div>
<div class="inline-tools toolbar" style="display: none;">
<div class="top toolbar-contents">
<div>
<button data-command-name="inline_up" class="fa fa-arrow-up"></button>
<button data-command-name="inline_down" class="fa fa-arrow-down"></button>
<button class="size inline-attribute" data-command-name="inline_size"></button>
<button class="crop inline-attribute" name="inline_crop"></button>
</div>
</div>
<div class="remove">
<button data-command-name="inline_remove" class="fa fa-trash-o"></button>
</div>
<div class="edit">
<button data-command-name="inline_edit">Edit</button>
<button data-command-name="inline_caption">Caption</button>
</div>
</div>
<div class="link-tools toolbar" style="display:none">
<input class="link-url" type="text" placeholder="Enter URL or Search">
<button class="ok">OK</button>
<button class="remove">Remove</button>
<div class="search-results"></div>
</div>
</div>
</div>
<div style="display:none" id="content">
<p>This is an image</p>
<div data-type="image" class="onion-image image inline size-big crop-16x9" data-image-id="5" data-size="big" data-crop="16x9" contenteditable="false"><div></div><span class="caption">Testing Caption</span></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus est, si videtur, et recta quidem ad me. Duarum enim vitarum nobis erunt instituta capienda. Est tamen ea secundum naturam multoque nos ad se expetendam magis hortatur quam superiora omnia. Si enim sapiens aliquis miser esse possit, ne ego istam gloriosam memorabilemque virtutem non magno aestimandam putem. <i>Hic nihil fuit, quod quaereremus.</i> Quo studio cum satiari non possint, omnium ceterarum rerum obliti níhil abiectum, nihil humile cogitant; </p><ol><li>one</li><li>two</li><li>three</li></ol><p>1. </p><p><a href="http://loripsum.net/" target="_blank">At enim hic etiam dolore.</a> <i>Pugnant Stoici cum Peripateticis.</i> Fortitudinis quaedam praecepta sunt ac paene leges, quae effeminari virum vetant in dolore. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Ita nemo beato beatior. Desideraret enim valitudinem, vacuitatem doloris, appeteret etiam conservationem sui earumque rerum custodiam finemque, sibi constitueret secundum naturam vivere. Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; <i>Quid censes in Latino fore?</i> </p><p>In quo etsi est magnus, tamen nova pleraque et perpauca de moribus. Duo Reges: constructio interrete. Ne in odium veniam, si amicum destitero tueri. Sed in ceteris artibus cum dicitur artificiose, posterum quodam modo et consequens putandum est, quod illi §pigennhmatikÒn appellant; Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat. Legimus tamen Diogenem, Antipatrum, Mnesarchum, Panaetium, multos alios in primisque familiarem nostrum Posidonium. <i>Cur post Tarentum ad Archytam?</i> </p><blockquote><p>
Quin etiam ipsi voluptarii deverticula quaerunt et virtutes habent in ore totos dies voluptatemque primo dumtaxat expeti dicunt, deinde consuetudine quasi alteram quandam naturam effici, qua inpulsi multa faciant nullam quaerentes voluptatem.
</p></blockquote><p>Quis enim confidit semper sibi illud stabile et firmum permansurum, quod fragile et caducum sit? Si enim sapiens aliquis miser esse possit, ne ego istam gloriosam memorabilemque virtutem non magno aestimandam putem. Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Inquit, an parum disserui non verbis Stoicos a Peripateticis, sed universa re et tota sententia dissidere? Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Alterum significari idem, <a style="background-color: red;" href="http://www.example.com/testing">ut si diceretur</a>, officia media omnia aut pleraque servantem vivere. </p><ul><li>Iubet igitur nos Pythius Apollo noscere nosmet ipsos.</li><li>Sed ego in hoc resisto;</li><li>Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam perfectione virtutis;</li><li>Qua tu etiam inprudens utebare non numquam.</li><li>Sed haec omittamus;</li></ul><p><i>Sed ille, ut dixi, vitiose.</i> Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad honestatem dictorum atque factorum. Quasi ego id curem, quid ille aiat aut neget. In sapientem solum cadit, isque finis bonorum, ut ab ipsis Stoicis scriptum videmus, a Xenocrate atque ab Aristotele constitutus est. Itaque et manendi in vita et migrandi ratio omnis iis rebus, quas supra dixi, metienda. <a href="http://loripsum.net/" target="_blank">Itaque his sapiens semper vacabit.</a> Si enim ita est, vide ne facinus facias, cum mori suadeas. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Quod dicit Epicurus etiam de voluptate, quae minime sint voluptates, eas obscurari saepe et obrui. Iubet igitur nos Pythius Apollo noscere nosmet ipsos. </p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/bulbs-public-embed-instagram/dist/jquery.instagram-embed-processor.js"></script>
<script src="onion-editor.js"></script>
<script>
var editor = new OnionEditor(document.getElementById("editor"), {
inlineObjects: "inline-config.json",
multiline:true,
placeholder: {
text: "<p>WRITE HERE, COWBOY</p>",
container: document.getElementById('editorPlaceholder')
},
formatting: ['link', 'bold', 'italic', 'blockquote', 'heading', 'list', 'strike', 'underline'],
statsContainer: ".wordcount",
link: {
domain: 'avclub.com',
searchHandler: function(term, resultsElement) {
resultsElement.html("<b>" + term + "</b><br><a href='/fart/'><i>Fart</i> Fart</a><br><a href='/butt/'><i>Fart</i> Butt</a><br><a href='/dumb/'><i>Fart</i> Dumb</a><br>");
}
}
});
editor.setChangeHandler(function() {
console.log('change');
});
editor.setContent($("#content").html());
</script>
</body>
</html>