wysiwyg 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,5 @@
1
+ require "wysiwyg/version"
2
+
3
+ module Wysiwyg
4
+ # Your code goes here...
5
+ end
@@ -0,0 +1,5 @@
1
+ require "wysiwyg/version"
2
+
3
+ module Wysiwyg
4
+ # Your code goes here...
5
+ end
@@ -0,0 +1,3 @@
1
+ module Wysiwyg
2
+ VERSION = "0.0.1"
3
+ end
@@ -0,0 +1,152 @@
1
+ $ ->
2
+
3
+ $.fn.extend
4
+ wysiwyg: (options) ->
5
+ settings =
6
+ image_upload: true
7
+ image_upload_url: '/admin/uploads'
8
+
9
+ settings = $.extend settings, options
10
+
11
+ return @each () ->
12
+ new Wysiwyg this, settings
13
+
14
+ class Wysiwyg
15
+ constructor: (@element, @settings) ->
16
+ @textarea = $(@element).addClass("wysiwyg-textarea").hide()
17
+ @container = $("<div class='wysiwyg-container'></div>")
18
+ @root = @textarea.wrap(@container)
19
+ if @textarea.val() then @text = @textarea.val() else @text = "<p><br/></p>"
20
+ @editor = $("<div class='wysiwyg-editor' style='width:" + @textarea.css('width') + ";height:" + @textarea.css('height') + ";' contenteditable>" + @text + "</div>")
21
+ @textarea.bind 'keyup keypress change click blur enter', ->
22
+ content = $(this).val()
23
+ $(this).parent().find('.wysiwyg-editor').html(content)
24
+ @editor.bind 'keyup keypress change click blur enter', ->
25
+ content = $(this).html()
26
+ $(this).parent().find('.wysiwyg-textarea').val(content)
27
+
28
+ # images upload
29
+ @images = $("<div class='wysiwyg-images-container' style='margin-left:" + @textarea.css('width') + "'><form id='wysiwyg-images-upload-form' style='margin:0px;' action=" + @settings.image_upload_url + " method='POST' enctype='multipart/form-data'><div class='wysiwyg-images-dropzone'>Перетащите изображения сюда</div></form><a href='javascript:void(0)' class='wysiwyg-images-slideshow'>Вставить слайдшоу</a><div class='wysiwyg-images-list'></div></div>")
30
+ $(@images).find('.wysiwyg-images-slideshow').bind 'click', (evt) ->
31
+ images_list = $(this).parent().find('.wysiwyg-images-list')
32
+ new Wysiwyg::slideshow(images_list)
33
+ $(@images).find('.wysiwyg-images-dropzone').bind 'dragenter dragover dragleave', (evt) ->
34
+ evt.stopPropagation()
35
+ evt.preventDefault()
36
+ return false
37
+ $(@images).find('.wysiwyg-images-dropzone').bind 'drop', (evt) =>
38
+ form = $(this).parent().parent().find('#wysiwyg-images-upload-form')
39
+ evt.stopPropagation()
40
+ evt.preventDefault()
41
+ files = evt.originalEvent.dataTransfer.files
42
+ for file in files
43
+ new Wysiwyg::uploadImage(form,@settings.image_upload_url,file)
44
+
45
+ @toolbar = $("<div class='wysiwyg-toolbar' style='width:" + @textarea.css('width') + "'></div>")
46
+ @code_button = $("<a href='javascript:void(0)' style='float:right;margin-right:10px;padding-top:8px;'>Код</a>").bind 'click', =>
47
+ if $(@textarea).is(':hidden')
48
+ $(@textarea).show()
49
+ $(@editor).hide()
50
+ $(@code_button).addClass("wysiwyg-code-button-active")
51
+ $(@code_button).parent().find("a.wysiwyg-button").fadeOut(450)
52
+ $(@code_button).parent().find(".wysiwyg-button-separator").fadeOut(450)
53
+ else
54
+ $(@textarea).hide()
55
+ $(@editor).show()
56
+ $(@code_button).removeClass("wysiwyg-code-button-active")
57
+ $(@code_button).parent().find("a.wysiwyg-button").fadeIn(450)
58
+ $(@code_button).parent().find(".wysiwyg-button-separator").fadeIn(450)
59
+ @buttons = new Buttons
60
+ @toolbar.append(@buttons.display(1),@buttons.display(2),@buttons.display(3),@buttons.display(0),@buttons.display(4),@buttons.display(5),@buttons.display(0),@buttons.display(6),@buttons.display(7),@buttons.display(8),@buttons.display(0),@buttons.display(9),@buttons.display(10),@buttons.display(0),@buttons.display(11),@buttons.display(12),@buttons.display(13),@code_button)
61
+
62
+ if @settings.image_upload then @root.before(@images,@toolbar,@editor) else @root.before(@toolbar,@editor)
63
+
64
+ uploadImage: (upload_form,upload_url,file) ->
65
+ reader = new FileReader();
66
+ reader.readAsDataURL(file)
67
+ reader.onloadend = () ->
68
+ form = upload_form
69
+ fd = new FormData(form)
70
+ fd.append('file',file)
71
+ $.ajax
72
+ url: upload_url
73
+ type: 'POST'
74
+ data: fd
75
+ processData: false
76
+ contentType: false
77
+ cache: false
78
+ dataType: 'text'
79
+ success: (response) ->
80
+ response = $.parseJSON(response)
81
+ @image = new Wysiwyg::image(response.thumb_url,response.image_url,response.image_id).prependTo('.wysiwyg-images-list').hide().slideDown()
82
+
83
+ image: (thumb, url, id) ->
84
+ @image = $("<div class='wysiwyg-image' id='" + id + "'><input type='hidden' class='image-full-url' value='" + url + "'><input type='checkbox' class='wysiwyg-check-image'><img src='" + thumb + "'><textarea class='wysiwyg-descr-image'></textarea><div class='wysiwyg-options-image'><a href='javascript:void(0)' class='wysiwyg-insert-image'>Вставить в текст</a><a href='javascript:void(0)' class='wysiwyg-delete-image'>Удалить</a></div></div>")
85
+ $(@image).find(".wysiwyg-insert-image").bind 'click', ->
86
+ image_title = $(this).parent().parent().find('.wysiwyg-descr-image').val()
87
+ if image_title.length > 0 then return (document.execCommand('insertHTML', false, "<img src='" + url + "' alt='" + image_title + "'>")) else return (document.execCommand('insertHTML', false, "<img src='" + url + "'>"))
88
+ $(@image).find(".wysiwyg-delete-image").bind 'click', ->
89
+ $(this).parent().parent().remove()
90
+ $(@image).find(".wysiwyg-check-image").bind 'click', ->
91
+ if $(this).is(':checked')
92
+ $(this).parent().addClass("wysiwyg-image-selected")
93
+ else
94
+ $(this).parent().removeClass("wysiwyg-image-selected")
95
+ return @image
96
+
97
+ slideshow: (images_list) ->
98
+ slideshow_code = "<ins class='b-slideshow'>\n"
99
+ images_list.find("input:checked").parent().each ->
100
+ slideshow_code += "<ins class='image'>\n"
101
+ slideshow_code += "<img src='" + $(this).find('.image-full-url').val() + "'>\n"
102
+ image_title = $(this).find('.wysiwyg-descr-image').val()
103
+ if image_title.length > 0
104
+ slideshow_code += "<span class='img-caption'><i>" + $(this).find('.wysiwyg-descr-image').val() + "</i></span>\n"
105
+ slideshow_code += "</ins>\n"
106
+ slideshow_code += "</ins>"
107
+ return document.execCommand('insertHTML', false, slideshow_code)
108
+
109
+ class Buttons
110
+ display: (id) ->
111
+ switch id
112
+ when 0
113
+ $("<span class='wysiwyg-button-separator'></span>")
114
+ when 1
115
+ $("<a href='javascript:void(0)' title='Параграф' class='wysiwyg-button wysiwyg-button-paragraph'></a>").bind 'click', ->
116
+ document.execCommand('formatblock', false, 'P')
117
+ when 2
118
+ $("<a href='javascript:void(0)' title='Полужирный' class='wysiwyg-button wysiwyg-button-bold'></a>").bind 'click', ->
119
+ document.execCommand('bold', false, null)
120
+ when 3
121
+ $("<a href='javascript:void(0)' title='Наклонный' class='wysiwyg-button wysiwyg-button-italic'></a>").bind 'click', ->
122
+ document.execCommand('italic', false, null)
123
+ when 4
124
+ $("<a href='javascript:void(0)' title='Ненумерованный список' class='wysiwyg-button wysiwyg-button-unorderList'></a>").bind 'click', ->
125
+ document.execCommand('insertunorderedlist', false, null)
126
+ when 5
127
+ $("<a href='javascript:void(0)' title='Нумерованный список' class='wysiwyg-button wysiwyg-button-orderList'></a>").bind 'click', ->
128
+ document.execCommand('insertorderedlist', false, null)
129
+ when 6
130
+ $("<a href='javascript:void(0)' title='По левому краю' class='wysiwyg-button wysiwyg-button-left'></a>").bind 'click', ->
131
+ document.execCommand('justifyleft', false, null)
132
+ when 7
133
+ $("<a href='javascript:void(0)' title='По центру' class='wysiwyg-button wysiwyg-button-center'></a>").bind 'click', ->
134
+ document.execCommand('justifycenter', false, null)
135
+ when 8
136
+ $("<a href='javascript:void(0)' title='По правому краю' class='wysiwyg-button wysiwyg-button-right'></a>").bind 'click', ->
137
+ document.execCommand('justifyright', false, null)
138
+ when 9
139
+ $("<a href='javascript:void(0)' title='Заголовок H2' class='wysiwyg-button wysiwyg-button-h2'></a>").bind 'click', ->
140
+ document.execCommand('formatblock', false, 'h2')
141
+ when 10
142
+ $("<a href='javascript:void(0)' title='Заголовок H3' class='wysiwyg-button wysiwyg-button-h3'></a>").bind 'click', ->
143
+ document.execCommand('formatblock', false, 'h3')
144
+ when 11
145
+ $("<a href='javascript:void(0)' title='Ссылка' class='wysiwyg-button wysiwyg-button-link'></a>").bind 'click', ->
146
+ document.execCommand('createlink', false, (prompt 'Введите URL:', 'http://'))
147
+ when 12
148
+ $("<a href='javascript:void(0)' title='Видео' class='wysiwyg-button wysiwyg-button-video'></a>").bind 'click', ->
149
+ document.execCommand('insertHTML', false, (prompt 'Введите код видео:', null))
150
+ when 13
151
+ $("<a href='javascript:void(0)' title='Цитата' class='wysiwyg-button wysiwyg-button-quote'></a>").bind 'click', ->
152
+ document.execCommand('formatBlock', false, "<blockquote>")
@@ -0,0 +1,332 @@
1
+ .wysiwyg-editor {
2
+ border: 1px solid #ccc;
3
+ -webkit-border-radius: 3px;
4
+ border-radius: 3px;
5
+ overflow-y:auto;
6
+ padding:4px;
7
+ margin-top:4px;
8
+ }
9
+ .wysiwyg-editor:focus {
10
+ outline: 0;
11
+ border-color: rgba(82, 168, 236, 0.8);
12
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
13
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
14
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
15
+ }
16
+ .wysiwyg-textarea {
17
+ border: 1px solid #ccc;
18
+ -webkit-border-radius: 3px;
19
+ border-radius: 3px;
20
+ overflow-y:auto;
21
+ padding:4px;
22
+ margin-top:4px;
23
+ height:400px;
24
+ background-color:#535353;
25
+ color:white;
26
+ }
27
+ .wysiwyg-editor p {
28
+ background-color:#eeeeee;
29
+ margin:4px;
30
+ padding:8px 8px 8px 14px;
31
+ -webkit-border-radius: 3px;
32
+ border-radius: 3px;
33
+ position: relative;
34
+ }
35
+ .wysiwyg-editor p:before {
36
+ content: "P";
37
+ position:absolute;
38
+ top:1px;
39
+ left:4px;
40
+ display:block;
41
+ font-size:10px;
42
+ text-transform:uppercase;
43
+ color:grey;
44
+ }
45
+ .wysiwyg-editor h2 {
46
+ border:2px solid #eeeeee;
47
+ margin:4px;
48
+ padding:6px 6px 6px 12px;
49
+ -webkit-border-radius: 3px;
50
+ border-radius: 3px;
51
+ position: relative;
52
+ line-height: normal;
53
+ }
54
+ .wysiwyg-editor h2:before {
55
+ content: "H2";
56
+ position:absolute;
57
+ top:1px;
58
+ left:4px;
59
+ display:block;
60
+ font-size:10px;
61
+ text-transform:uppercase;
62
+ font-weight: normal;
63
+ color:grey;
64
+ }
65
+ .wysiwyg-editor h3 {
66
+ border:2px solid #eeeeee;
67
+ margin:4px;
68
+ padding:6px 6px 6px 12px;
69
+ -webkit-border-radius: 3px;
70
+ border-radius: 3px;
71
+ position: relative;
72
+ line-height: normal;
73
+ }
74
+ .wysiwyg-editor h3:before {
75
+ content: "H3";
76
+ position:absolute;
77
+ top:1px;
78
+ left:4px;
79
+ display:block;
80
+ font-size:10px;
81
+ text-transform:uppercase;
82
+ font-weight: normal;
83
+ color:grey;
84
+ }
85
+ .wysiwyg-editor blockquote {
86
+ border:2px dotted #eeeeee;
87
+ margin:4px;
88
+ padding:6px 6px 6px 12px;
89
+ -webkit-border-radius: 3px;
90
+ border-radius: 3px;
91
+ position: relative;
92
+ line-height: normal;
93
+ }
94
+ .wysiwyg-editor blockquote:before {
95
+ content: "BQ";
96
+ position:absolute;
97
+ top:1px;
98
+ left:4px;
99
+ display:block;
100
+ font-size:10px;
101
+ text-transform:uppercase;
102
+ font-weight: normal;
103
+ color:grey;
104
+ }
105
+ a.wysiwyg-images-slideshow {
106
+ margin-top:8px;
107
+ margin-bottom:4px;
108
+ width:250px;
109
+ text-align:center;
110
+ cursor: pointer;
111
+ display: inline-block;
112
+ background-color: #e6e6e6;
113
+ background-repeat: no-repeat;
114
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
115
+ background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
116
+ background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
117
+ background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
118
+ background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
119
+ background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
120
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
121
+ padding-top:10px;
122
+ padding-bottom:10px;
123
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
124
+ color: #333;
125
+ font-size: 13px;
126
+ line-height: normal;
127
+ border: 1px solid #ccc;
128
+ border-bottom-color: #bbb;
129
+ -webkit-border-radius: 4px;
130
+ -moz-border-radius: 4px;
131
+ border-radius: 4px;
132
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
133
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
134
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
135
+ -webkit-transform-style: preserve-3d;
136
+ -webkit-transition: 0.1s linear all;
137
+ -moz-transition: 0.1s linear all;
138
+ -ms-transition: 0.1s linear all;
139
+ -o-transition: 0.1s linear all;
140
+ transition: 0.1s linear all;
141
+ margin-right:2px;
142
+ }
143
+ a.wysiwyg-images-slideshow:hover {
144
+ background-position: 0 -15px;
145
+ color: #333;
146
+ text-decoration: none;
147
+ }
148
+ a.wysiwyg-images-slideshow:focus {
149
+ outline: 1px dotted #666;
150
+ }
151
+
152
+ .wysiwyg-toolbar {
153
+ -webkit-border-radius: 3px;
154
+ border-radius: 3px;
155
+ height:33px;
156
+ padding-left:10px;
157
+ background-color: #222;
158
+ background-color: #222222;
159
+ background-repeat: repeat-x;
160
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
161
+ background-image: -moz-linear-gradient(top, #333333, #222222);
162
+ background-image: -ms-linear-gradient(top, #333333, #222222);
163
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
164
+ background-image: -webkit-linear-gradient(top, #333333, #222222);
165
+ background-image: -o-linear-gradient(top, #333333, #222222);
166
+ background-image: linear-gradient(top, #333333, #222222);
167
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
168
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
169
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
170
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
171
+ }
172
+
173
+ .wysiwyg-toolbar:after {
174
+ content:".";
175
+ display:block;
176
+ height:0;
177
+ clear:both;
178
+ visibility:hidden;
179
+ }
180
+
181
+ .wysiwyg-toolbar a {
182
+ color: #bfbfbf;
183
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
184
+ padding: 8px;
185
+ padding-bottom:12px;
186
+ padding-top:6px;
187
+ text-decoration:none;
188
+ float:left;
189
+ }
190
+ .wysiwyg-toolbar a:hover {
191
+ background-color: #333;
192
+ background-color: rgba(255, 255, 255, 0.05);
193
+ color: #ffffff;
194
+ text-decoration: none;
195
+ }
196
+
197
+ .wysiwyg-toolbar a.wysiwyg-code-button-active {
198
+ background-color: #e6e6e6;
199
+ background-repeat: no-repeat;
200
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
201
+ background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
202
+ background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
203
+ background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
204
+ background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
205
+ background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
206
+ color: #333;
207
+ text-decoration: none;
208
+ }
209
+
210
+ .wysiwyg-button-separator {
211
+ width:1px;
212
+ height:33px;
213
+ float:left;
214
+ background-color: #4a4a4a;
215
+ }
216
+
217
+ .wysiwyg-images-container {
218
+ position:absolute;
219
+ padding-left:18px;
220
+ height:447px;
221
+ }
222
+ .wysiwyg-images-dropzone {
223
+ border: 1px solid #eee;
224
+ -webkit-border-radius: 3px;
225
+ border-radius: 3px;
226
+ width:250px;
227
+ padding-top:30px;
228
+ padding-bottom:30px;
229
+ text-align:center;
230
+ background-color:#eee;
231
+ }
232
+ .wysiwyg-images-list {
233
+ border: 1px solid #ccc;
234
+ -webkit-border-radius: 3px;
235
+ border-radius: 3px;
236
+ width:250px;
237
+ height:320px;
238
+ overflow-y:scroll;
239
+ margin:0px;
240
+ padding:0px;
241
+ }
242
+ .wysiwyg-image {
243
+ background-color:white;
244
+ margin-bottom:1px;
245
+ padding:8px;
246
+ position: relative;
247
+ border-bottom:1px solid #ccc;
248
+ }
249
+ .wysiwyg-image img {
250
+ position:absolute;
251
+ }
252
+ input.wysiwyg-check-image {
253
+ position:absolute;
254
+ z-index:2;
255
+ margin:2px;
256
+ }
257
+ textarea.wysiwyg-descr-image {
258
+ margin-left:78px;
259
+ height:60px;
260
+ border: 1px solid #ccc;
261
+ padding:4px;
262
+ width:131px;
263
+ }
264
+ .wysiwyg-options-image {
265
+ margin-top:6px;
266
+ }
267
+ .wysiwyg-options-image:after {
268
+ content:".";
269
+ display:block;
270
+ height:0;
271
+ clear:both;
272
+ visibility:hidden;
273
+ }
274
+ .wysiwyg-insert-image {
275
+ float:left;
276
+ font-size:11px;
277
+ }
278
+ .wysiwyg-delete-image {
279
+ float:right;
280
+ font-size:11px;
281
+ }
282
+ .wysiwyg-image-selected {
283
+ background-color:#d3e9fb;
284
+ }
285
+ .wysiwyg-button {
286
+ background: url(../assets/wysiwyg/icons.png) no-repeat;
287
+ height:13px;
288
+ width:16px;
289
+ padding-bottom:14px;
290
+ }
291
+ .wysiwyg-button-quote {
292
+ background-position: 0;
293
+ }
294
+ .wysiwyg-button-link {
295
+ background-position: -192px;
296
+ }
297
+ .wysiwyg-button-video {
298
+ background-position: -224px;
299
+ }
300
+ .wysiwyg-button-bold {
301
+ background-position: -352px;
302
+ }
303
+ .wysiwyg-button-italic {
304
+ background-position: -384px;
305
+ }
306
+ .wysiwyg-button-left {
307
+ background-position: -512px;
308
+ }
309
+ .wysiwyg-button-center {
310
+ background-position: -544px;
311
+ }
312
+ .wysiwyg-button-right {
313
+ background-position: -576px;
314
+ }
315
+ .wysiwyg-button-orderList {
316
+ background-position: -768px;
317
+ }
318
+ .wysiwyg-button-unorderList {
319
+ background-position: -896px;
320
+ }
321
+ .wysiwyg-button-paragraph {
322
+ background-position: -960px;
323
+ }
324
+ .wysiwyg-button-h2 {
325
+ background-position: -992px;
326
+ }
327
+ .wysiwyg-button-h3 {
328
+ background-position: -1024px;
329
+ }
330
+ .wysiwyg-button-quote {
331
+ background-position: -1056px;
332
+ }
@@ -0,0 +1,332 @@
1
+ .wysiwyg-editor {
2
+ border: 1px solid #ccc;
3
+ -webkit-border-radius: 3px;
4
+ border-radius: 3px;
5
+ overflow-y:auto;
6
+ padding:4px;
7
+ margin-top:4px;
8
+ }
9
+ .wysiwyg-editor:focus {
10
+ outline: 0;
11
+ border-color: rgba(82, 168, 236, 0.8);
12
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
13
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
14
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
15
+ }
16
+ .wysiwyg-textarea {
17
+ border: 1px solid #ccc;
18
+ -webkit-border-radius: 3px;
19
+ border-radius: 3px;
20
+ overflow-y:auto;
21
+ padding:4px;
22
+ margin-top:4px;
23
+ height:400px;
24
+ background-color:#535353;
25
+ color:white;
26
+ }
27
+ .wysiwyg-editor p {
28
+ background-color:#eeeeee;
29
+ margin:4px;
30
+ padding:8px 8px 8px 14px;
31
+ -webkit-border-radius: 3px;
32
+ border-radius: 3px;
33
+ position: relative;
34
+ }
35
+ .wysiwyg-editor p:before {
36
+ content: "P";
37
+ position:absolute;
38
+ top:1px;
39
+ left:4px;
40
+ display:block;
41
+ font-size:10px;
42
+ text-transform:uppercase;
43
+ color:grey;
44
+ }
45
+ .wysiwyg-editor h2 {
46
+ border:2px solid #eeeeee;
47
+ margin:4px;
48
+ padding:6px 6px 6px 12px;
49
+ -webkit-border-radius: 3px;
50
+ border-radius: 3px;
51
+ position: relative;
52
+ line-height: normal;
53
+ }
54
+ .wysiwyg-editor h2:before {
55
+ content: "H2";
56
+ position:absolute;
57
+ top:1px;
58
+ left:4px;
59
+ display:block;
60
+ font-size:10px;
61
+ text-transform:uppercase;
62
+ font-weight: normal;
63
+ color:grey;
64
+ }
65
+ .wysiwyg-editor h3 {
66
+ border:2px solid #eeeeee;
67
+ margin:4px;
68
+ padding:6px 6px 6px 12px;
69
+ -webkit-border-radius: 3px;
70
+ border-radius: 3px;
71
+ position: relative;
72
+ line-height: normal;
73
+ }
74
+ .wysiwyg-editor h3:before {
75
+ content: "H3";
76
+ position:absolute;
77
+ top:1px;
78
+ left:4px;
79
+ display:block;
80
+ font-size:10px;
81
+ text-transform:uppercase;
82
+ font-weight: normal;
83
+ color:grey;
84
+ }
85
+ .wysiwyg-editor blockquote {
86
+ border:2px dotted #eeeeee;
87
+ margin:4px;
88
+ padding:6px 6px 6px 12px;
89
+ -webkit-border-radius: 3px;
90
+ border-radius: 3px;
91
+ position: relative;
92
+ line-height: normal;
93
+ }
94
+ .wysiwyg-editor blockquote:before {
95
+ content: "BQ";
96
+ position:absolute;
97
+ top:1px;
98
+ left:4px;
99
+ display:block;
100
+ font-size:10px;
101
+ text-transform:uppercase;
102
+ font-weight: normal;
103
+ color:grey;
104
+ }
105
+ a.wysiwyg-images-slideshow {
106
+ margin-top:8px;
107
+ margin-bottom:4px;
108
+ width:250px;
109
+ text-align:center;
110
+ cursor: pointer;
111
+ display: inline-block;
112
+ background-color: #e6e6e6;
113
+ background-repeat: no-repeat;
114
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
115
+ background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
116
+ background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
117
+ background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
118
+ background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
119
+ background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
120
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
121
+ padding-top:10px;
122
+ padding-bottom:10px;
123
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
124
+ color: #333;
125
+ font-size: 13px;
126
+ line-height: normal;
127
+ border: 1px solid #ccc;
128
+ border-bottom-color: #bbb;
129
+ -webkit-border-radius: 4px;
130
+ -moz-border-radius: 4px;
131
+ border-radius: 4px;
132
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
133
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
134
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
135
+ -webkit-transform-style: preserve-3d;
136
+ -webkit-transition: 0.1s linear all;
137
+ -moz-transition: 0.1s linear all;
138
+ -ms-transition: 0.1s linear all;
139
+ -o-transition: 0.1s linear all;
140
+ transition: 0.1s linear all;
141
+ margin-right:2px;
142
+ }
143
+ a.wysiwyg-images-slideshow:hover {
144
+ background-position: 0 -15px;
145
+ color: #333;
146
+ text-decoration: none;
147
+ }
148
+ a.wysiwyg-images-slideshow:focus {
149
+ outline: 1px dotted #666;
150
+ }
151
+
152
+ .wysiwyg-toolbar {
153
+ -webkit-border-radius: 3px;
154
+ border-radius: 3px;
155
+ height:33px;
156
+ padding-left:10px;
157
+ background-color: #222;
158
+ background-color: #222222;
159
+ background-repeat: repeat-x;
160
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
161
+ background-image: -moz-linear-gradient(top, #333333, #222222);
162
+ background-image: -ms-linear-gradient(top, #333333, #222222);
163
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
164
+ background-image: -webkit-linear-gradient(top, #333333, #222222);
165
+ background-image: -o-linear-gradient(top, #333333, #222222);
166
+ background-image: linear-gradient(top, #333333, #222222);
167
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
168
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
169
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
170
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
171
+ }
172
+
173
+ .wysiwyg-toolbar:after {
174
+ content:".";
175
+ display:block;
176
+ height:0;
177
+ clear:both;
178
+ visibility:hidden;
179
+ }
180
+
181
+ .wysiwyg-toolbar a {
182
+ color: #bfbfbf;
183
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
184
+ padding: 8px;
185
+ padding-bottom:12px;
186
+ padding-top:6px;
187
+ text-decoration:none;
188
+ float:left;
189
+ }
190
+ .wysiwyg-toolbar a:hover {
191
+ background-color: #333;
192
+ background-color: rgba(255, 255, 255, 0.05);
193
+ color: #ffffff;
194
+ text-decoration: none;
195
+ }
196
+
197
+ .wysiwyg-toolbar a.wysiwyg-code-button-active {
198
+ background-color: #e6e6e6;
199
+ background-repeat: no-repeat;
200
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
201
+ background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
202
+ background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
203
+ background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
204
+ background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
205
+ background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
206
+ color: #333;
207
+ text-decoration: none;
208
+ }
209
+
210
+ .wysiwyg-button-separator {
211
+ width:1px;
212
+ height:33px;
213
+ float:left;
214
+ background-color: #4a4a4a;
215
+ }
216
+
217
+ .wysiwyg-images-container {
218
+ position:absolute;
219
+ padding-left:18px;
220
+ height:447px;
221
+ }
222
+ .wysiwyg-images-dropzone {
223
+ border: 1px solid #eee;
224
+ -webkit-border-radius: 3px;
225
+ border-radius: 3px;
226
+ width:250px;
227
+ padding-top:30px;
228
+ padding-bottom:30px;
229
+ text-align:center;
230
+ background-color:#eee;
231
+ }
232
+ .wysiwyg-images-list {
233
+ border: 1px solid #ccc;
234
+ -webkit-border-radius: 3px;
235
+ border-radius: 3px;
236
+ width:250px;
237
+ height:320px;
238
+ overflow-y:scroll;
239
+ margin:0px;
240
+ padding:0px;
241
+ }
242
+ .wysiwyg-image {
243
+ background-color:white;
244
+ margin-bottom:1px;
245
+ padding:8px;
246
+ position: relative;
247
+ border-bottom:1px solid #ccc;
248
+ }
249
+ .wysiwyg-image img {
250
+ position:absolute;
251
+ }
252
+ input.wysiwyg-check-image {
253
+ position:absolute;
254
+ z-index:2;
255
+ margin:2px;
256
+ }
257
+ textarea.wysiwyg-descr-image {
258
+ margin-left:78px;
259
+ height:60px;
260
+ border: 1px solid #ccc;
261
+ padding:4px;
262
+ width:131px;
263
+ }
264
+ .wysiwyg-options-image {
265
+ margin-top:6px;
266
+ }
267
+ .wysiwyg-options-image:after {
268
+ content:".";
269
+ display:block;
270
+ height:0;
271
+ clear:both;
272
+ visibility:hidden;
273
+ }
274
+ .wysiwyg-insert-image {
275
+ float:left;
276
+ font-size:11px;
277
+ }
278
+ .wysiwyg-delete-image {
279
+ float:right;
280
+ font-size:11px;
281
+ }
282
+ .wysiwyg-image-selected {
283
+ background-color:#d3e9fb;
284
+ }
285
+ .wysiwyg-button {
286
+ background: url(../assets/images/wysiwyg/icons.png) no-repeat;
287
+ height:13px;
288
+ width:16px;
289
+ padding-bottom:14px;
290
+ }
291
+ .wysiwyg-button-quote {
292
+ background-position: 0;
293
+ }
294
+ .wysiwyg-button-link {
295
+ background-position: -192px;
296
+ }
297
+ .wysiwyg-button-video {
298
+ background-position: -224px;
299
+ }
300
+ .wysiwyg-button-bold {
301
+ background-position: -352px;
302
+ }
303
+ .wysiwyg-button-italic {
304
+ background-position: -384px;
305
+ }
306
+ .wysiwyg-button-left {
307
+ background-position: -512px;
308
+ }
309
+ .wysiwyg-button-center {
310
+ background-position: -544px;
311
+ }
312
+ .wysiwyg-button-right {
313
+ background-position: -576px;
314
+ }
315
+ .wysiwyg-button-orderList {
316
+ background-position: -768px;
317
+ }
318
+ .wysiwyg-button-unorderList {
319
+ background-position: -896px;
320
+ }
321
+ .wysiwyg-button-paragraph {
322
+ background-position: -960px;
323
+ }
324
+ .wysiwyg-button-h2 {
325
+ background-position: -992px;
326
+ }
327
+ .wysiwyg-button-h3 {
328
+ background-position: -1024px;
329
+ }
330
+ .wysiwyg-button-quote {
331
+ background-position: -1056px;
332
+ }
metadata ADDED
@@ -0,0 +1,74 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: wysiwyg
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - yudmiy
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2012-01-10 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: rails
16
+ requirement: &75099930 !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ~>
20
+ - !ruby/object:Gem::Version
21
+ version: 3.1.0
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: *75099930
25
+ - !ruby/object:Gem::Dependency
26
+ name: coffee-script
27
+ requirement: &75099530 !ruby/object:Gem::Requirement
28
+ none: false
29
+ requirements:
30
+ - - ! '>='
31
+ - !ruby/object:Gem::Version
32
+ version: '0'
33
+ type: :runtime
34
+ prerelease: false
35
+ version_requirements: *75099530
36
+ description: Simple wysiwyg editor with image uploading
37
+ email:
38
+ - yudmiy@gmail.com
39
+ executables: []
40
+ extensions: []
41
+ extra_rdoc_files: []
42
+ files:
43
+ - lib/wysiwyg.rb
44
+ - lib/wysiwyg/version.rb
45
+ - lib/wysiwyg.rb~
46
+ - vendor/assets/images/wysiwyg/icons.png
47
+ - vendor/assets/javascripts/wysiwyg/wysiwyg.js.coffee
48
+ - vendor/assets/stylesheets/wysiwyg/wysiwyg.css.scss
49
+ - vendor/assets/stylesheets/wysiwyg/wysiwyg.css.scss~
50
+ homepage: ''
51
+ licenses: []
52
+ post_install_message:
53
+ rdoc_options: []
54
+ require_paths:
55
+ - lib
56
+ required_ruby_version: !ruby/object:Gem::Requirement
57
+ none: false
58
+ requirements:
59
+ - - ! '>='
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
62
+ required_rubygems_version: !ruby/object:Gem::Requirement
63
+ none: false
64
+ requirements:
65
+ - - ! '>='
66
+ - !ruby/object:Gem::Version
67
+ version: '0'
68
+ requirements: []
69
+ rubyforge_project: wysiwyg
70
+ rubygems_version: 1.8.10
71
+ signing_key:
72
+ specification_version: 3
73
+ summary: Wysiwyg editor
74
+ test_files: []