forked from yabwe/medium-editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbutton-example.html
60 lines (55 loc) · 2.71 KB
/
button-example.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MediumEditor - Button Example</title>
<link rel="stylesheet" href="css/demo.css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../dist/css/medium-editor.css">
<link rel="stylesheet" href="../dist/css/themes/bootstrap.css">
</head>
<body>
<div id="container">
<h1>Medium Editor</h1>
<div class="editable">
<h2>Font Awesome</h2>
<p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p>
<p>I give Pirrip as my father’s family name, on the authority of his tombstone and my sister,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones...</p>
</div>
</div>
<p style="text-align: center;"><small><a style="color: #333;" target="_blank" href="http://www.goodreads.com/reader/475-great-expectations">Source</a></small></p>
<script src="../dist/js/medium-editor.js"></script>
<script src="https://cdn.lukej.me/rangy/1.2.3/rangy-core.js"></script>
<script src="https://cdn.lukej.me/rangy/1.2.3/rangy-cssclassapplier.js"></script>
<script>
rangy.init();
var HighlighterButton = MediumEditor.extensions.button.extend({
name: 'highlighter',
tagNames: ['mark'],
contentDefault: '<b>H</b>',
contentFA: '<i class="fa fa-paint-brush"></i>',
aria: 'Hightlight',
action: 'highlight',
init: function () {
MediumEditor.extensions.button.prototype.init.call(this);
this.classApplier = rangy.createCssClassApplier('highlight', {
elementTagName: 'mark',
normalize: true
});
},
handleClick: function (event) {
this.classApplier.toggleSelection();
}
});
var editor = new MediumEditor('.editable', {
toolbar: {
buttons: ['bold', 'italic', 'underline', 'highlighter']
},
buttonLabels: 'fontawesome',
extensions: {
'highlighter': new HighlighterButton()
}
});
</script>
</body>
</html>