-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathdestroy-easyeditor.html
103 lines (82 loc) · 4.06 KB
/
destroy-easyeditor.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enable or Destroy easyeditor</title>
<link rel="stylesheet" href="style.css">
<!-- easy editor stylesheet -->
<link rel="stylesheet" href="src/easyeditor.css">
</head>
<body>
<div class="container">
<h1>Easy editor <span>Enable or Destroy easyeditor</span></h1>
<button type="button" class="fly-show-hide-editor" data-editor="#editor" data-behavior="show">Enable editor</button>
<button type="button" class="fly-show-hide-editor" data-editor="#editor" data-behavior="hide">Destroy editor</button>
<br><br>
<!-- easy editor wil apply in this div -->
<div id="editor" placeholder="Type here ... "><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit. Molestias ex nihil dolores numquam velit maxime consequuntur eius quaerat adipisci quibusdam voluptatem, quia laborum aperiam nisi inventore quae debitis cumque quos.</div>
<p class="p">You can change the entire look and feel, can able to add button / event / can do anything with it. Read <a href="./documentation.html">documentation here</a> or <a href="./examples.html">more example here</a></p>
<p class="p">HTML:</p>
<pre class="code"><div id="editor" placeholder="Type here ... "></div></pre>
<p class="p">CSS:</p>
<pre class="code"><link rel="stylesheet" href="path_to/easyeditor.css"></pre>
<p class="p">JS:</p>
<pre class="code">jQuery(document).ready(function($) {
var editorInstance = null;
$('.fly-show-hide-editor').click(function() {
var editor = $(this).data('editor');
var behavior = $(this).data('behavior');
if(behavior === 'show') {
editorInstance = new EasyEditor(editor);
}
else if(behavior === 'hide') {
if(editorInstance instanceof EasyEditor === true) {
editorInstance.detachEvents();
editorInstance = null;
}
}
});
});</pre>
<p>Feature requested by <a href="https://plus.google.com/109589052527737461955/about" target="_blank" rel="nofollow">Phil Wamala</a></p>
<footer>
EasyEditor is completely free and open source for educational and commercial purpose. Do whatever you want, i don't give a F!
<br>Github URL - <a href="https://github.com/im4aLL/easyeditor" target="_blank">https://github.com/im4aLL/easyeditor</a> Made with ❤ by <a href="http://habibhadi.com" target="_blank">Habib Hadi</a>
<br>Hadi: I'm not that good in JS, please improve it as the way you want. As it requires hard work & time to accomplish that so i expect a thanks at least :)
</footer>
<!-- comment starts -->
<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
href: window.location,
width: '960',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>
<!-- comment starts -->
</div>
<!-- dependancy js -->
<script src="vendor/jquery.min.js"></script>
<!-- easy editor core js -->
<script src="src/jquery.easyeditor.js"></script>
<script>
jQuery(document).ready(function($) {
var editorInstance = null;
$('.fly-show-hide-editor').click(function() {
var editor = $(this).data('editor');
var behavior = $(this).data('behavior');
if(behavior === 'show') {
editorInstance = new EasyEditor(editor);
}
else if(behavior === 'hide') {
if(editorInstance instanceof EasyEditor === true) {
editorInstance.detachEvents();
editorInstance = null;
}
}
});
});
</script>
</body>
</html>