This time I will share jQuery Plugin and tutorial about Textile Editor For Textarea – jQuery textileToolbar, hope it will help you in programming stack.
| File Size: | 20 KB |
|---|---|
| Views Total: | 4035 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This is a textile toolbar jQuery plugin which adds a Textile Markup Language Editor with custom editor buttons to your textarea.
Supported editor buttons:
- Spacer
- Strong
- Italic
- Underline
- Deleted
- Code
- H1
- H2
- H3
- UL
- OL
- Pre
- Img
- Link
- URL
How to use it:
1. Import the stylesheet textileToolbar.css in the head, and the JavaScript textileToolbar.js after jQuery library.
1 |
<link rel="stylesheet" href="textileToolbar.css"> |
2 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" |
3 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
4 |
crossorigin="anonymous"> |
5 |
</script> |
6 |
<script src="jquery.textileToolbar.js"></script> |
2. Call the function on the textarea element and done.
1 |
<textarea id="textile-demo"></textarea> |
1 |
$("#textile-demo").textileToolbar(); |
3. Specify the buttons to display in the textile toolbar.
1 |
$("#textile-demo").textileToolbar({ |
2 |
toolbar: ["strong","italic","underline","spacer","ul","ol"] |
3 |
}); |
4. Destroy and remove the textile toolbar.
1 |
$("#textile-demo").textileToolbar("destroy"); |
5. Available configuration options.
01 |
$("#textile-demo").textileToolbar({ |
02 |
buttons: buttons, // see below |
03 |
toolbar: [ |
04 |
"strong", |
05 |
"italic", |
06 |
"underline", |
07 |
"deleted", |
08 |
"code", |
09 |
"spacer", |
10 |
"h1", |
11 |
"h2", |
12 |
"h3", |
13 |
"spacer", |
14 |
"ul", |
15 |
"ol", |
16 |
"spacer", |
17 |
"pre", |
18 |
"spacer", |
19 |
"img", |
20 |
"link" |
21 |
], |
22 |
/* |
23 |
Possible placement values: |
24 |
string 'beforeElement' default: place toolbar div immediately before the textarea |
25 |
string 'afterElement' place toolbar div immediately after the textarea |
26 |
string 'beforeParent' place toolbar div before the textarea's parent container |
27 |
string 'afterParent' place toolbar div after the textarea's parent container |
28 |
function callback returning jQuery element before which to place the toolbar |
29 |
*/ |
30 |
placement: 'beforeElement' |
31 |
}); |
6. Default editor buttons displayed in the toolbar.
001 |
var buttons = { |
002 |
spacer: { |
003 |
type: "spacer" |
004 |
}, |
005 |
strong: { |
006 |
type: "singleTag", |
007 |
title: "Strong", |
008 |
class: "strong", |
009 |
tag: "*" |
010 |
}, |
011 |
italic: { |
012 |
type: "singleTag", |
013 |
title: "Italic", |
014 |
class: "em", |
015 |
tag: "_" |
016 |
}, |
017 |
underline: { |
018 |
type: "singleTag", |
019 |
title: "Underline", |
020 |
class: "ins", |
021 |
tag: "+" |
022 |
}, |
023 |
deleted: { |
024 |
type: "singleTag", |
025 |
title: "Deleted", |
026 |
class: "del", |
027 |
tag: "-" |
028 |
}, |
029 |
code: { |
030 |
type: "singleTag", |
031 |
title: "Code", |
032 |
class: "code", |
033 |
tag: "@" |
034 |
}, |
035 |
h1: { |
036 |
type: "encloseLine", |
037 |
title: "Heading 1", |
038 |
class: "h1", |
039 |
startTag: "h1. ", |
040 |
endTag: "", |
041 |
searchExpression: /^hd+.s+/, |
042 |
replacement: "" |
043 |
}, |
044 |
h2: { |
045 |
type: "encloseLine", |
046 |
title: "Heading 2", |
047 |
class: "h2", |
048 |
startTag: "h2. ", |
049 |
endTag: "", |
050 |
searchExpression: /^hd+.s+/, |
051 |
replacement: "" |
052 |
}, |
053 |
h3: { |
054 |
type: "encloseLine", |
055 |
title: "Heading 3", |
056 |
class: "h3", |
057 |
startTag: "h3. ", |
058 |
endTag: "", |
059 |
searchExpression: /^hd+.s+/, |
