wysiwyg 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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: []