simditor-rails 1.0.1 → 1.0.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,287 @@
1
+ (function() {
2
+ var Uploader,
3
+ __hasProp = {}.hasOwnProperty,
4
+ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
5
+
6
+ Uploader = (function(_super) {
7
+ __extends(Uploader, _super);
8
+
9
+ Uploader.count = 0;
10
+
11
+ Uploader.prototype.opts = {
12
+ url: '',
13
+ params: null,
14
+ connectionCount: 3,
15
+ leaveConfirm: '正在上传文件,如果离开上传会自动取消'
16
+ };
17
+
18
+ Uploader.prototype.files = [];
19
+
20
+ Uploader.prototype.queue = [];
21
+
22
+ Uploader.prototype.html5 = !!(window.File && window.FileList);
23
+
24
+ function Uploader(opts) {
25
+ var _this = this;
26
+ if (opts == null) {
27
+ opts = {};
28
+ }
29
+ $.extend(this.opts, opts);
30
+ this.id = ++Uploader.count;
31
+ this.on('uploadcomplete', function(e, file) {
32
+ _this.files.splice($.inArray(file, _this.files), 1);
33
+ if (_this.queue.length > 0 && _this.files.length < _this.opts.connectionCount) {
34
+ return _this.upload(_this.queue.shift());
35
+ } else {
36
+ return _this.uploading = false;
37
+ }
38
+ });
39
+ $(window).on('beforeunload.uploader-' + this.id, function(e) {
40
+ if (!_this.uploading) {
41
+ return;
42
+ }
43
+ e.originalEvent.returnValue = _this.opts.leaveConfirm;
44
+ return _this.opts.leaveConfirm;
45
+ });
46
+ }
47
+
48
+ Uploader.prototype.generateId = (function() {
49
+ var id;
50
+ id = 0;
51
+ return function() {
52
+ return id += 1;
53
+ };
54
+ })();
55
+
56
+ Uploader.prototype.upload = function(file, opts) {
57
+ var f, _i, _len;
58
+ if (opts == null) {
59
+ opts = {};
60
+ }
61
+ if (file == null) {
62
+ return;
63
+ }
64
+ if ($.isArray(file)) {
65
+ for (_i = 0, _len = file.length; _i < _len; _i++) {
66
+ f = file[_i];
67
+ this.upload(f, opts);
68
+ }
69
+ } else if ($(file).is('input:file') && this.html5) {
70
+ this.upload($.makeArray($(file)[0].files), opts);
71
+ } else if (!file.id || !file.obj) {
72
+ file = this.getFile(file);
73
+ }
74
+ if (!(file && file.obj)) {
75
+ return;
76
+ }
77
+ $.extend(file, opts);
78
+ if (this.files.length >= this.opts.connectionCount) {
79
+ this.queue.push(file);
80
+ return;
81
+ }
82
+ if (this.triggerHandler('beforeupload', [file]) === false) {
83
+ return;
84
+ }
85
+ this.files.push(file);
86
+ if (this.html5) {
87
+ this.xhrUpload(file);
88
+ } else {
89
+ this.iframeUpload(file);
90
+ }
91
+ return this.uploading = true;
92
+ };
93
+
94
+ Uploader.prototype.getFile = function(fileObj) {
95
+ var name, _ref, _ref1;
96
+ if (fileObj instanceof window.File || fileObj instanceof window.Blob) {
97
+ name = (_ref = fileObj.fileName) != null ? _ref : fileObj.name;
98
+ } else if ($(fileObj).is('input:file')) {
99
+ name = $input.val().replace(/.*(\/|\\)/, "");
100
+ fileObj = $(fileObj).clone();
101
+ } else {
102
+ return null;
103
+ }
104
+ return {
105
+ id: this.generateId(),
106
+ url: this.opts.url,
107
+ params: this.opts.params,
108
+ name: name,
109
+ size: (_ref1 = fileObj.fileSize) != null ? _ref1 : fileObj.size,
110
+ ext: name ? name.split('.').pop().toLowerCase() : '',
111
+ obj: fileObj
112
+ };
113
+ };
114
+
115
+ Uploader.prototype.xhrUpload = function(file) {
116
+ var formData, k, v, _ref,
117
+ _this = this;
118
+ formData = new FormData();
119
+ formData.append("upload_file", file.obj);
120
+ formData.append("original_filename", file.name);
121
+ if (file.params) {
122
+ _ref = file.params;
123
+ for (k in _ref) {
124
+ v = _ref[k];
125
+ formData.append(k, v);
126
+ }
127
+ }
128
+ return file.xhr = $.ajax({
129
+ url: file.url,
130
+ data: formData,
131
+ processData: false,
132
+ contentType: false,
133
+ type: 'POST',
134
+ headers: {
135
+ 'X-File-Name': encodeURIComponent(file.name)
136
+ },
137
+ xhr: function() {
138
+ var req,
139
+ _this = this;
140
+ req = $.ajaxSettings.xhr();
141
+ if (req) {
142
+ req.upload.onprogress = function(e) {
143
+ return _this.progress(e);
144
+ };
145
+ }
146
+ return req;
147
+ },
148
+ progress: function(e) {
149
+ if (!e.lengthComputable) {
150
+ return;
151
+ }
152
+ return _this.trigger('uploadprogress', [file, e.loaded, e.total]);
153
+ },
154
+ error: function(xhr, status, err) {
155
+ return _this.trigger('uploaderror', [file, xhr, status]);
156
+ },
157
+ success: function(result) {
158
+ _this.trigger('uploadprogress', [file, file.size, file.size]);
159
+ return _this.trigger('uploadsuccess', [file, result]);
160
+ },
161
+ complete: function(xhr, status) {
162
+ return _this.trigger('uploadcomplete', [file, xhr.responseText]);
163
+ }
164
+ });
165
+ };
166
+
167
+ Uploader.prototype.iframeUpload = function(file) {
168
+ var k, v, _ref,
169
+ _this = this;
170
+ file.iframe = $('iframe', {
171
+ src: 'javascript:false;',
172
+ name: 'uploader-' + file.id
173
+ }).hide().appendTo(document.body);
174
+ file.form = $('<form/>', {
175
+ method: 'post',
176
+ enctype: 'multipart/form-data',
177
+ action: file.url,
178
+ target: file.iframe[0].name
179
+ }).hide().append(file.obj).appendTo(document.body);
180
+ if (file.params) {
181
+ _ref = file.params;
182
+ for (k in _ref) {
183
+ v = _ref[k];
184
+ $('<input/>', {
185
+ type: 'hidden',
186
+ name: k,
187
+ value: v
188
+ }).appendTo(form);
189
+ }
190
+ }
191
+ file.iframe.on('load', function() {
192
+ var error, iframeDoc, json, responseEl, result;
193
+ if (!(iframe.parent().length > 0)) {
194
+ return;
195
+ }
196
+ iframeDoc = iframe[0].contentDocument;
197
+ if (iframeDoc && iframeDoc.body && iframeDoc.body.innerHTML === "false") {
198
+ return;
199
+ }
200
+ responseEl = iframeDoc.getElementById('json-response');
201
+ json = responseEl ? responseEl.innerHTML : iframeDoc.body.innerHTML;
202
+ try {
203
+ result = $.parseJSON(json);
204
+ } catch (_error) {
205
+ error = _error;
206
+ _this.trigger('uploaderror', [file, null, 'parsererror']);
207
+ result = {};
208
+ }
209
+ if (result.success) {
210
+ _this.trigger('uploadsuccess', [file, result]);
211
+ }
212
+ _this.trigger('uploadcomplete', [file, result]);
213
+ return file.iframe.remove();
214
+ });
215
+ return file.form.submit().remove();
216
+ };
217
+
218
+ Uploader.prototype.cancel = function(file) {
219
+ var f, _i, _len, _ref;
220
+ if (!file.id) {
221
+ _ref = this.files;
222
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
223
+ f = _ref[_i];
224
+ if (f.id === file) {
225
+ file = f;
226
+ break;
227
+ }
228
+ }
229
+ }
230
+ this.trigger('uploadcancel', [file]);
231
+ if (this.html5) {
232
+ if (file.xhr) {
233
+ file.xhr.abort();
234
+ }
235
+ return file.xhr = null;
236
+ } else {
237
+ file.iframe.attr('src', 'javascript:false;').remove();
238
+ return this.trigger('uploadcomplete', [file]);
239
+ }
240
+ };
241
+
242
+ Uploader.prototype.readImageFile = function(fileObj, callback) {
243
+ var fileReader, img;
244
+ if (!$.isFunction(callback)) {
245
+ return;
246
+ }
247
+ img = new Image();
248
+ img.onload = function() {
249
+ return callback(img);
250
+ };
251
+ img.onerror = function() {
252
+ return callback();
253
+ };
254
+ if (window.FileReader && FileReader.prototype.readAsDataURL && /^image/.test(fileObj.type)) {
255
+ fileReader = new FileReader();
256
+ fileReader.onload = function(e) {
257
+ return img.src = e.target.result;
258
+ };
259
+ return fileReader.readAsDataURL(fileObj);
260
+ } else {
261
+ return callback();
262
+ }
263
+ };
264
+
265
+ Uploader.prototype.destroy = function() {
266
+ var file, _i, _len, _ref;
267
+ this.queue.length = 0;
268
+ _ref = this.files;
269
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
270
+ file = _ref[_i];
271
+ this.cancel(file);
272
+ }
273
+ $(window).off('.uploader-' + this.id);
274
+ return $(document).off('.uploader-' + this.id);
275
+ };
276
+
277
+ return Uploader;
278
+
279
+ })(Module);
280
+
281
+ this.simple || (this.simple = {});
282
+
283
+ this.simple.uploader = function(opts) {
284
+ return new Uploader(opts);
285
+ };
286
+
287
+ }).call(this);
@@ -1,575 +1,675 @@
1
1
  @charset "UTF-8";
