markdown-toolbar 0.1.3 → 0.2.3
Sign up to get free protection for your applications and to get access to all the features.
- data/Changes.markdown +6 -0
- data/README.markdown +16 -3
- data/lib/generators/markdown_toolbar/copy_buttons_generator.rb +13 -0
- data/lib/generators/markdown_toolbar/copy_css_generator.rb +13 -0
- data/lib/markdown-toolbar.rb +2 -4
- data/lib/markdown-toolbar/engine.rb +1 -3
- data/lib/markdown-toolbar/version.rb +2 -4
- data/markdown-toolbar.gemspec +1 -1
- data/vendor/assets/images/button.psd +0 -0
- data/vendor/assets/images/text_blockquote.png +0 -0
- data/vendor/assets/images/text_code.png +0 -0
- data/vendor/assets/images/text_delimiter.png +0 -0
- data/vendor/assets/images/text_empty.png +0 -0
- data/vendor/assets/javascripts/markdown-toolbar-buttons.js +17 -0
- data/vendor/assets/javascripts/{toolbar.js → markdown-toolbar-core.js} +54 -23
- data/vendor/assets/javascripts/markdown-toolbar.js +2 -1
- data/vendor/assets/stylesheets/markdown-toolbar.css.erb +1 -8
- metadata +11 -3
data/Changes.markdown
CHANGED
data/README.markdown
CHANGED
@@ -3,7 +3,8 @@ Markdown Toolbar
|
|
3
3
|
|
4
4
|
Markdown Toolbar is an lightweight helper buttons that appear over textarea
|
5
5
|
|
6
|
-
![image](http://www.vitalik.com.ua/images/markdown-toolbar.png)
|
6
|
+
[![image](http://www.vitalik.com.ua/images/markdown-toolbar.png)](http://www.vitalik.com.ua/markdown-toolbar/)
|
7
|
+
|
7
8
|
|
8
9
|
Try a demonstration [demonstration](http://www.vitalik.com.ua/markdown-toolbar/)
|
9
10
|
|
@@ -11,7 +12,7 @@ Try a demonstration [demonstration](http://www.vitalik.com.ua/markdown-toolbar/)
|
|
11
12
|
Installation
|
12
13
|
------------
|
13
14
|
|
14
|
-
In `Rails 3.1`, add this to your Gemfile and run the
|
15
|
+
In `Rails 3.1`, add this to your Gemfile and run the **bundle** command.
|
15
16
|
|
16
17
|
gem "markdown-toolbar"
|
17
18
|
|
@@ -31,6 +32,18 @@ and to application.css
|
|
31
32
|
|
32
33
|
*= require markdown-toolbar
|
33
34
|
|
34
|
-
Then you can add toolbar to any textarea by adding a class
|
35
|
+
Then you can add toolbar to any textarea by adding a class **markdown-toolbar** to it
|
35
36
|
|
36
37
|
<%= f.text_area :text, :class => "markdown-toolbar" %>
|
38
|
+
|
39
|
+
|
40
|
+
Customizing
|
41
|
+
-----------
|
42
|
+
|
43
|
+
You can customize order, remove or add new buttons by copying markdown-toolbar-buttonsjs file into your project, there are rails generator to do it:
|
44
|
+
|
45
|
+
rails generator markdown_toolbar:copy_buttons
|
46
|
+
|
47
|
+
Yo customize stylesheet run:
|
48
|
+
|
49
|
+
rails generator markdown_toolbar:copy_css
|
@@ -0,0 +1,13 @@
|
|
1
|
+
module MarkdownToolbar
|
2
|
+
class CopyButtonsGenerator < ::Rails::Generators::Base
|
3
|
+
|
4
|
+
source_root File.expand_path('../../../../vendor/assets', __FILE__)
|
5
|
+
desc "Copies toolbar-buttons.js so you can create new buttons or reorder them"
|
6
|
+
|
7
|
+
def copy_buttons
|
8
|
+
say_status("copying", "markdown-toolbar-buttons.js", :green)
|
9
|
+
copy_file "javascripts/markdown-toolbar-buttons.js", "public/javascripts/markdown-toolbar-buttons.js"
|
10
|
+
end
|
11
|
+
|
12
|
+
end
|
13
|
+
end
|
@@ -0,0 +1,13 @@
|
|
1
|
+
module MarkdownToolbar
|
2
|
+
class CopyCssGenerator < ::Rails::Generators::Base
|
3
|
+
|
4
|
+
desc "Copies style file for customization"
|
5
|
+
source_root File.expand_path('../../../../vendor/assets', __FILE__)
|
6
|
+
|
7
|
+
def copy_css
|
8
|
+
say_status("copying", "markdown-toolbar.css.erb", :green)
|
9
|
+
copy_file "stylesheets/markdown-toolbar.css.erb", "public/javascripts/markdown-toolbar.css.erb"
|
10
|
+
end
|
11
|
+
|
12
|
+
end
|
13
|
+
end
|
data/lib/markdown-toolbar.rb
CHANGED
data/markdown-toolbar.gemspec
CHANGED
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,17 @@
|
|
1
|
+
MarkdownToolbar.buttons = [
|
2
|
+
{title: 'Bold', type: 'wrapper', left: '**', right: '**', id: 'bold'},
|
3
|
+
{title: 'Italic', type: 'wrapper', left: '*', right: '*', id: 'italic'},
|
4
|
+
{id: 'delimiter'},
|
5
|
+
{title: 'H1', type: 'wrapper', left: '# ', right: ' #', id: 'heading_1'},
|
6
|
+
{title: 'H2', type: 'wrapper', left: '# ', right: ' #', id: 'heading_2'},
|
7
|
+
{title: 'H3', type: 'wrapper', left: '# ', right: ' #', id: 'heading_3'},
|
8
|
+
{id: 'delimiter'},
|
9
|
+
{title: 'Bulleted list', type: 'prefixer', left: '- ', id: 'list_bullets'},
|
10
|
+
{title: 'Numbered list', type: 'list_numbers', id: 'list_numbers'},
|
11
|
+
{title: 'Blockquote', type: 'prefixer', left: '> ', id: 'blockquote'},
|
12
|
+
// Code:
|
13
|
+
{title: 'Source Code', type: 'block_wrapper', left: "```\n", right: "\n```", id: 'code'},
|
14
|
+
{id: 'delimiter'},
|
15
|
+
{title: 'Image', type: 'image', id: 'image'},
|
16
|
+
{title: 'Link', type: 'link', id: 'link'},
|
17
|
+
];
|
@@ -14,7 +14,6 @@ function MarkdownToolbar(textarea){
|
|
14
14
|
this.add_resizer();
|
15
15
|
}
|
16
16
|
|
17
|
-
|
18
17
|
this.add_toolbar = function(){
|
19
18
|
this.textarea.before("<div class='markdown-toolbar-panel'><div class='mdt_buttons'></div></div>");
|
20
19
|
this.panel = this.textarea.prev(".markdown-toolbar-panel");
|
@@ -31,32 +30,31 @@ function MarkdownToolbar(textarea){
|
|
31
30
|
}
|
32
31
|
|
33
32
|
this.fill_buttons = function(){
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
this.add_button("list_bullets", "Bulleted list");
|
39
|
-
this.add_button("list_numbers", "Numbered list");
|
40
|
-
this.add_button("image", "Insert Image");
|
41
|
-
this.add_button("link", "Insert Link");
|
33
|
+
$(MarkdownToolbar.buttons).each(function(i, v){
|
34
|
+
$this.add_button_image(v.title, v.id);
|
35
|
+
$this.bind_action(v);
|
36
|
+
});
|
42
37
|
}
|
43
38
|
|
44
|
-
this.
|
39
|
+
this.add_button_image = function(title, button_id){
|
45
40
|
$(".mdt_buttons", this.panel).append("<div class='mdt_button mdt_button_" + button_id + "' title='"+ title + "'></div>");
|
46
|
-
|
47
|
-
switch(button_id){
|
48
|
-
case "bold":
|
49
|
-
case "italic":
|
50
|
-
case "heading_2":
|
51
|
-
case "heading_3":
|
52
|
-
$this.perform_insert_tag(button_id, tagStart, tagEnd);
|
53
|
-
break;
|
41
|
+
}
|
54
42
|
|
43
|
+
this.bind_action = function(options){
|
44
|
+
$(".mdt_button_" + options.id, this.panel).bind('click', function(event) {
|
45
|
+
switch(options.type){
|
46
|
+
case 'wrapper':
|
47
|
+
$this.perform_insert_line_wrapper(options.id, options.left, options.right);
|
48
|
+
break;
|
49
|
+
case 'block_wrapper':
|
50
|
+
$this.perform_insert_block_wrapper(options.id, options.left, options.right);
|
51
|
+
break;
|
52
|
+
case 'prefixer':
|
53
|
+
$this.perform_insert_prefixer(options.id, options.left); // todo
|
54
|
+
break;
|
55
55
|
case "list_numbers":
|
56
|
-
|
57
|
-
$this.perform_insert_list(button_id)
|
56
|
+
$this.perform_insert_list(options.id)
|
58
57
|
break;
|
59
|
-
|
60
58
|
case "image":
|
61
59
|
$this.perform_insert_image();
|
62
60
|
break;
|
@@ -67,8 +65,7 @@ function MarkdownToolbar(textarea){
|
|
67
65
|
});
|
68
66
|
}
|
69
67
|
|
70
|
-
|
71
|
-
this.perform_insert_tag = function(button_id, tagStart, tagEnd){
|
68
|
+
this.perform_insert_line_wrapper = function(button_id, tagStart, tagEnd){
|
72
69
|
|
73
70
|
var the_text = $this.selected_text();
|
74
71
|
|
@@ -91,6 +88,20 @@ function MarkdownToolbar(textarea){
|
|
91
88
|
$this.textarea.focus();
|
92
89
|
}
|
93
90
|
|
91
|
+
this.perform_insert_block_wrapper = function(button_id, top, bottom){
|
92
|
+
|
93
|
+
var the_text = $this.selected_text();
|
94
|
+
|
95
|
+
if(the_text.length == 0){
|
96
|
+
the_text = "" + button_id + " text";
|
97
|
+
}
|
98
|
+
|
99
|
+
var final_text = top + the_text + bottom;
|
100
|
+
|
101
|
+
$this.textarea.replaceSelection( final_text , true );
|
102
|
+
$this.textarea.focus();
|
103
|
+
}
|
104
|
+
|
94
105
|
this.selected_text = function(){
|
95
106
|
return this.textarea.getSelection().text;
|
96
107
|
}
|
@@ -121,6 +132,26 @@ function MarkdownToolbar(textarea){
|
|
121
132
|
$this.textarea.focus();
|
122
133
|
}
|
123
134
|
|
135
|
+
this.perform_insert_prefixer = function(button_id, left) {
|
136
|
+
var the_text = this.selected_text();
|
137
|
+
if (the_text.length == 0){
|
138
|
+
the_text = "Apple\nBananna\nOrange"
|
139
|
+
}
|
140
|
+
|
141
|
+
var lines = the_text.split("\n");
|
142
|
+
var final_text = ""
|
143
|
+
|
144
|
+
$(lines).each(function(i, line){
|
145
|
+
|
146
|
+
final_text += left + line;
|
147
|
+
if (i < lines.length){
|
148
|
+
final_text += "\n";
|
149
|
+
}
|
150
|
+
});
|
151
|
+
|
152
|
+
$this.textarea.replaceSelection( final_text , true );
|
153
|
+
$this.textarea.focus();
|
154
|
+
}
|
124
155
|
|
125
156
|
this.perform_insert_image = function(){
|
126
157
|
var the_text = this.selected_text()
|
@@ -30,14 +30,7 @@
|
|
30
30
|
margin-left:2px;
|
31
31
|
}
|
32
32
|
|
33
|
-
|
34
|
-
|
35
|
-
<%= self.class.ancestors %>
|
36
|
-
|
37
|
-
<%= self.public_methods.inspect %>
|
38
|
-
*/
|
39
|
-
|
40
|
-
<% %w{ bold italic strike list_bullets list_numbers heading_2 heading_3 link image}.each_with_index do |button, index| %>
|
33
|
+
<% %w{ delimiter code blockquote bold italic strike list_bullets list_numbers heading_1 heading_2 heading_3 link image}.each_with_index do |button, index| %>
|
41
34
|
.mdt_button_<%= button %> {
|
42
35
|
background: url( <%= asset_path "text_#{button}.png" %>);
|
43
36
|
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: markdown-toolbar
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.3
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-11
|
12
|
+
date: 2012-12-11 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sprockets
|
@@ -55,6 +55,8 @@ files:
|
|
55
55
|
- Gemfile
|
56
56
|
- README.markdown
|
57
57
|
- Rakefile
|
58
|
+
- lib/generators/markdown_toolbar/copy_buttons_generator.rb
|
59
|
+
- lib/generators/markdown_toolbar/copy_css_generator.rb
|
58
60
|
- lib/markdown-toolbar.rb
|
59
61
|
- lib/markdown-toolbar/engine.rb
|
60
62
|
- lib/markdown-toolbar/version.rb
|
@@ -64,8 +66,13 @@ files:
|
|
64
66
|
- vendor/.DS_Store
|
65
67
|
- vendor/assets/.DS_Store
|
66
68
|
- vendor/assets/images/.DS_Store
|
69
|
+
- vendor/assets/images/button.psd
|
67
70
|
- vendor/assets/images/markdown-toolbar.png
|
71
|
+
- vendor/assets/images/text_blockquote.png
|
68
72
|
- vendor/assets/images/text_bold.png
|
73
|
+
- vendor/assets/images/text_code.png
|
74
|
+
- vendor/assets/images/text_delimiter.png
|
75
|
+
- vendor/assets/images/text_empty.png
|
69
76
|
- vendor/assets/images/text_heading_1.png
|
70
77
|
- vendor/assets/images/text_heading_2.png
|
71
78
|
- vendor/assets/images/text_heading_3.png
|
@@ -77,8 +84,9 @@ files:
|
|
77
84
|
- vendor/assets/images/text_strike.png
|
78
85
|
- vendor/assets/images/text_underline.png
|
79
86
|
- vendor/assets/javascripts/jquery-fieldselection.js
|
87
|
+
- vendor/assets/javascripts/markdown-toolbar-buttons.js
|
88
|
+
- vendor/assets/javascripts/markdown-toolbar-core.js
|
80
89
|
- vendor/assets/javascripts/markdown-toolbar.js
|
81
|
-
- vendor/assets/javascripts/toolbar.js
|
82
90
|
- vendor/assets/stylesheets/markdown-toolbar.css.erb
|
83
91
|
homepage: ''
|
84
92
|
licenses: []
|