wysiwyg 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/wysiwyg.rb +5 -0
- data/lib/wysiwyg.rb~ +5 -0
- data/lib/wysiwyg/version.rb +3 -0
- data/vendor/assets/images/wysiwyg/icons.png +0 -0
- data/vendor/assets/javascripts/wysiwyg/wysiwyg.js.coffee +152 -0
- data/vendor/assets/stylesheets/wysiwyg/wysiwyg.css.scss +332 -0
- data/vendor/assets/stylesheets/wysiwyg/wysiwyg.css.scss~ +332 -0
- metadata +74 -0
data/lib/wysiwyg.rb
ADDED
data/lib/wysiwyg.rb~
ADDED
Binary file
|
@@ -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: []
|