2
2
 
3
- $simditor-toolbar-height: 60px;
3
+ $simditor-button-height: 40px;
4
4
 
5
5
  .simditor {
6
- position: relative;
7
-
8
- .simditor-wrapper {
9
- position: relative;
10
- background: #ffffff;
11
-
12
- .simditor-placeholder {
13
- display: none;
14
- position: absolute;
15
- top: $simditor-toolbar-height;
16
- left: 0;
17
- z-index: 0;
18
- padding: 22px 15px;
19
- font-size: 16px;
20
- font-family: helvetica,Arial;
21
- line-height: 1.5;
22
- color: #999999;
23
- background: transparent;
24
- }
25
-
26
- &.toolbar-floating {
27
- padding-top: $simditor-toolbar-height;
28
-
29
- .simditor-toolbar {
30
- position: fixed;
31
- top: 0;
32
- z-index: 10;
33
- box-shadow: 0 0 6px rgba(0,0,0,0.1);
34
- }
35
- }
36
- }
37
-
38
- .simditor-body {
39
- min-height: 500px;
40
- outline: none;
41
- cursor: text;
42
- position: relative;
43
- z-index: 1;
44
- background: transparent;
45
-
46
- & > :first-child {
47
- margin-top: 0!important;
48
- }
49
-
50
- a.selected {
51
- background: #b3d4fd;
52
- }
53
-
54
- a.simditor-mention {
55
- cursor: pointer;
56
- }
57
-
58
- .simditor-image {
59
- margin: 15px 0;
60
- cursor: pointer;
61
- outline: none;
62
- position: relative;
63
-
64
- &.selected {
65
- background: none;
66
- box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
67
- }
68
-
69
- img {
70
- margin: 0;
71
- }
72
-
73
- .mask {
74
- position: absolute;
75
- background: rgba(0,0,0,0.4);
76
- width: 100%;
77
- height: 100%;
78
- top: 0;
79
- }
80
-
81
- .simditor-image-progress-bar {
82
- border: 1px solid #cccccc;
83
- background: #ffffff;
84
- padding: 2px;
85
- margin: 0 auto;
86
- border-radius: 10px;
87
- position: relative;
88
- top: -50%;
89
- width: 100px;
90
- color: #ffffff;
91
-
92
- &.hint {
93
- font-size: 12px;
94
- background: transparent;
95
- border: none;
96
- text-align: center;
97
- }
98
-
99
- div {
100
- width: 100px;
101
- height: 5px;
102
- margin: 0;
103
- padding: 0;
104
-
105
- span {
106
- display: block;
107
- margin: 0;
108
- padding: 0;
109
- width: 1%;
110
- height: 100%;
111
- background: #0f769f;
112
- border-radius: 10px;
113
- }
114
- }
115
- }
116
-
117
- .simditor-image-resize-handle {
118
- display: none;
119
- }
120
- }
121
-
122
- .simditor-table {
123
- position: relative;
124
-
125
- &.resizing {
126
- cursor: col-resize;
127
- }
128
-
129
- .resize-handle {
130
- position: absolute;
131
- left: 0;
132
- top: 0;
133
- width: 10px;
134
- height: 100%;
135
- cursor: col-resize;
136
- }
137
- }
138
-
139
- pre {
140
- min-height: 28px;
141
- box-sizing: border-box;
142
- -moz-box-sizing: border-box;
143
- }
144
-
145
- }
146
-
147
- .simditor-paste-area {
148
- background: transparent;
149
- border: none;
150
- outline: none;
151
- }
152
-
153
- .simditor-toolbar {
154
- border-bottom: 1px solid #eeeeee;
155
- background: #ffffff;
156
- width: 100%;
157
-
158
- & > ul {
159
- height: $simditor-toolbar-height;
160
- margin: 0;
161
- padding: 0;
162
- list-style: none;
163
-
164
- & > li {
165
- position: relative;
166
- float: left;
167
-
168
- & > span.separator {
169
- display: block;
170
- float: left;
171
- background: #eeeeee;
172
- width: 1px;
173
- height: 18px;
174
- margin: 20px 15px;
175
- }
176
-
177
- & > .toolbar-item {
178
- display: block;
179
- float: left;
180
- width: 50px;
181
- height: $simditor-toolbar-height;
182
- outline: none;
183
- overflow: hidden;
184
- color: #333333;
185
- font-size: 15px;
186
- line-height: $simditor-toolbar-height;
187
- text-align: center;
188
- text-decoration: none;
189
- margin: 0 1px;
190
-
191
- span {
192
- opacity: 0.6;
193
- }
194
-
195
- &:hover span {
196
- opacity: 1;
197
- }
198
-
199
- &.active {
200
- background: #eeeeee;
201
-
202
- span {
203
- opacity: 1;
204
- }
205
- }
206
-
207
- &.disabled {
208
- cursor: default;
209
-
210
- span {
211
- opacity: 0.3;
212
- }
213
- }
214
-
215
- &.toolbar-item-title {
216
- span:before {
217
- content: "T";
218
- font-size: 19px;
219
- font-weight: bold;
220
- font-family: 'Times New Roman';
221
- }
222
-
223
- &.active-h1 span:before {
224
- content: 'H1';
225
- font-size: 18px;
226
- }
227
-
228
- &.active-h2 span:before {
229
- content: 'H2';
230
- font-size: 18px;
231
- }
232
-
233
- &.active-h3 span:before {
234
- content: 'H3';
235
- font-size: 18px;
236
- }
237
- }
238
- }
239
-
240
- &.menu-on {
241
- .toolbar-item {
242
- position: relative;
243
- z-index: 21;
244
- background: #ffffff;
245
- box-shadow: 0 -3px 3px rgba(0,0,0,0.2);
246
- }
247
-
248
- .toolbar-menu {
249
- display: block;
250
- }
251
- }
252
- }
253
- }
254
-
255
- .toolbar-menu {
256
- display: none;
257
- position: absolute;
258
- top: $simditor-toolbar-height - 1px;
259
- left: 1px;
260
- z-index: 20;
261
- background: #ffffff;
262
- text-align: left;
263
- box-shadow: 0 0 3px rgba(0,0,0,0.2);
264
-
265
- ul {
266
- min-width: 160px;
267
- list-style: none;
268
- margin: 0;
269
- padding: 10px 1px;
270
-
271
- & > li {
272
-
273
- .menu-item {
274
- display: block;
275
- font-size:16px;
276
- line-height: 2em;
277
- padding: 0 10px;
278
- text-decoration: none;
279
- color: #666666;
280
-
281
- &:hover {
282
- background: #f6f6f6;
283
- }
284
-
285
- &.menu-item-h1 {
286
- font-size: 24px;
287
- color: #333333;
288
- }
289
-
290
- &.menu-item-h2 {
291
- font-size: 22px;
292
- color: #333333;
293
- }
294
-
295
- &.menu-item-h3 {
296
- font-size: 20px;
297
- color: #333333;
298
- }
299
- }
300
-
301
- .separator {
302
- display: block;
303
- border-top: 1px solid #cccccc;
304
- height: 0;
305
- line-height: 0;
306
- font-size: 0;
307
- margin: 6px 0;
308
- }
309
- }
310
-
311
- }
312
-
313
- &.toolbar-menu-table {
314
- .menu-create-table {
315
- background: #ffffff;
316
-
317
- table {
318
- border: none;
319
- border-collapse: collapse;
320
- border-spacing: 0;
321
- table-layout: fixed;
322
-
323
- td {
324
- height: 16px;
325
- padding: 0;
326
- border: 2px solid #ffffff;
327
- background: #f3f3f3;
328
- cursor: pointer;
329
-
330
- &:before {
331
- width: 16px;
332
- display: block;
333
- content: ''
334
- }
335
-
336
- &.selected {
337
- background: #cfcfcf;
338
- }
339
- }
340
- }
341
- }
342
-
343
- .menu-edit-table {
344
- display: none;
345
- }
346
- }
347
-
348
- &.toolbar-menu-image {
349
- .menu-item-upload-image {
350
- position: relative;
351
- overflow: hidden;
352
-
353
- input[type=file] {
354
- position: absolute;
355
- right: 0px;
356
- top: 0px;
357
- opacity: 0;
358
- font-size: 100px;
359
- cursor: pointer;
360
- }
361
- }
362
- }
363
- }
364
- }
365
-
366
- .simditor-popover {
367
- display: none;
368
- padding: 5px 8px 0;
369
- background: #ffffff;
370
- box-shadow: 0 1px 4px rgba(0,0,0,0.4);
371
- border-radius: 2px;
372
- position: absolute;
373
- z-index: 2;
374
-
375
- .settings-field {
376
- margin: 0 0 5px 0;
377
- font-size: 12px;
378
-
379
- label {
380
- margin: 0 2px 0 0;
381
- }
382
-
383
- input[type=text] {
384
- width: 200px;
385
- box-sizing: border-box;
386
- font-size: 12px;
387
- }
388
- }
389
-
390
- &.link-popover .btn-unlink,
391
- &.image-popover .btn-upload {
392
- margin: 0 0 0 5px;
393
- color: #333333;
394
- font-size: 14px;
395
-
396
- span {
397
- opacity: 0.6;
398
- }
399
-
400
- &:hover span {
401
- opacity: 1;
402
- }
403
- }
404
-
405
- &.image-popover .btn-upload {
406
- position: relative;
407
- display: inline-block;
408
-
409
- input[type=file] {
410
- position: absolute;
411
- right: 0px;
412
- top: 0px;
413
- opacity: 0;
414
- height: 100%;
415
- width: 28px;
416
- }
417
- }
418
- }
6
+ position: relative;
7
+ border: 1px solid #c9d8db;
8
+
9
+ .simditor-wrapper {
10
+ position: relative;
11
+ background: #ffffff;
12
+ overflow: hidden;
13
+
14
+ .simditor-placeholder {
15
+ display: none;
16
+ position: absolute;
17
+ left: 0;
18
+ z-index: 0;
19
+ padding: 22px 15px;
20
+ font-size: 16px;
21
+ font-family: arial, sans-serif;
22
+ line-height: 1.5;
23
+ color: #999999;
24
+ background: transparent;
25
+ }
26
+
27
+ &.toolbar-floating {
28
+ .simditor-toolbar {
29
+ position: fixed;
30
+ top: 0;
31
+ z-index: 10;
32
+ box-shadow: 0 0 6px rgba(0,0,0,0.1);
33
+ }
34
+ }
35
+
36
+ .simditor-image-loading {
37
+ width: 100%;
38
+ height: 100%;
39
+ margin: 0 5px;
40
+ background: rgba(0,0,0,0.4);
41
+ position: absolute;
42
+ top: 0;
43
+ left: 0;
44
+ z-index: 2;
45
+
46
+ span {
47
+ width: 30px;
48
+ height: 30px;
49
+ background: #ffffff asset-url('loading-upload.gif') no-repeat center center;
50
+ border-radius: 30px;
51
+ position: absolute;
52
+ top: 50%;
53
+ left: 50%;
54
+ margin: -15px 0 0 -15px;
55
+ box-shadow: 0 0 8px rgba(0,0,0,0.4);
56
+ }
57
+
58
+ &.uploading span {
59
+ background: #ffffff;
60
+ color: #333333;
61
+ font-size: 14px;
62
+ line-height: 30px;
63
+ text-align: center;
64
+ }
65
+ }
66
+ }
67
+
68
+ .simditor-body {
69
+ padding: 22px 15px 40px;
70
+ min-height: 300px;
71
+ outline: none;
72
+ cursor: text;
73
+ position: relative;
74
+ z-index: 1;
75
+ background: transparent;
76
+
77
+ a.selected {
78
+ background: #b3d4fd;
79
+ }
80
+
81
+ a.simditor-mention {
82
+ cursor: pointer;
83
+ }
84
+
85
+ .simditor-table {
86
+ position: relative;
87
+
88
+ &.resizing {
89
+ cursor: col-resize;
90
+ }
91
+
92
+ .simditor-resize-handle {
93
+ position: absolute;
94
+ left: 0;
95
+ top: 0;
96
+ width: 10px;
97
+ height: 100%;
98
+ cursor: col-resize;
99
+ }
100
+ }
101
+
102
+ pre {
103
+ /*min-height: 28px;*/
104
+ box-sizing: border-box;
105
+ -moz-box-sizing: border-box;
106
+ }
107
+
108
+ img {
109
+ cursor: pointer;
110
+
111
+ &.selected {
112
+ box-shadow: 0 0 0 4px #cccccc;
113
+ }
114
+ }
115
+ }
116
+
117
+ .simditor-paste-area,
118
+ .simditor-clean-paste-area {
119
+ background: transparent;
120
+ border: none;
121
+ outline: none;
122
+ resize: none;
123
+ padding: 0;
124
+ margin: 0;
125
+ }
126
+
127
+ .simditor-toolbar {
128
+ border-bottom: 1px solid #eeeeee;
129
+ background: #ffffff;
130
+ width: 100%;
131
+
132
+ & > ul {
133
+ margin: 0;
134
+ padding: 0 0 0 6px;
135
+ list-style: none;
136
+
137
+ &:after {
138
+ content:"";
139
+ display:table;
140
+ clear:both;
141
+ }
142
+
143
+ & > li {
144
+ position: relative;
145
+ float: left;
146
+
147
+ & > span.separator {
148
+ display: block;
149
+ float: left;
150
+ background: #cfcfcf;
151
+ width: 1px;
152
+ height: 18px;
153
+ margin: ($simditor-button-height - 18px) / 2 15px;
154
+ }
155
+
156
+ & > .toolbar-item {
157
+ display: block;
158
+ float: left;
159
+ width: 50px;
160
+ height: $simditor-button-height;
161
+ outline: none;
162
+ overflow: hidden;
163
+ color: #333333;
164
+ font-size: 15px;
165
+ line-height: $simditor-button-height;
166
+ text-align: center;
167
+ text-decoration: none;
168
+
169
+ span {
170
+ opacity: 0.6;
171
+
172
+ &.fa {
173
+ display: inline;
174
+ line-height: normal;
175
+ }
176
+ }
177
+
178
+ &:hover span {
179
+ opacity: 1;
180
+ }
181
+
182
+ &.active {
183
+ background: #eeeeee;
184
+
185
+ span {
186
+ opacity: 1;
187
+ }
188
+ }
189
+
190
+ &.disabled {
191
+ cursor: default;
192
+
193
+ span {
194
+ opacity: 0.3;
195
+ }
196
+ }
197
+
198
+ &.toolbar-item-title {
199
+ span:before {
200
+ content: "T";
201
+ font-size: 19px;
202
+ font-weight: bold;
203
+ font-family: 'Times New Roman';
204
+ }
205
+
206
+ &.active-h1 span:before {
207
+ content: 'H1';
208
+ font-size: 18px;
209
+ }
210
+
211
+ &.active-h2 span:before {
212
+ content: 'H2';
213
+ font-size: 18px;
214
+ }
215
+
216
+ &.active-h3 span:before {
217
+ content: 'H3';
218
+ font-size: 18px;
219
+ }
220
+ }
221
+
222
+ &.toolbar-item-color {
223
+ font-size: 14px;
224
+ position: relative;
225
+
226
+ span:before {
227
+ position: relative;
228
+ top: -2px;
229
+ }
230
+
231
+ &:after {
232
+ content: '';
233
+ display: block;
234
+ width: 14px;
235
+ height: 4px;
236
+ background: #cccccc;
237
+ position: absolute;
238
+ top: 26px;
239
+ left: 50%;
240
+ margin: 0 0 0 -7px;
241
+ }
242
+
243
+ &:hover:after {
244
+ background: #999999;
245
+ }
246
+
247
+ &.disabled:after {
248
+ background: #dfdfdf;
249
+ }
250
+ }
251
+ }
252
+
253
+ &.menu-on {
254
+ .toolbar-item {
255
+ position: relative;
256
+ z-index: 21;
257
+ background: #ffffff;
258
+ box-shadow: 0 -3px 3px rgba(0,0,0,0.2);
259
+
260
+ span {
261
+ opacity: 1;
262
+ }
263
+
264
+ &.toolbar-item-color:after {
265
+ background: #999999;
266
+ }
267
+ }
268
+
269
+ .toolbar-menu {
270
+ display: block;
271
+ }
272
+ }
273
+ }
274
+ }
275
+
276
+ .toolbar-menu {
277
+ display: none;
278
+ position: absolute;
279
+ top: $simditor-button-height;
280
+ left: 0;
281
+ z-index: 20;
282
+ background: #ffffff;
283
+ text-align: left;
284
+ box-shadow: 0 0 3px rgba(0,0,0,0.2);
285
+
286
+ ul {
287
+ min-width: 160px;
288
+ list-style: none;
289
+ margin: 0;
290
+ padding: 10px 1px;
291
+
292
+ & > li {
293
+
294
+ .menu-item {
295
+ display: block;
296
+ font-size:16px;
297
+ line-height: 2em;
298
+ padding: 0 10px;
299
+ text-decoration: none;
300
+ color: #666666;
301
+
302
+ &:hover {
303
+ background: #f6f6f6;
304
+ }
305
+
306
+ &.menu-item-h1 {
307
+ font-size: 24px;
308
+ color: #333333;
309
+ }
310
+
311
+ &.menu-item-h2 {
312
+ font-size: 22px;
313
+ color: #333333;
314
+ }
315
+
316
+ &.menu-item-h3 {
317
+ font-size: 20px;
318
+ color: #333333;
319
+ }
320
+ }
321
+
322
+ .separator {
323
+ display: block;
324
+ border-top: 1px solid #cccccc;
325
+ height: 0;
326
+ line-height: 0;
327
+ font-size: 0;
328
+ margin: 6px 0;
329
+ }
330
+ }
331
+
332
+ }
333
+
334
+ &.toolbar-menu-color {
335
+ width: 96px;
336
+
337
+ .color-list {
338
+ padding: 10px 6px 10px 10px;
339
+ min-width: 0;
340
+
341
+ li {
342
+ float: left;
343
+ margin: 0 4px 4px 0;
344
+
345
+ .font-color {
346
+ display: block;
347
+ width: 16px;
348
+ height: 16px;
349
+ background: #dfdfdf;
350
+ border-radius: 2px;
351
+
352
+ &:hover {
353
+ opacity: 0.8;
354
+ }
355
+ }
356
+
357
+ $font-colors: #ef6559 #e28b41 #c8a732 #209361 #418caf #7071ac #aa8773 #777777;
358
+ $i: 1;
359
+ @each $color in $font-colors {
360
+ .font-color-#{$i} {
361
+ background: $color;
362
+ }
363
+ $i: $i + 1;
364
+ }
365
+
366
+
367
+ &.remove-color {
368
+ padding: 5px 4px 0 0;
369
+ margin: 0;
370
+ float: none;
371
+ text-align: center;
372
+ line-height: 12px;
373
+ clear: both;
374
+
375
+ .link-remove-color {
376
+ font-size: 12px;
377
+ color: #666666;
378
+ &:hover {
379
+ color: #999999;
380
+ }
381
+ }
382
+ }
383
+ }
384
+ }
385
+ }
386
+
387
+ &.toolbar-menu-table {
388
+ .menu-create-table {
389
+ background: #ffffff;
390
+
391
+ table {
392
+ border: none;
393
+ border-collapse: collapse;
394
+ border-spacing: 0;
395
+ table-layout: fixed;
396
+
397
+ td {
398
+ height: 16px;
399
+ padding: 0;
400
+ border: 2px solid #ffffff;
401
+ background: #f3f3f3;
402
+ cursor: pointer;
403
+
404
+ &:before {
405
+ width: 16px;
406
+ display: block;
407
+ content: ''
408
+ }
409
+
410
+ &.selected {
411
+ background: #cfcfcf;
412
+ }
413
+ }
414
+ }
415
+ }
416
+
417
+ .menu-edit-table {
418
+ display: none;
419
+ }
420
+ }
421
+
422
+ &.toolbar-menu-image {
423
+ .menu-item-upload-image {
424
+ position: relative;
425
+ overflow: hidden;
426
+
427
+ input[type=file] {
428
+ position: absolute;
429
+ right: 0px;
430
+ top: 0px;
431
+ opacity: 0;
432
+ font-size: 100px;
433
+ cursor: pointer;
434
+ }
435
+ }
436
+ }
437
+ }
438
+ }
439
+
440
+ .simditor-popover {
441
+ display: none;
442
+ padding: 5px 8px 0;
443
+ background: #ffffff;
444
+ box-shadow: 0 1px 4px rgba(0,0,0,0.4);
445
+ border-radius: 2px;
446
+ position: absolute;
447
+ z-index: 2;
448
+
449
+ .settings-field {
450
+ margin: 0 0 5px 0;
451
+ font-size: 12px;
452
+ height: 25px;
453
+ line-height: 25px;
454
+
455
+ label {
456
+ margin: 0 8px 0 0;
457
+ float: left;
458
+ }
459
+
460
+ input[type=text] {
461
+ float: left;
462
+ width: 200px;
463
+ box-sizing: border-box;
464
+ font-size: 12px;
465
+ }
466
+ }
467
+
468
+ &.link-popover .btn-unlink,
469
+ &.image-popover .btn-upload {
470
+ float: left;
471
+ margin: 0 0 0 8px;
472
+ color: #333333;
473
+ font-size: 14px;
474
+
475
+ span {
476
+ opacity: 0.6;
477
+ }
478
+
479
+ &:hover span {
480
+ opacity: 1;
481
+ }
482
+ }
483
+
484
+ &.image-popover .btn-upload {
485
+ position: relative;
486
+ display: inline-block;
487
+ overflow: hidden;
488
+
489
+ input[type=file] {
490
+ position: absolute;
491
+ right: 0px;
492
+ top: 0px;
493
+ opacity: 0;
494
+ height: 100%;
495
+ width: 28px;
496
+ }
497
+ }
498
+ }
499
+
500
+ &.simditor-mobile {
501
+ .simditor-toolbar > ul > li > .toolbar-item {
502
+ width: 46px;
503
+ }
504
+
505
+ .simditor-wrapper.toolbar-floating .simditor-toolbar {
506
+ position: absolute;
507
+ top: 0;
508
+ z-index: 10;
509
+ box-shadow: 0 0 6px rgba(0,0,0,0.1);
510
+ }
511
+ }
419
512
  }
