quill-rails 0.0.2 → 0.1.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 +8 -8
- data/README.md +14 -6
- data/lib/quill/rails/engine.rb +4 -0
- data/lib/quill/rails/templates/template.html.erb +126 -0
- data/lib/quill/rails/version.rb +1 -1
- data/lib/quill/rails/view_helpers.rb +16 -0
- metadata +5 -5
- data/app/assets/stylesheets/advanced.css +0 -25
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
ZTU5NzJkZjZlODRmNmFlZDA4MDVmNjczMWQ1MTU1YzM1ODlmODg5Nw==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
YzI0OGQyNjU2ZWRkYmIwNjM0NWRkMjQ5MWFiM2I4ZTFjY2U1NDRjOA==
|
7
7
|
SHA512:
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
NWI1MTY1NGIwZjM0Yzg0Yzk5YjQyYTA0YzBiYmVmYTQ3NGU1NGNkZWFiM2Rk
|
10
|
+
Mzg5MzM4OWI0N2QyOTBkNDc5NWRiNzViYjlhNTc4ZjBkOTQzZTBiZTNlYWNl
|
11
|
+
ZGIxOTc0MzMzZThkMDA1ZDRmYTQ5NGY4MjlmMjRhYzU4NDMzNzM=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
YmFhZGMwOTVjYmI2M2Y4YzMyNjNkNGI3NDY3NWQzZWUxMjgzOTdmYzgzZGJj
|
14
|
+
Nzk4Yzk3ZTFhMjNkZmRjNGU3N2Y4N2RlYjQ5MzQxZTk1MGQyYjY5NWIxZjU0
|
15
|
+
MmRjZjNlZDZiMzZkMjVjYTU2NTU0NTFkMzgwOTczYmE3NWNkYTA=
|
data/README.md
CHANGED
@@ -1,13 +1,11 @@
|
|
1
1
|
# quill-rails
|
2
|
-
Rails 3/4 asset pipeline loading for [Quill](http://quilljs.com/)
|
2
|
+
This gem provides Rails 3/4 asset pipeline loading for [Quill](http://quilljs.com/), as well as a very convienient helper method to quickly and easily get a nice looking rich text editor.
|
3
3
|
|
4
4
|
# Installation
|
5
5
|
|
6
|
-
This gem adds Quill to your Rails 3/4 asset pipeline.
|
7
|
-
|
8
6
|
Add the following lines to your applications Gemfile:
|
9
7
|
|
10
|
-
gem 'quill-rails', '~> 0.0
|
8
|
+
gem 'quill-rails', '~> 0.1.0'
|
11
9
|
Then run bundle install to update your application's bundle.
|
12
10
|
|
13
11
|
Add Quill to your manifest in app/assets/javascripts/application.js:
|
@@ -26,10 +24,20 @@ You can make the original Quill Snow theme available by adding the following to
|
|
26
24
|
|
27
25
|
# Usage
|
28
26
|
|
29
|
-
|
27
|
+
This gem provides a View Helper to automatically create the ['Full Example' demo seen here](http://quilljs.com/examples/#full-example). Just add the following to your view:
|
28
|
+
|
29
|
+
```
|
30
|
+
<%= quill_editor %>
|
31
|
+
```
|
32
|
+
|
33
|
+
and a sexy looking Quill editor will be there!
|
34
|
+
|
35
|
+
Because this includes Quill assets, you can also refer to the [Quill Documentation](http://quilljs.com/docs/editor/) to use other, more custom, features.
|
30
36
|
|
31
37
|
# Roadmap
|
32
38
|
|
33
39
|
The following features would be nice to have:
|
34
40
|
|
35
|
-
-
|
41
|
+
- Configuring the default quill_editor e.g. pass in content, change wrapper id, etc.
|
42
|
+
- Add and sync a hidden tag field so the text can be submitted in forms
|
43
|
+
- Parse any RTE input for malicious tags
|
data/lib/quill/rails/engine.rb
CHANGED
@@ -0,0 +1,126 @@
|
|
1
|
+
<div class="quill-wrapper">
|
2
|
+
<div id="full-toolbar" class="toolbar">
|
3
|
+
<span class="sc-format-group">
|
4
|
+
<select title="Font" class="sc-font">
|
5
|
+
<option value="sans-serif" selected="">Sans Serif</option>
|
6
|
+
<option value="serif">Serif</option>
|
7
|
+
<option value="monospace">Monospace</option>
|
8
|
+
</select>
|
9
|
+
<select title="Size" class="sc-size">
|
10
|
+
<option value="10px">Small</option>
|
11
|
+
<option value="13px" selected="">Normal</option>
|
12
|
+
<option value="18px">Large</option>
|
13
|
+
<option value="32px">Huge</option>
|
14
|
+
</select>
|
15
|
+
</span>
|
16
|
+
<span class="sc-format-group">
|
17
|
+
<span title="Bold" class="sc-format-button sc-bold"></span>
|
18
|
+
<span class="sc-format-separator"></span>
|
19
|
+
<span title="Italic" class="sc-format-button sc-italic"></span>
|
20
|
+
<span class="sc-format-separator"></span>
|
21
|
+
<span title="Underline" class="sc-format-button sc-underline"></span>
|
22
|
+
<span class="sc-format-separator"></span>
|
23
|
+
<span title="Strikethrough" class="sc-format-button sc-strike"></span>
|
24
|
+
</span>
|
25
|
+
<span class="sc-format-group">
|
26
|
+
<select title="Text Color" class="sc-color">
|
27
|
+
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)" selected=""></option>
|
28
|
+
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
|
29
|
+
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
|
30
|
+
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
|
31
|
+
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
|
32
|
+
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
|
33
|
+
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
|
34
|
+
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"></option>
|
35
|
+
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
|
36
|
+
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
|
37
|
+
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
|
38
|
+
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
|
39
|
+
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
|
40
|
+
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
|
41
|
+
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
|
42
|
+
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
|
43
|
+
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
|
44
|
+
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
|
45
|
+
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
|
46
|
+
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
|
47
|
+
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
|
48
|
+
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
|
49
|
+
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
|
50
|
+
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
|
51
|
+
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
|
52
|
+
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
|
53
|
+
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
|
54
|
+
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
|
55
|
+
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
|
56
|
+
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
|
57
|
+
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
|
58
|
+
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
|
59
|
+
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
|
60
|
+
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
|
61
|
+
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
|
62
|
+
</select>
|
63
|
+
<span class="sc-format-separator"></span>
|
64
|
+
<select title="Background Color" class="sc-background">
|
65
|
+
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
|
66
|
+
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
|
67
|
+
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
|
68
|
+
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
|
69
|
+
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
|
70
|
+
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
|
71
|
+
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
|
72
|
+
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)" selected=""></option>
|
73
|
+
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
|
74
|
+
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
|
75
|
+
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
|
76
|
+
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
|
77
|
+
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
|
78
|
+
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
|
79
|
+
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
|
80
|
+
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
|
81
|
+
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
|
82
|
+
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
|
83
|
+
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
|
84
|
+
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
|
85
|
+
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
|
86
|
+
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
|
87
|
+
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
|
88
|
+
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
|
89
|
+
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
|
90
|
+
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
|
91
|
+
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
|
92
|
+
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
|
93
|
+
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
|
94
|
+
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
|
95
|
+
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
|
96
|
+
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
|
97
|
+
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
|
98
|
+
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
|
99
|
+
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
|
100
|
+
</select>
|
101
|
+
<span class="sc-format-separator"></span>
|
102
|
+
<select title="Text Alignment" class="sc-align">
|
103
|
+
<option value="left" label="Left" selected=""></option>
|
104
|
+
<option value="center" label="Center"></option>
|
105
|
+
<option value="right" label="Right"></option>
|
106
|
+
<option value="justify" label="Justify"></option>
|
107
|
+
</select>
|
108
|
+
</span>
|
109
|
+
<span class="sc-format-group">
|
110
|
+
<span title="Link" class="sc-format-button sc-link"></span>
|
111
|
+
</span>
|
112
|
+
</div>
|
113
|
+
<div id="full-editor" class="editor">
|
114
|
+
</div>
|
115
|
+
</div>
|
116
|
+
|
117
|
+
<script type='text/javascript'>
|
118
|
+
// Initialize editor with custom theme and modules
|
119
|
+
var fullEditor = new Quill('#full-editor', {
|
120
|
+
modules: {
|
121
|
+
'toolbar': { container: '#full-toolbar' },
|
122
|
+
'link-tooltip': true
|
123
|
+
},
|
124
|
+
theme: 'snow'
|
125
|
+
});
|
126
|
+
</script>
|
data/lib/quill/rails/version.rb
CHANGED
@@ -0,0 +1,16 @@
|
|
1
|
+
require 'erb'
|
2
|
+
|
3
|
+
module Quill
|
4
|
+
module Rails
|
5
|
+
module ViewHelpers
|
6
|
+
def source_root
|
7
|
+
File.dirname(__FILE__) + '/templates'
|
8
|
+
end
|
9
|
+
# A link helper to create a 'default' Quill text edit
|
10
|
+
#
|
11
|
+
def quill_editor(options={})
|
12
|
+
ERB.new(File.read(File.join(source_root, 'template.html.erb'))).result(binding).html_safe
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: quill-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0
|
4
|
+
version: 0.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Robert Wiegmann
|
@@ -86,8 +86,8 @@ dependencies:
|
|
86
86
|
- - ! '>='
|
87
87
|
- !ruby/object:Gem::Version
|
88
88
|
version: '0'
|
89
|
-
description: This gem provides the Quill.js Rich Text Editor assets
|
90
|
-
3.1/4.0 application.
|
89
|
+
description: This gem provides the Quill.js Rich Text Editor assets and view helper
|
90
|
+
for your Rails 3.1/4.0 application.
|
91
91
|
email:
|
92
92
|
- robert.wiegmann@gmail.com
|
93
93
|
executables: []
|
@@ -98,17 +98,17 @@ files:
|
|
98
98
|
- LICENSE
|
99
99
|
- README.md
|
100
100
|
- app/assets/javascripts/quill.js
|
101
|
-
- app/assets/stylesheets/advanced.css
|
102
101
|
- app/assets/stylesheets/quill.snow.css
|
103
102
|
- lib/quill-rails.rb
|
104
103
|
- lib/quill/rails.rb
|
105
104
|
- lib/quill/rails/configuration.rb
|
106
105
|
- lib/quill/rails/engine.rb
|
106
|
+
- lib/quill/rails/templates/template.html.erb
|
107
107
|
- lib/quill/rails/version.rb
|
108
108
|
- lib/quill/rails/view_helpers.rb
|
109
109
|
homepage: https://github.com/the-robear/quill-rails
|
110
110
|
licenses:
|
111
|
-
- All rights reserved
|
111
|
+
- Quill is All rights reserved
|
112
112
|
- Copyright (c) 2013, salesforce.com
|
113
113
|
metadata: {}
|
114
114
|
post_install_message:
|
@@ -1,25 +0,0 @@
|
|
1
|
-
.basic-wrapper,
|
2
|
-
.advanced-wrapper {
|
3
|
-
border: 1px solid #ccc;
|
4
|
-
float: left;
|
5
|
-
margin-left: 3%;
|
6
|
-
margin-top: 15px;
|
7
|
-
margin-bottom: 15px;
|
8
|
-
}
|
9
|
-
.basic-wrapper {
|
10
|
-
width: 40%;
|
11
|
-
}
|
12
|
-
.advanced-wrapper {
|
13
|
-
width: 50%;
|
14
|
-
}
|
15
|
-
.editor-container {
|
16
|
-
height: 400px;
|
17
|
-
}
|
18
|
-
.toolbar-container {
|
19
|
-
border-bottom: 1px solid #ccc;
|
20
|
-
}
|
21
|
-
.basic-wrapper .toolbar-container .sc-active,
|
22
|
-
.basic-wrapper .toolbar-container button:hover {
|
23
|
-
color: #008000;
|
24
|
-
font-weight: bold;
|
25
|
-
}
|