bootsy 2.1.0 → 2.2.0
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.
- checksums.yaml +4 -4
- data/MIT-LICENSE +1 -1
- data/README.md +37 -27
- data/Rakefile +1 -6
- data/app/assets/javascripts/bootsy.js +8 -7
- data/app/assets/javascripts/bootsy/area.js +91 -0
- data/app/assets/javascripts/bootsy/editor_options.js +8 -53
- data/app/assets/javascripts/bootsy/image_template.js.erb +45 -0
- data/app/assets/javascripts/bootsy/locales/en.js +59 -0
- data/app/assets/javascripts/bootsy/locales/pt-BR.js +59 -0
- data/app/assets/javascripts/bootsy/modal.js +167 -0
- data/app/assets/javascripts/bootsy/{bootstrap.file-input.js → vendor/bootstrap.file-input.js} +0 -0
- data/app/assets/javascripts/bootsy/vendor/bootstrap3-wysihtml5.all.js +14975 -0
- data/app/assets/javascripts/bootsy/{polyfill.js → vendor/polyfill.js} +0 -0
- data/app/assets/stylesheets/bootsy.css +14 -0
- data/app/helpers/bootsy/application_helper.rb +0 -6
- data/app/views/bootsy/images/_image.html.erb +3 -1
- data/config/locales/bootsy.en.yml +0 -2
- data/config/locales/bootsy.pt-BR.yml +0 -2
- data/lib/bootsy.rb +5 -4
- data/lib/bootsy/form_helper.rb +23 -17
- data/lib/bootsy/version.rb +1 -1
- data/lib/generators/bootsy/templates/bootsy.rb +5 -4
- metadata +14 -17
- data/app/assets/javascripts/bootsy/bootstrap-wysihtml5.js +0 -530
- data/app/assets/javascripts/bootsy/bootsy.js +0 -320
- data/app/assets/javascripts/bootsy/locales/bootstrap-wysihtml5.pt-BR.js +0 -50
- data/app/assets/javascripts/bootsy/locales/bootsy.pt-BR.js +0 -9
- data/app/assets/javascripts/bootsy/translations.js +0 -8
- data/app/assets/javascripts/bootsy/wysihtml5.js +0 -9565
- data/app/views/bootsy/images/_modal.html.erb +0 -30
- data/config/cucumber.yml +0 -8
- data/lib/tasks/cucumber.rake +0 -65
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 9463b3fee7ada8af86752ace7357e85e4119395b
|
4
|
+
data.tar.gz: 0afa483188a2bcfe9d8faa324df42f6df0273dbd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a58b44fd911cd208badf20ac5c2938a16a958261fbd558677a8280bdb5ff4491eb7b050bd66cde7d881034af7c26717be772e2d31ef9275ee707fcbc28bba291
|
7
|
+
data.tar.gz: 5fa37fac75e6344089fa76a327589622642e8399fa02054bd4016af23fc3d7fe3f67b7c1704ea92109575a0512e15fac5c90cde9782f5b8c879dbc637f488680
|
data/MIT-LICENSE
CHANGED
data/README.md
CHANGED
@@ -6,7 +6,9 @@
|
|
6
6
|
[](https://codeclimate.com/github/volmer/bootsy)
|
7
7
|
[](https://coveralls.io/r/volmer/bootsy)
|
8
8
|
|
9
|
-
*Bootsy* is a WYSIWYG editor for Rails based on
|
9
|
+
*Bootsy* is a WYSIWYG editor for Rails based on
|
10
|
+
[Bootstrap3-wysihtml5](https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg) with image uploads using
|
11
|
+
[CarrierWave](https://github.com/carrierwaveuploader/carrierwave).
|
10
12
|
|
11
13
|
### Live demo
|
12
14
|
|
@@ -16,7 +18,6 @@
|
|
16
18
|
|
17
19
|
## Requirements
|
18
20
|
|
19
|
-
* Ruby `2` or `1.9.3`;
|
20
21
|
* ImageMagick or GraphicsMagick (for MiniMagick);
|
21
22
|
* Rails `4`;
|
22
23
|
* [Bootstrap `3`](http://getbootstrap.com/) fully installed in your app.
|
@@ -24,28 +25,32 @@
|
|
24
25
|
|
25
26
|
## Installation
|
26
27
|
|
27
|
-
1
|
28
|
-
```ruby
|
29
|
-
gem 'bootsy'
|
30
|
-
```
|
28
|
+
1. Add Bootsy to your Gemfile:
|
29
|
+
```ruby
|
30
|
+
gem 'bootsy'
|
31
|
+
```
|
31
32
|
|
32
|
-
2
|
33
|
-
```console
|
34
|
-
bundle install
|
35
|
-
```
|
33
|
+
2. Run the bundle command to install it:
|
34
|
+
```console
|
35
|
+
bundle install
|
36
|
+
```
|
36
37
|
|
37
|
-
3
|
38
|
-
```console
|
39
|
-
rails generate bootsy:install
|
40
|
-
```
|
38
|
+
3. Run the install generator:
|
39
|
+
```console
|
40
|
+
rails generate bootsy:install
|
41
|
+
```
|
41
42
|
It will include the javascripts and stylesheets in the assets pipeline,
|
42
43
|
create the `bootsy.rb` initializer and add a copy of the english translations.
|
43
44
|
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
45
|
+
**Note:** If your project uses SASS or LESS and `application.css` does not exist,
|
46
|
+
you will be required to require bootsy manually using `*= require bootsy` or if you prefer
|
47
|
+
to import assets yourself `@import "bootsy";`
|
48
|
+
|
49
|
+
4. Add and run migrations:
|
50
|
+
```console
|
51
|
+
rake bootsy:install:migrations
|
52
|
+
rake db:migrate
|
53
|
+
```
|
49
54
|
|
50
55
|
|
51
56
|
## Usage
|
@@ -110,12 +115,12 @@ You can enable and disable features as you like. For instance, if you don't want
|
|
110
115
|
```erb
|
111
116
|
<%= f.bootsy_area :my_attribute, editor_options: { link: false, color: false } %>
|
112
117
|
```
|
113
|
-
Available options are: `:font_styles`, `:emphasis`, `:lists`, `:html`, `:link`, `:image` and `:color`.
|
118
|
+
Available options are: `:blockquote`, `:font_styles`, `:emphasis`, `:lists`, `:html`, `:link`, `:image` and `:color`.
|
114
119
|
|
115
120
|
|
116
121
|
### Alert of unsaved changes
|
117
122
|
|
118
|
-
By default Bootsy alerts the user about unsaved changes if the page is closed or reloaded. You can disable
|
123
|
+
By default Bootsy alerts the user about unsaved changes if the page is closed or reloaded. You can disable
|
119
124
|
this feature with:
|
120
125
|
```erb
|
121
126
|
<%= f.bootsy_area :my_attribute, editor_options: { alert_unsaved: false } %>
|
@@ -123,8 +128,8 @@ this feature with:
|
|
123
128
|
|
124
129
|
## Uploads
|
125
130
|
|
126
|
-
If you don't want to have image uploads, just call `bootsy_area` in a form builder not
|
127
|
-
associated to a `Bootsy::Container` model. This way users will still be able to insert
|
131
|
+
If you don't want to have image uploads, just call `bootsy_area` in a form builder not
|
132
|
+
associated to a `Bootsy::Container` model. This way users will still be able to insert
|
128
133
|
images in the text area using an external image URL.
|
129
134
|
|
130
135
|
|
@@ -138,12 +143,17 @@ the options as you like.
|
|
138
143
|
|
139
144
|
## I18n
|
140
145
|
|
141
|
-
Bootsy defines some
|
146
|
+
Bootsy defines some I18n keys. English translations are added by default to your
|
142
147
|
`config/locales` directory as `bootsy.en.yml`. You can use it as a template
|
143
|
-
to translate Bootsy to your language.
|
144
|
-
|
148
|
+
to translate Bootsy to your language.
|
149
|
+
[Here are some examples](https://github.com/volmer/bootsy/tree/master/config/locales).
|
150
|
+
|
151
|
+
You also need to translate Bootsy on the JavaScript side. Just follow
|
152
|
+
[this example](https://github.com/volmer/bootsy/blob/master/app/assets/javascripts/bootsy/locales/en.js).
|
153
|
+
Bootsy will try to guess the locale based on the `lang` attribute of the page's `<html>` tag.
|
154
|
+
You can set the locale directly by setting a `data-bootsy-locale` attribute on your `<textarea>`.
|
145
155
|
|
146
156
|
|
147
157
|
## License
|
148
158
|
|
149
|
-
MIT License. Copyright 2012-
|
159
|
+
MIT License. Copyright 2012-2015 Volmer Soares
|
data/Rakefile
CHANGED
@@ -22,7 +22,6 @@ end
|
|
22
22
|
|
23
23
|
Bundler::GemHelper.install_tasks
|
24
24
|
|
25
|
-
require 'cucumber/rake/task'
|
26
25
|
require 'rspec/core/rake_task'
|
27
26
|
require 'coveralls/rake/task'
|
28
27
|
require 'rubocop/rake_task'
|
@@ -32,9 +31,5 @@ RuboCop::RakeTask.new(:rubocop) do |task|
|
|
32
31
|
end
|
33
32
|
Coveralls::RakeTask.new
|
34
33
|
RSpec::Core::RakeTask.new(:spec)
|
35
|
-
Cucumber::Rake::Task.new do |_|
|
36
|
-
# Uncomment this line when cucumber/multi_test work with minitest.
|
37
|
-
# t.cucumber_opts = %w{--format pretty -s}
|
38
|
-
end
|
39
34
|
|
40
|
-
task default: [:rubocop, :spec,
|
35
|
+
task default: [:rubocop, :spec, 'coveralls:push']
|
@@ -1,9 +1,10 @@
|
|
1
1
|
//= require jquery.remotipart
|
2
|
-
//= require bootsy/polyfill
|
3
|
-
//= require bootsy/wysihtml5
|
4
|
-
//= require bootsy/bootstrap-
|
5
|
-
//= require bootsy/
|
6
|
-
//= require bootsy/bootstrap.file-input
|
7
|
-
//= require bootsy/init
|
2
|
+
//= require bootsy/vendor/polyfill
|
3
|
+
//= require bootsy/vendor/bootstrap3-wysihtml5.all
|
4
|
+
//= require bootsy/vendor/bootstrap.file-input
|
5
|
+
//= require bootsy/area
|
8
6
|
//= require bootsy/editor_options
|
9
|
-
//= require bootsy/
|
7
|
+
//= require bootsy/image_template
|
8
|
+
//= require bootsy/init
|
9
|
+
//= require bootsy/locales/en
|
10
|
+
//= require bootsy/modal
|
@@ -0,0 +1,91 @@
|
|
1
|
+
/* global Bootsy */
|
2
|
+
|
3
|
+
window.Bootsy = window.Bootsy || {};
|
4
|
+
|
5
|
+
Bootsy.Area = function($el) {
|
6
|
+
var self = this;
|
7
|
+
|
8
|
+
this.$el = $el;
|
9
|
+
this.unsavedChanges = false;
|
10
|
+
this.locale = $el.data('bootsy-locale') || $('html').attr('lang');
|
11
|
+
if (!$.fn.wysihtml5.locale.hasOwnProperty(this.locale)) this.locale = 'en';
|
12
|
+
|
13
|
+
this.options = {
|
14
|
+
locale: this.locale,
|
15
|
+
alertUnsavedChanges: $el.data('bootsy-alert-unsaved'),
|
16
|
+
uploader: $el.data('bootsy-uploader'),
|
17
|
+
toolbar: {
|
18
|
+
'color': $el.data('bootsy-color'),
|
19
|
+
'emphasis': $el.data('bootsy-emphasis'),
|
20
|
+
'font-styles': $el.data('bootsy-font-styles'),
|
21
|
+
'html': $el.data('bootsy-html'),
|
22
|
+
'image': $el.data('bootsy-image'),
|
23
|
+
'link': $el.data('bootsy-link'),
|
24
|
+
'lists': $el.data('bootsy-lists')
|
25
|
+
},
|
26
|
+
events: {
|
27
|
+
load: function() {
|
28
|
+
self.editor = this;
|
29
|
+
self.onEditorLoad();
|
30
|
+
},
|
31
|
+
change: function() {
|
32
|
+
self.unsavedChanges = true;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
};
|
36
|
+
};
|
37
|
+
|
38
|
+
// Alert for unsaved changes
|
39
|
+
Bootsy.Area.prototype.unsavedChangesAlert = function () {
|
40
|
+
if (this.unsavedChanges) {
|
41
|
+
return $.fn.wysihtml5.locale[this.locale].bootsy.alertUnsaved;
|
42
|
+
}
|
43
|
+
};
|
44
|
+
|
45
|
+
// Clear everything
|
46
|
+
Bootsy.Area.prototype.clear = function () {
|
47
|
+
this.editor.clear();
|
48
|
+
this.setImageGalleryId('');
|
49
|
+
this.modal.$el.data('gallery-loaded', false);
|
50
|
+
};
|
51
|
+
|
52
|
+
Bootsy.Area.prototype.setImageGalleryId = function(id) {
|
53
|
+
this.$el.data('gallery-id', id);
|
54
|
+
this.$el.siblings('.bootsy_image_gallery_id').val(id);
|
55
|
+
};
|
56
|
+
|
57
|
+
Bootsy.Area.prototype.onEditorLoad = function() {};
|
58
|
+
|
59
|
+
Bootsy.Area.prototype.setupModal = function() {
|
60
|
+
this.modal = new Bootsy.Modal(
|
61
|
+
this.editor.toolbar.commandMapping['insertImage:null'].dialog.container, this
|
62
|
+
);
|
63
|
+
};
|
64
|
+
|
65
|
+
// Init components
|
66
|
+
Bootsy.Area.prototype.init = function() {
|
67
|
+
if (!this.$el.data('bootsy-initialized')) {
|
68
|
+
if ((this.options.toolbar.image === true) && (this.options.uploader === true)) {
|
69
|
+
this.options.customTemplates = {
|
70
|
+
image: Bootsy.imageTemplate
|
71
|
+
};
|
72
|
+
|
73
|
+
this.onEditorLoad = this.setupModal;
|
74
|
+
}
|
75
|
+
|
76
|
+
this.$el.wysihtml5($.extend(true, Bootsy.options, this.options));
|
77
|
+
|
78
|
+
// Mechanism for unsaved changes alert
|
79
|
+
if (this.options.alertUnsavedChanges !== false) {
|
80
|
+
window.onbeforeunload = this.unsavedChangesAlert.bind(this);
|
81
|
+
}
|
82
|
+
|
83
|
+
this.$el.closest('form').submit(function() {
|
84
|
+
this.unsavedChanges = false;
|
85
|
+
|
86
|
+
return true;
|
87
|
+
}.bind(this));
|
88
|
+
|
89
|
+
this.$el.data('bootsy-initialized', true);
|
90
|
+
}
|
91
|
+
};
|
@@ -5,43 +5,14 @@ $('link[rel="stylesheet"]').each(function () {
|
|
5
5
|
pageStylesheets.push($(this).attr('href'));
|
6
6
|
});
|
7
7
|
|
8
|
-
window.Bootsy.options = {
|
8
|
+
window.Bootsy.options = $.extend(true, $.fn.wysihtml5.defaultOptions, {
|
9
9
|
parserRules: {
|
10
10
|
classes: {
|
11
|
-
"wysiwyg-color-silver" : 1,
|
12
|
-
"wysiwyg-color-gray" : 1,
|
13
|
-
"wysiwyg-color-white" : 1,
|
14
|
-
"wysiwyg-color-maroon" : 1,
|
15
|
-
"wysiwyg-color-red" : 1,
|
16
|
-
"wysiwyg-color-purple" : 1,
|
17
|
-
"wysiwyg-color-fuchsia" : 1,
|
18
|
-
"wysiwyg-color-green" : 1,
|
19
|
-
"wysiwyg-color-lime" : 1,
|
20
|
-
"wysiwyg-color-olive" : 1,
|
21
|
-
"wysiwyg-color-yellow" : 1,
|
22
|
-
"wysiwyg-color-navy" : 1,
|
23
|
-
"wysiwyg-color-blue" : 1,
|
24
|
-
"wysiwyg-color-teal" : 1,
|
25
|
-
"wysiwyg-color-aqua" : 1,
|
26
|
-
"wysiwyg-color-orange" : 1,
|
27
11
|
"wysiwyg-float-left": 1,
|
28
|
-
"wysiwyg-float-right": 1
|
12
|
+
"wysiwyg-float-right": 1,
|
13
|
+
"wysiwyg-float-inline": 1
|
29
14
|
},
|
30
|
-
|
31
15
|
tags: {
|
32
|
-
"b": {},
|
33
|
-
"i": {},
|
34
|
-
"br": {},
|
35
|
-
"ol": {},
|
36
|
-
"ul": {},
|
37
|
-
"li": {},
|
38
|
-
"h1": {},
|
39
|
-
"h2": {},
|
40
|
-
"h3": {},
|
41
|
-
"small": {},
|
42
|
-
"p": {},
|
43
|
-
"blockquote": {},
|
44
|
-
"u": 1,
|
45
16
|
"cite": {
|
46
17
|
"check_attributes": {
|
47
18
|
"title": "alt"
|
@@ -49,30 +20,12 @@ window.Bootsy.options = {
|
|
49
20
|
},
|
50
21
|
"img": {
|
51
22
|
"check_attributes": {
|
52
|
-
"
|
53
|
-
"alt": "alt",
|
54
|
-
"src": "src",
|
55
|
-
"height": "numbers"
|
23
|
+
"src": "src"
|
56
24
|
},
|
57
25
|
"add_class": {
|
58
26
|
"align": "align_img"
|
59
27
|
}
|
60
28
|
},
|
61
|
-
|
62
|
-
"a": {
|
63
|
-
set_attributes: {
|
64
|
-
target: "_blank",
|
65
|
-
rel: "nofollow"
|
66
|
-
},
|
67
|
-
check_attributes: {
|
68
|
-
href: "url" // important to avoid XSS
|
69
|
-
}
|
70
|
-
},
|
71
|
-
"span": 1,
|
72
|
-
"div": 1,
|
73
|
-
// to allow save and edit files with code tag hacks
|
74
|
-
"code": 1,
|
75
|
-
"pre": 1,
|
76
29
|
// this allows youtube embed codes
|
77
30
|
"iframe": {
|
78
31
|
set_attributes: {
|
@@ -87,6 +40,8 @@ window.Bootsy.options = {
|
|
87
40
|
}
|
88
41
|
}
|
89
42
|
},
|
90
|
-
|
43
|
+
toolbar: {
|
44
|
+
color: true
|
45
|
+
},
|
91
46
|
stylesheets: pageStylesheets
|
92
|
-
};
|
47
|
+
});
|
@@ -0,0 +1,45 @@
|
|
1
|
+
window.Bootsy = window.Bootsy || {};
|
2
|
+
|
3
|
+
window.Bootsy.imageTemplate = function(context) {
|
4
|
+
var locale = context.locale;
|
5
|
+
var size = (context.options.toolbar.size) ? ' btn-' + context.options.toolbar.size : '';
|
6
|
+
var icon = '<span class="glyphicon glyphicon-picture"></span>';
|
7
|
+
|
8
|
+
if (context.options.toolbar.fa) {
|
9
|
+
icon = '<span class="fa fa-file-image-o"></span>';
|
10
|
+
}
|
11
|
+
|
12
|
+
return '<li>' +
|
13
|
+
'<div class="modal fade bootsy-modal" tabindex="-1" role="dialog" data-wysihtml5-dialog="insertImage" data-no-turbolink>'+
|
14
|
+
'<div class="modal-dialog" role="document">'+
|
15
|
+
'<div class="modal-content">'+
|
16
|
+
'<div class="modal-header">'+
|
17
|
+
'<button type="button" class="close" data-dismiss="modal" data-wysihtml5-dialog-action="cancel">' +
|
18
|
+
'<span aria-hidden="true">×</span>' +
|
19
|
+
'</button>' +
|
20
|
+
'<h4 class="modal-title">' + locale.image.insert + '</h4>' +
|
21
|
+
'</div>' +
|
22
|
+
|
23
|
+
'<div class="modal-body">' +
|
24
|
+
'<div class="alert alert-info bootsy-empty-alert">' +
|
25
|
+
locale.bootsy.empty +
|
26
|
+
'</div>' +
|
27
|
+
|
28
|
+
'<div class="row bootsy-gallery"></div>' +
|
29
|
+
|
30
|
+
'<img src="<%= image_path "bootsy/gallery-loader.gif" %>" class="bootsy-gallery-loader" />' +
|
31
|
+
|
32
|
+
'<a href="#refresh-gallery" class="btn btn-default btn-sm refresh-btn">' + locale.bootsy.refresh + '</a>' +
|
33
|
+
'</div>' +
|
34
|
+
'<input type="hidden" data-wysihtml5-dialog-field="src" value="" />' +
|
35
|
+
'<input type="hidden" data-wysihtml5-dialog-field="className" value="" />' +
|
36
|
+
'<div class="modal-footer"></div>' +
|
37
|
+
'</div>' +
|
38
|
+
'</div>' +
|
39
|
+
'</div>' +
|
40
|
+
|
41
|
+
'<a class="btn btn-default ' + size + '" data-wysihtml5-command="insertImage" title="' + locale.image.insert + '" tabindex="-1">' +
|
42
|
+
icon +
|
43
|
+
'</a>' +
|
44
|
+
'</li>';
|
45
|
+
};
|
@@ -0,0 +1,59 @@
|
|
1
|
+
/**
|
2
|
+
* English translations for bootstrap-wysihtml5 and Bootsy
|
3
|
+
*/
|
4
|
+
(function($){
|
5
|
+
$.fn.wysihtml5.locale['en'] = {
|
6
|
+
font_styles: {
|
7
|
+
normal: 'Normal text',
|
8
|
+
h1: 'Heading 1',
|
9
|
+
h2: 'Heading 2',
|
10
|
+
h3: 'Heading 3',
|
11
|
+
h4: 'Heading 4',
|
12
|
+
h5: 'Heading 5',
|
13
|
+
h6: 'Heading 6'
|
14
|
+
},
|
15
|
+
emphasis: {
|
16
|
+
bold: 'Bold',
|
17
|
+
italic: 'Italic',
|
18
|
+
underline: 'Underline',
|
19
|
+
small: 'Small'
|
20
|
+
},
|
21
|
+
lists: {
|
22
|
+
unordered: 'Unordered list',
|
23
|
+
ordered: 'Ordered list',
|
24
|
+
outdent: 'Outdent',
|
25
|
+
indent: 'Indent'
|
26
|
+
},
|
27
|
+
link: {
|
28
|
+
insert: 'Insert link',
|
29
|
+
cancel: 'Cancel',
|
30
|
+
target: 'Open link in new window'
|
31
|
+
},
|
32
|
+
image: {
|
33
|
+
insert: 'Insert image',
|
34
|
+
cancel: 'Cancel'
|
35
|
+
},
|
36
|
+
html: {
|
37
|
+
edit: 'Edit HTML'
|
38
|
+
},
|
39
|
+
colours: {
|
40
|
+
black: 'Black',
|
41
|
+
silver: 'Silver',
|
42
|
+
gray: 'Grey',
|
43
|
+
maroon: 'Maroon',
|
44
|
+
red: 'Red',
|
45
|
+
purple: 'Purple',
|
46
|
+
green: 'Green',
|
47
|
+
olive: 'Olive',
|
48
|
+
navy: 'Navy',
|
49
|
+
blue: 'Blue',
|
50
|
+
orange: 'Orange'
|
51
|
+
},
|
52
|
+
bootsy: {
|
53
|
+
empty: 'There are currently no uploaded images.',
|
54
|
+
refresh: 'Refresh',
|
55
|
+
alertUnsaved: 'You have unsaved changes.',
|
56
|
+
error: 'Something went wrong. Please try again later.'
|
57
|
+
}
|
58
|
+
};
|
59
|
+
}(jQuery));
|