-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathimplementation-in-form.html
144 lines (113 loc) · 5.38 KB
/
implementation-in-form.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easy editor - Implementation in form</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>Implementation in form</span></h1>
<!-- easy editor wil apply in this div -->
<!-- <div id="editor" placeholder="Type here ... "></div> -->
<form action="" id="myform" class="demo-form">
<label for="title">Title</label>
<input type="text" id="title" placeholder="Enter title" value="Sample article title">
<label for="description">Description</label>
<textarea name="description" id="description" rows="10" placeholder="Enter article body">Lorem <b>ipsum</b> dolor sit amet, consectetur adipisicing elit. Ab, perferendis ut consequuntur corrupti maxime possimus atque quod doloribus, blanditiis amet cum vitae obcaecati nihil, sed nesciunt nemo recusandae in repellendus.</textarea>
<button type="submit" class="btn">Save article</button> <small>After you hit save data will show in below</small>
</form>
<div id="result">
<h3>Title</h3>
<div class="title p"></div>
<br><br>
<h3>Description</h3>
<div class="description p"></div>
</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"><form action="" id="myform" class="demo-form">
<label for="title">Title</label>
<input type="text" id="title" placeholder="Enter title">
<label for="description">Description</label>
<textarea name="description" id="<mark>description</mark>" rows="10" placeholder="Enter article body"></textarea>
<button type="submit" class="btn">Save article</button>
</form>
</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"><script src="path_to/jquery.min.js"></script>
<script src="path_to/jquery.easyeditor.js"></script>
<script>
jQuery(document).ready(function($) {
new EasyEditor('#description', {
css: ({
minHeight: '300px',
maxHeight: '500px'
}),
onLoaded: function(){
console.log('Easy Editor Loaded!');
},
buttons : ['bold', 'italic', 'link', 'code', 'x', 'source']
});
$('your_submit_button').click(function(event) {
event.preventDefault();
var data = {
title: $('#title').val(),
description: $('#description').val()
};
console.log(data);
});
});
</script></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($) {
new EasyEditor('#description', {
css: ({
minHeight: '300px',
maxHeight: '500px'
}),
onLoaded: function(){
console.log('Easy Editor Loaded!');
},
buttons : ['bold', 'italic', 'link', 'code', 'x', 'source']
});
$('#myform .btn').click(function(event) {
event.preventDefault();
var data = {
title: $('#title').val(),
description: $('#description').val()
};
console.log(data);
$('#result .title').html(data.title);
$('#result .description').html(data.description);
});
});
</script>
</body>
</html>