-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathmultiple-easyeditor.html
91 lines (69 loc) · 3.49 KB
/
multiple-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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easy editor - Multiple easy editor in one page</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>Multiple easy editor in one page</span></h1>
<!-- easy editor wil apply in this div -->
<h4>Editor one: </h4>
<div class="editor" placeholder="Type here editor 1 ... ">Editor 1 ... </div>
<h4>Editor two: </h4>
<div class="editor" placeholder="Type here editor 2 ... ">Editor 2 ...</div>
<h4>Editor three:</h4>
<div class="editor-another" placeholder="Type here editor 3 ... ">Editor 3 ...</div>
<h4>Editor in textarea:</h4>
<textarea name="editor" placeholder="Type here editor 4 ... ">Editor 4 ...</textarea>
<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">Usage: </p>
<pre class="code">$('.editor').easyEditor({
buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright', 'quote', 'code', 'list', 'x']
});
$('.editor-another').easyEditor({
buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'x']
});
$('textarea[name="editor"]').easyEditor({
buttons: ['bold', 'link', 'h2', 'x']
});</pre>
<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($) {
$('.editor').easyEditor({
buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright', 'quote', 'code', 'list', 'x']
});
$('.editor-another').easyEditor({
buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'x']
});
$('textarea[name="editor"]').easyEditor({
buttons: ['bold', 'link', 'h2', 'x']
});
});
</script>
</body>
</html>