-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathupload-insert-image.html
193 lines (160 loc) · 8.22 KB
/
upload-insert-image.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easy editor - Upload and insert image into EasyEditor</title>
<link rel="stylesheet" href="style.css">
<!-- easy editor stylesheet -->
<link rel="stylesheet" href="src/easyeditor.css">
<link rel="stylesheet" href="src/easyeditor-modal.css">
</head>
<body>
<div class="container">
<h1>Easy editor <span>Upload and insert image into EasyEditor</span></h1>
<p class="p">We will use <a href="http://malsup.com/jquery/form/" target="_blank">jQuery form plugin</a> for ajax upload or you can use your preffered one!</p>
<!-- easy editor wil apply in this div -->
<div id="editor" placeholder="Type here ... ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, officiis, ipsam. Nostrum neque id quaerat, iste. Nostrum incidunt hic minus impedit voluptatibus explicabo, quo modi fugit doloribus odit provident labore. <br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime, recusandae, esse eum aliquid natus, repellat ea, temporibus eaque voluptates tempora beatae. Alias laboriosam, vero necessitatibus? Fugiat modi, voluptatum at?</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">Add modal HTML before body tag</p>
<pre class="code"><!-- easy editor modal starts -->
<div class="easyeditor-modal is-hidden" id="easyeditor-modal-1">
<div class="easyeditor-modal-content">
<div class="easyeditor-modal-content-header">Upload image</div>
<div class="easyeditor-modal-content-body">
<div class="easyeditor-modal-content-body-loader"></div>
<button class="easyeditor-modal-close">x</button>
<form action="uploader_sdk/" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="easyeditor-file">
<button type="submit" name="easyeditor-upload">Upload and insert</button>
</form>
</div>
</div>
</div>
<!-- easy editor modal ends --></pre>
<p class="p">CSS:</p>
<pre class="code"><link rel="stylesheet" href="path_to/easyeditor.css">
<link rel="stylesheet" href="path_to/easyeditor-modal.css"></pre>
<p class="p">JS:</p>
<pre class="code"><script src="path_to/jquery.min.js"></script>
<script src="path_to/jquery.form.min.js"></script>
<script src="path_to/jquery.easyeditor.js"></script>
<script>
EasyEditor.prototype.image = function(){
var _this = this;
var settings = {
buttonIdentifier: 'insert-image',
buttonHtml: 'Insert image',
clickHandler: function(){
_this.openModal('#easyeditor-modal-1');
}
};
_this.injectButton(settings);
};
jQuery(document).ready(function($) {
var easyEditor = new EasyEditor('#editor', {
buttons: ['bold', 'italic', 'link', 'image']
});
// form uploader starts using jquery.form.min.js
$loader = $('.easyeditor-modal-content-body-loader');
$('.easyeditor-modal-content-body').find('form').ajaxForm({
beforeSend: function() {
$loader.css('width', '0%');
},
uploadProgress: function(event, position, total, percentComplete) {
$loader.css('width', percentComplete + '%');
},
success: function() {
$loader.css('width', '100%');
},
complete: function(get) {
if(get.responseText != 'null') {
easyEditor.insertHtml('<figure><img src="uploader_sdk/images/'+ get.responseText +'" alt=""></figure>');
easyEditor.closeModal('#easyeditor-modal-1');
}
}
});
// form uploader ends using jquery.form.min.js
});
</script></pre>
<p class="p">PHP</p>
<pre class="code">I have added a sample uploader using PHP <a href="https://github.com/im4aLL/easyeditor/blob/master/uploader_sdk/index.php" target="_blank">located here</a> which does upload image and return filename. That's it!</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>
<!-- easy editor modal starts -->
<div class="easyeditor-modal is-hidden" id="easyeditor-modal-1">
<div class="easyeditor-modal-content">
<div class="easyeditor-modal-content-header">Upload image</div>
<div class="easyeditor-modal-content-body">
<div class="easyeditor-modal-content-body-loader"></div>
<button class="easyeditor-modal-close">x</button>
<form action="uploader_sdk/" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="easyeditor-file">
<button type="submit" name="easyeditor-upload">Upload and insert</button>
</form>
</div>
</div>
</div>
<!-- easy editor modal ends -->
<!-- dependancy js -->
<script src="vendor/jquery.min.js"></script>
<script src="vendor/jquery.form.min.js"></script>
<!-- easy editor core js -->
<script src="src/jquery.easyeditor.js"></script>
<script>
EasyEditor.prototype.image = function(){
var _this = this;
var settings = {
buttonIdentifier: 'insert-image',
buttonHtml: 'Insert image',
clickHandler: function(){
_this.openModal('#easyeditor-modal-1');
}
};
_this.injectButton(settings);
};
jQuery(document).ready(function($) {
var easyEditor = new EasyEditor('#editor', {
buttons: ['bold', 'italic', 'link', 'image']
});
// form uploader starts using jquery.form.min.js
$loader = $('.easyeditor-modal-content-body-loader');
$('.easyeditor-modal-content-body').find('form').ajaxForm({
beforeSend: function() {
$loader.css('width', '0%');
},
uploadProgress: function(event, position, total, percentComplete) {
$loader.css('width', percentComplete + '%');
},
success: function() {
$loader.css('width', '100%');
},
complete: function(get) {
if(get.responseText != 'null') {
easyEditor.insertHtml('<figure><img src="uploader_sdk/images/'+ get.responseText +'" alt=""></figure>');
easyEditor.closeModal('#easyeditor-modal-1');
}
}
});
// form uploader ends using jquery.form.min.js
});
</script>
</body>
</html>