420
513
 
514
+
515
+
421
516
  .simditor .simditor-body, .editor-style {
422
- padding: 22px 15px 40px;
423
- font-size: 16px;
424
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
425
- line-height: 1.5;
426
- color: #333;
427
- outline: none;
428
- word-wrap: break-word;
429
-
430
- a{ color: #4298BA; text-decoration: none; word-break: break-all;}
431
- a:visited{ color: #4298BA; }
432
- a:hover{ color: #0F769F; }
433
- a:active{ color:#9E792E; }
434
- a:hover, a:active{ outline: 0; }
435
-
436
- h1,h2,h3,h4,h5,h6 {
437
- font-weight: normal;
438
- color: #000!important;
439
- text-align: left!important;
440
- line-height: 1.6!important;
441
- margin: 0.5em 0!important;
442
- }
443
-
444
- h1 { font-size: 1.6em!important; }
445
- h2 { font-size: 1.4em!important; }
446
- h3 { font-size: 1.2em!important; }
447
- h4 { font-size: 1em!important; }
448
- h5 { font-size: 1em!important; }
449
- h6 { font-size: 1em!important; }
450
-
451
- p, div {
452
- margin:0 0 0 0;
453
- /*margin:0 0 12px 0;*/
454
- word-wrap: break-word;
455
- }
456
-
457
- b, strong {
458
- font-weight: bold!important;
459
- /*color: #e79852;*/
460
- }
461
-
462
- i, em {
463
- font-style: italic!important;
464
- }
465
-
466
- u {
467
- text-decoration: underline;
468
- }
469
-
470
- ul, ol {
471
- list-style: disc outside none;
472
- margin: 15px 0;
473
- padding: 0 0 0 40px;
474
- line-height: 1.6;
475
-
476
- ul, ol {
477
- padding-left: 25px;
478
- margin: 0;
479
- }
480
-
481
- ul {
482
- list-style: circle outside none;
483
-
484
- ul {
485
- list-style: square outside none;
486
- }
487
- }
488
- }
489
-
490
- ol {
491
- list-style:decimal;
492
- }
493
-
494
- li p:last-child {
495
- margin:0
496
- }
497
-
498
- blockquote {
499
- border-left: 6px solid #ddd;
500
- padding: 5px 0 5px 10px;
501
- margin: 15px 0 15px 15px;
502
-
503
- & > :first-child {
504
- margin-top: 0;
505
- }
506
- }
507
-
508
- pre {
509
- padding: 5px 5px 5px 10px;
510
- margin: 15px 0;
511
- display: block;
512
- font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
513
- font-size:13px;
514
- line-height: 18px;
515
- background: #F0F0F0;
516
- border-radius: 3px;
517
- overflow-x: auto;
518
- white-space: pre-wrap; /* CSS3 */
519
- white-space: -moz-pre-wrap; /* Mozilla, post millennium */
520
- white-space: -o-pre-wrap; /* Opera 7 */
521
-
522
- p {
523
- margin: 2px 0;
524
- }
525
- }
526
-
527
- hr {
528
- display: block;
529
- height: 0px;
530
- border: 0;
531
- border-top: 1px solid #ccc;
532
- margin: 15px 0;
533
- padding: 0;
534
- }
535
-
536
- table {
537
- width: 100%;
538
- table-layout: fixed;
539
- border-collapse: collapse;
540
- border-spacing: 0;
541
- margin: 15px 0;
542
-
543
- thead {
544
- background-color: #f9f9f9;
545
- }
546
-
547
- td {
548
- min-width: 40px;
549
- height: 30px;
550
- border: 1px solid #ccc;
551
- vertical-align: top;
552
- padding: 2px 4px;
553
- box-sizing: border-box;
554
-
555
- &.active {
556
- background-color: #ffffee;
557
- }
558
- }
559
- }
560
-
561
-
562
- img {
563
- margin: 20px 0;
564
- display: block;
565
- -ms-interpolation-mode: bicubic;
566
- vertical-align: bottom;
567
- box-shadow: 0 0 8px rgba(0, 0, 0, .3);
568
- }
569
-
570
- @for $i from 0 through 10 {
571
- *[data-indent="#{$i}"] {
572
- margin-left: 40px * $i;
573
- }
574
- }
517
+ font-size: 16px;
518
+ font-family: arial, sans-serif;
519
+ line-height: 1.6;
520
+ color: #333;
521
+ outline: none;
522
+ word-wrap: break-word;
523
+
524
+ & > :first-child {
525
+ margin-top: 0!important;
526
+ }
527
+
528
+ a{ color: #4298BA; text-decoration: none; word-break: break-all;}
529
+ a:visited{ color: #4298BA; }
530
+ a:hover{ color: #0F769F; }
531
+ a:active{ color:#9E792E; }
532
+ a:hover, a:active{ outline: 0; }
533
+
534
+ h1,h2,h3,h4,h5,h6 {
535
+ font-weight: normal;
536
+ margin: 40px 0 20px;
537
+ color: #000000;
538
+ }
539
+
540
+ h1 { font-size: 24px; }
541
+ h2 { font-size: 22px; }
542
+ h3 { font-size: 20px; }
543
+ h4 { font-size: 18px; }
544
+ h5 { font-size: 16px; }
545
+ h6 { font-size: 16px; }
546
+
547
+ p, div {
548
+ word-wrap: break-word;
549
+ margin: 0 0 15px 0;
550
+ color: #333;
551
+ word-wrap: break-word;
552
+ }
553
+
554
+ b, strong {
555
+ font-weight: bold;
556
+ }
557
+
558
+ i, em {
559
+ font-style: italic;
560
+ }
561
+
562
+ u {
563
+ text-decoration: underline;
564
+ }
565
+
566
+ strike, del {
567
+ text-decoration: line-through;
568
+ }
569
+
570
+ ul, ol {
571
+ list-style:disc outside none;
572
+ margin: 15px 0;
573
+ padding: 0 0 0 40px;
574
+ line-height: 1.6;
575
+
576
+ ul, ol {
577
+ padding-left: 30px;
578
+ }
579
+
580
+ ul {
581
+ list-style: circle outside none;
582
+
583
+ ul {
584
+ list-style: square outside none;
585
+ }
586
+ }
587
+ }
588
+
589
+ ol {
590
+ list-style:decimal;
591
+ }
592
+
593
+ blockquote {
594
+ border-left: 6px solid #ddd;
595
+ padding: 5px 0 5px 10px;
596
+ margin: 15px 0 15px 15px;
597
+
598
+ & > :first-child {
599
+ margin-top: 0;
600
+ }
601
+ }
602
+
603
+ pre {
604
+ padding: 10px 5px 10px 10px;
605
+ margin: 15px 0;
606
+ display: block;
607
+ line-height: 18px;
608
+ background: #F0F0F0;
609
+ border-radius: 3px;
610
+ font-size:13px;
611
+ font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
612
+ /*overflow-x: auto;*/
613
+ white-space: pre;
614
+ word-wrap: break-word;
615
+ }
616
+
617
+ code {
618
+ display: inline-block;
619
+ padding: 0 4px;
620
+ margin: 0 5px;
621
+ background: #eeeeee;
622
+ border-radius: 3px;
623
+ font-size:13px;
624
+ font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
625
+ }
626
+
627
+ hr {
628
+ display: block;
629
+ height: 0px;
630
+ border: 0;
631
+ border-top: 1px solid #ccc;
632
+ margin: 15px 0;
633
+ padding: 0;
634
+ }
635
+
636
+ table {
637
+ width: 100%;
638
+ table-layout: fixed;
639
+ border-collapse: collapse;
640
+ border-spacing: 0;
641
+ margin: 15px 0;
642
+
643
+ thead {
644
+ background-color: #f9f9f9;
645
+ }
646
+
647
+ td {
648
+ min-width: 40px;
649
+ height: 30px;
650
+ border: 1px solid #ccc;
651
+ vertical-align: top;
652
+ padding: 2px 4px;
653
+ box-sizing: border-box;
654
+
655
+ &.active {
656
+ background-color: #ffffee;
657
+ }
658
+ }
659
+ }
660
+
661
+
662
+ img {
663
+ max-width: 800px;
664
+ margin: 0 5px;
665
+ vertical-align: middle;
666
+ }
667
+
668
+ @for $i from 0 through 10 {
669
+ *[data-indent="#{$i}"] {
670
+ margin-left: 40px * $i;
671
+ }
672
+ }
575
673
  }
674
+
675
+