markdown-toolbar 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/README.rdoc +29 -0
- data/Rakefile +1 -0
- data/lib/markdown-toolbar/version.rb +5 -0
- data/lib/markdown-toolbar.rb +7 -0
- data/markdown-toolbar.gemspec +21 -0
- data/vendor/.DS_Store +0 -0
- data/vendor/assets/.DS_Store +0 -0
- data/vendor/assets/images/.DS_Store +0 -0
- data/vendor/assets/images/markdown-toolbar.png +0 -0
- data/vendor/assets/images/text_bold.png +0 -0
- data/vendor/assets/images/text_heading_1.png +0 -0
- data/vendor/assets/images/text_heading_2.png +0 -0
- data/vendor/assets/images/text_heading_3.png +0 -0
- data/vendor/assets/images/text_image.png +0 -0
- data/vendor/assets/images/text_italic.png +0 -0
- data/vendor/assets/images/text_link.png +0 -0
- data/vendor/assets/images/text_list_bullets.png +0 -0
- data/vendor/assets/images/text_list_numbers.png +0 -0
- data/vendor/assets/images/text_strike.png +0 -0
- data/vendor/assets/images/text_underline.png +0 -0
- data/vendor/assets/javascripts/jquery-fieldselection.js +83 -0
- data/vendor/assets/javascripts/markdown-toolbar.coffee +97 -0
- data/vendor/assets/stylesheets/markdown-toolbar.scss.erb +38 -0
- metadata +91 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.rdoc
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
= Markdown Toolbar
|
2
|
+
|
3
|
+
Markdown Toolbar is an lightweight helper buttons that appear over textarea
|
4
|
+
|
5
|
+
|
6
|
+
== Installation
|
7
|
+
|
8
|
+
In <b>Rails 3.1</b>, add this to your Gemfile and run the +bundle+ command.
|
9
|
+
|
10
|
+
gem "markdown-toolbar"
|
11
|
+
|
12
|
+
Alternatively, you can install it as a plugin.
|
13
|
+
|
14
|
+
rails plugin install git://github.com/fuksito/markdown-toolbar.git
|
15
|
+
|
16
|
+
|
17
|
+
== Getting Started
|
18
|
+
|
19
|
+
Markdown Toolbar requires you to add such lines to your application.js
|
20
|
+
|
21
|
+
//= require jquery-fieldselection
|
22
|
+
//= require markdown-toolbar
|
23
|
+
|
24
|
+
and to application.css
|
25
|
+
*= require markdown-toolbar
|
26
|
+
|
27
|
+
Then you can add toolbar to any textarea by adding a class +markdown-toolbar+ to it
|
28
|
+
|
29
|
+
<%= f.text_area :text, :size => '90x30', :class => "markdown-toolbar" %>
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "markdown-toolbar/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "markdown-toolbar"
|
7
|
+
s.version = Markdown::Toolbar::VERSION
|
8
|
+
s.authors = ["Vitaliy Yanchuk"]
|
9
|
+
s.email = ["fuksito@gmail.com"]
|
10
|
+
s.homepage = ""
|
11
|
+
s.summary = %q{ Wrapper to help add markdown syntax into textarea }
|
12
|
+
s.description = %q{ Helps with markdown editing }
|
13
|
+
|
14
|
+
s.files = `git ls-files`.split("\n")
|
15
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
16
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
17
|
+
s.require_paths = ["lib"]
|
18
|
+
|
19
|
+
s.add_development_dependency 'rails', '~> 3.1.0'
|
20
|
+
s.rubyforge_project = s.name
|
21
|
+
end
|
data/vendor/.DS_Store
ADDED
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,83 @@
|
|
1
|
+
/*
|
2
|
+
* jQuery plugin: fieldSelection - v0.1.0 - last change: 2006-12-16
|
3
|
+
* (c) 2006 Alex Brem <alex@0xab.cd> - http://blog.0xab.cd
|
4
|
+
*/
|
5
|
+
|
6
|
+
(function() {
|
7
|
+
|
8
|
+
var fieldSelection = {
|
9
|
+
|
10
|
+
getSelection: function() {
|
11
|
+
|
12
|
+
var e = this.jquery ? this[0] : this;
|
13
|
+
|
14
|
+
return (
|
15
|
+
|
16
|
+
/* mozilla / dom 3.0 */
|
17
|
+
('selectionStart' in e && function() {
|
18
|
+
var l = e.selectionEnd - e.selectionStart;
|
19
|
+
return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
|
20
|
+
}) ||
|
21
|
+
|
22
|
+
/* exploder */
|
23
|
+
(document.selection && function() {
|
24
|
+
|
25
|
+
e.focus();
|
26
|
+
|
27
|
+
var r = document.selection.createRange();
|
28
|
+
if (r == null) {
|
29
|
+
return { start: 0, end: e.value.length, length: 0 }
|
30
|
+
}
|
31
|
+
|
32
|
+
var re = e.createTextRange();
|
33
|
+
var rc = re.duplicate();
|
34
|
+
re.moveToBookmark(r.getBookmark());
|
35
|
+
rc.setEndPoint('EndToStart', re);
|
36
|
+
|
37
|
+
return { start: rc.text.length, end: rc.text.length + r.text.length, length: r.text.length, text: r.text };
|
38
|
+
}) ||
|
39
|
+
|
40
|
+
/* browser not supported */
|
41
|
+
function() {
|
42
|
+
return { start: 0, end: e.value.length, length: 0 };
|
43
|
+
}
|
44
|
+
|
45
|
+
)();
|
46
|
+
|
47
|
+
},
|
48
|
+
|
49
|
+
replaceSelection: function() {
|
50
|
+
|
51
|
+
var e = this.jquery ? this[0] : this;
|
52
|
+
var text = arguments[0] || '';
|
53
|
+
|
54
|
+
return (
|
55
|
+
|
56
|
+
/* mozilla / dom 3.0 */
|
57
|
+
('selectionStart' in e && function() {
|
58
|
+
e.value = e.value.substr(0, e.selectionStart) + text + e.value.substr(e.selectionEnd, e.value.length);
|
59
|
+
return this;
|
60
|
+
}) ||
|
61
|
+
|
62
|
+
/* exploder */
|
63
|
+
(document.selection && function() {
|
64
|
+
e.focus();
|
65
|
+
document.selection.createRange().text = text;
|
66
|
+
return this;
|
67
|
+
}) ||
|
68
|
+
|
69
|
+
/* browser not supported */
|
70
|
+
function() {
|
71
|
+
e.value += text;
|
72
|
+
return this;
|
73
|
+
}
|
74
|
+
|
75
|
+
)();
|
76
|
+
|
77
|
+
}
|
78
|
+
|
79
|
+
};
|
80
|
+
|
81
|
+
jQuery.each(fieldSelection, function(i) { jQuery.fn[i] = this; });
|
82
|
+
|
83
|
+
})();
|
@@ -0,0 +1,97 @@
|
|
1
|
+
$ ->
|
2
|
+
for textarea in $(".markdown-toolbar")
|
3
|
+
new MarkdownToolbar $(textarea)
|
4
|
+
|
5
|
+
|
6
|
+
class MarkdownToolbar
|
7
|
+
constructor: (@textarea) ->
|
8
|
+
this.add_toolbar()
|
9
|
+
|
10
|
+
add_toolbar: ->
|
11
|
+
@textarea.before "<div class='markdown-toolbar-panel'><div class='mdt_buttons'></div></div>"
|
12
|
+
@panel = @textarea.prev ".markdown-toolbar-panel"
|
13
|
+
|
14
|
+
@panel.css "width", @textarea.css('width')
|
15
|
+
|
16
|
+
@textarea.css "margin-top", 0
|
17
|
+
|
18
|
+
for pos_type in ["margin", "padding"]
|
19
|
+
for pos in ['left', 'right']
|
20
|
+
@panel.css "#{pos_type}-#{pos}", @textarea.css("#{pos_type}-#{pos}")
|
21
|
+
|
22
|
+
this.fill_buttons()
|
23
|
+
|
24
|
+
add_button: (button_id, title, tagStart, tagEnd) ->
|
25
|
+
$(".mdt_buttons", @panel).append "<div class='mdt_button mdt_button_#{button_id}' title='#{title}'></div>"
|
26
|
+
$(".mdt_button_#{button_id}", @panel).bind 'click', (event) =>
|
27
|
+
switch button_id
|
28
|
+
when "bold", "italic", "heading_2", "heading_3"
|
29
|
+
this.perform_insert_tag(button_id, tagStart, tagEnd)
|
30
|
+
when "list_numbers", "list_bullets"
|
31
|
+
this.perform_insert_list(button_id)
|
32
|
+
when "image"
|
33
|
+
this.perform_insert_image()
|
34
|
+
when "link"
|
35
|
+
this.perform_insert_link()
|
36
|
+
|
37
|
+
perform_insert_tag: (button_id, tagStart, tagEnd = '') ->
|
38
|
+
the_text = this.selected_text()
|
39
|
+
the_text ||= "#{button_id} text"
|
40
|
+
lines = the_text.split("\n")
|
41
|
+
final_text = ""
|
42
|
+
i = 0
|
43
|
+
for line in lines
|
44
|
+
i++
|
45
|
+
final_text += "#{tagStart}#{line}#{tagEnd}"
|
46
|
+
final_text += "\n" if i < lines.length
|
47
|
+
|
48
|
+
@textarea.replaceSelection( final_text , true )
|
49
|
+
|
50
|
+
perform_insert_list: (button_id) ->
|
51
|
+
the_text = this.selected_text()
|
52
|
+
the_text ||= "Apple\nBananna\nOrange"
|
53
|
+
lines = the_text.split("\n")
|
54
|
+
final_text = ""
|
55
|
+
i = 0
|
56
|
+
tagStart = "-"
|
57
|
+
for line in lines
|
58
|
+
i++
|
59
|
+
tagStart = "#{i}." if button_id == 'list_numbers'
|
60
|
+
final_text += "#{tagStart} #{line}"
|
61
|
+
final_text += "\n" if i < lines.length
|
62
|
+
|
63
|
+
@textarea.replaceSelection( final_text , true )
|
64
|
+
|
65
|
+
perform_insert_image: ->
|
66
|
+
the_text = this.selected_text()
|
67
|
+
if the_text.length > 0 && (the_text.substr(0,7) == 'http://' || the_text.substr(0,7) == 'https:/')
|
68
|
+
the_text = "[alt text](#{the_text})"
|
69
|
+
else
|
70
|
+
the_text = "![alt text](http://path/to/img.jpg)"
|
71
|
+
|
72
|
+
@textarea.replaceSelection( the_text , true )
|
73
|
+
|
74
|
+
perform_insert_link: ->
|
75
|
+
the_text = this.selected_text()
|
76
|
+
if the_text.length > 0
|
77
|
+
if the_text.substr(0,7) == 'http://' || the_text.substr(0,7) == 'https:/'
|
78
|
+
the_text = "[#{the_text}](#{the_text})"
|
79
|
+
else
|
80
|
+
the_text = "[#{the_text}](http://...)"
|
81
|
+
else
|
82
|
+
the_text = "[example link](http://example.com/)"
|
83
|
+
|
84
|
+
@textarea.replaceSelection( the_text , true )
|
85
|
+
|
86
|
+
selected_text: ->
|
87
|
+
@textarea.getSelection().text
|
88
|
+
|
89
|
+
fill_buttons: ->
|
90
|
+
this.add_button "bold", "Bold", "**", "**"
|
91
|
+
this.add_button "italic", "Italic", "*", "*"
|
92
|
+
this.add_button "heading_2", "Sub title", "\n## ", " ##\n"
|
93
|
+
this.add_button "heading_3", "Sub-sub title", "\n### ", " ###\n"
|
94
|
+
this.add_button "list_bullets", "Bulleted list"
|
95
|
+
this.add_button "list_numbers", "Numbered list"
|
96
|
+
this.add_button "image", "Insert Image"
|
97
|
+
this.add_button "link", "Insert Link"
|
@@ -0,0 +1,38 @@
|
|
1
|
+
.markdown-toolbar-panel {
|
2
|
+
height:20px;
|
3
|
+
border:1px solid #aaa;
|
4
|
+
background: #fafafa;
|
5
|
+
}
|
6
|
+
.markdown-toolbar-panel {
|
7
|
+
margin-bottom:0;
|
8
|
+
border-bottom:0;
|
9
|
+
}
|
10
|
+
.markdown-upload-panel {
|
11
|
+
margin-top:0;
|
12
|
+
border-top:0;
|
13
|
+
padding:5px;
|
14
|
+
}
|
15
|
+
|
16
|
+
.mdt_buttons {
|
17
|
+
width:auto;
|
18
|
+
display:inline-block;
|
19
|
+
margin-top:2px;
|
20
|
+
margin-bottom:2px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.mdt_button {
|
24
|
+
width:16px;
|
25
|
+
height:16px;
|
26
|
+
cursor:pointer;
|
27
|
+
display:inline-block;
|
28
|
+
float:left;
|
29
|
+
margin-left:2px;
|
30
|
+
}
|
31
|
+
<% %w{ bold italic strike list_bullets list_numbers heading_2 heading_3 link image}.each_with_index do |button, index| %>
|
32
|
+
.mdt_button_<%= button %> {
|
33
|
+
background: url('/assets/text_<%= button %>.png');
|
34
|
+
&:active{
|
35
|
+
background-position: 1px 1px;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
<% end %>
|
metadata
ADDED
@@ -0,0 +1,91 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: markdown-toolbar
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
prerelease:
|
5
|
+
version: 0.0.1
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Vitaliy Yanchuk
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
|
13
|
+
date: 2011-08-29 00:00:00 +03:00
|
14
|
+
default_executable:
|
15
|
+
dependencies:
|
16
|
+
- !ruby/object:Gem::Dependency
|
17
|
+
name: rails
|
18
|
+
prerelease: false
|
19
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
20
|
+
none: false
|
21
|
+
requirements:
|
22
|
+
- - ~>
|
23
|
+
- !ruby/object:Gem::Version
|
24
|
+
version: 3.1.0
|
25
|
+
type: :development
|
26
|
+
version_requirements: *id001
|
27
|
+
description: " Helps with markdown editing "
|
28
|
+
email:
|
29
|
+
- fuksito@gmail.com
|
30
|
+
executables: []
|
31
|
+
|
32
|
+
extensions: []
|
33
|
+
|
34
|
+
extra_rdoc_files: []
|
35
|
+
|
36
|
+
files:
|
37
|
+
- .gitignore
|
38
|
+
- Gemfile
|
39
|
+
- README.rdoc
|
40
|
+
- Rakefile
|
41
|
+
- lib/markdown-toolbar.rb
|
42
|
+
- lib/markdown-toolbar/version.rb
|
43
|
+
- markdown-toolbar.gemspec
|
44
|
+
- vendor/.DS_Store
|
45
|
+
- vendor/assets/.DS_Store
|
46
|
+
- vendor/assets/images/.DS_Store
|
47
|
+
- vendor/assets/images/markdown-toolbar.png
|
48
|
+
- vendor/assets/images/text_bold.png
|
49
|
+
- vendor/assets/images/text_heading_1.png
|
50
|
+
- vendor/assets/images/text_heading_2.png
|
51
|
+
- vendor/assets/images/text_heading_3.png
|
52
|
+
- vendor/assets/images/text_image.png
|
53
|
+
- vendor/assets/images/text_italic.png
|
54
|
+
- vendor/assets/images/text_link.png
|
55
|
+
- vendor/assets/images/text_list_bullets.png
|
56
|
+
- vendor/assets/images/text_list_numbers.png
|
57
|
+
- vendor/assets/images/text_strike.png
|
58
|
+
- vendor/assets/images/text_underline.png
|
59
|
+
- vendor/assets/javascripts/jquery-fieldselection.js
|
60
|
+
- vendor/assets/javascripts/markdown-toolbar.coffee
|
61
|
+
- vendor/assets/stylesheets/markdown-toolbar.scss.erb
|
62
|
+
has_rdoc: true
|
63
|
+
homepage: ""
|
64
|
+
licenses: []
|
65
|
+
|
66
|
+
post_install_message:
|
67
|
+
rdoc_options: []
|
68
|
+
|
69
|
+
require_paths:
|
70
|
+
- lib
|
71
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
72
|
+
none: false
|
73
|
+
requirements:
|
74
|
+
- - ">="
|
75
|
+
- !ruby/object:Gem::Version
|
76
|
+
version: "0"
|
77
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
78
|
+
none: false
|
79
|
+
requirements:
|
80
|
+
- - ">="
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: "0"
|
83
|
+
requirements: []
|
84
|
+
|
85
|
+
rubyforge_project: markdown-toolbar
|
86
|
+
rubygems_version: 1.6.2
|
87
|
+
signing_key:
|
88
|
+
specification_version: 3
|
89
|
+
summary: Wrapper to help add markdown syntax into textarea
|
90
|
+
test_files: []
|
91
|
+
|