Attention: This MooTools Page isn't maintained, please check out the GitHub repository!
A light-weight, powerful and Open Source GitHub Flavored Markdown editor, written in pure vanilla JavaScript with a jQuery and a MooTools implementation.
// Vanilla Edition document.addEventListener("DOMContentLoaded", function(){ var options = { /* Your Options */ }; // Just use an CSS Selector... tail.writer(".my-tail-editor", options); // ... or an Element tail.writer(document.getElementById("tail-editor"), options); }); // MooTools Edition window.addEvent("domready", function(){ var options = { /* Your Options */ }; // Single Selector $("my-textarea").tailWriter(options); // Multi Selector $$("my-textareas").tailWriter(options); }); // jQuery Edition jQuery(document).ready(function(){ var options = { /* Your Options */ }; // The known jQuery method jQuery(".my-tail-editor").tailWriter(options); });
This MooTools Page isn't maintained anymore, please check out the GitHub repository! The tail.writer script itself is now also written in pure vanilla JavaScript!
tailWriter.defaults = { width: "100%", height: ["200px", "500px"], classes: "", resize: true, indentTab: false, indentSize: 4, toolbar: [ "headers", "|", "bold", "italic", "strikethrough", "|", "quote", "code", "codeblock", "indent", "outdent", "|", "link", "image", "table", "hr", "|", "list:unordered", "list:ordered", "|", "preview" ], tooltip: "top", statusbar: true };
Title | Type | Description |
---|---|---|
width | string | Defines the width of the tail.writer container. |
height | array | Defines the height of the tail.writer container used as [minHeight, maxHeight]. The maxHeight parameter is used for the resize function. |
classes | string | Adds additional, custom class names to the tail.writer container element. |
resize | boolean | Set this to true to adapt the height of the textarea field to the content, limited to the height option. |
indentTab | boolean | Set this to true to use Tabs (\t) for indenting, and false to use spaces (depending on indentSize). |
indentSize | integer | Defines the number of spaces for each indent step, requires indentTab: false! |
toolbar | array | Defines the actions / buttons within the shown toolbar. |
tooltip | string | Defines the position of the action / button tooltip position (use false to disable the tooltips). |
statusbar | boolean | Set this to true to enable the statusbar, which shows meta informations / counter data. |
The new toolbar action API allows to set arguments after the action name, separated with a colon: <action_name>:<param1>[,<param2>]. A concrete example of this shows the single header action: header:3, which creates a toolbar action button which inserts a ### (aka <h3></h3>) markup.
Action: "header:<size>" Markup: "$1\n==========" | "$1\n----------" | "# $1" Arguments: <size:int>
Shows a single header action button, use a size between 1 and 6 (for <h1> ... <h6> respectively).
Action: "headers:<type>" Markup: "$1\n==========" | "$1\n----------" | "# $1" Arguments: <type:string>
Shows all or just 3 (use "x3" as type argument) header variants within a Dropdown field.
Action: "bold" Markup: "**$1**" Arguments: null
Action: "italic" Markup: "_$1_" Arguments: null
Action: "underline" Markup: "<u>$1</u>" Arguments: null
Action: "strikethough" Markup: "~~$1~~" Arguments: null
Action: "code" Markup: "`$1`" Arguments: null
Action: "hr" Markup: "----------" Arguments: null
Action: "codeblock" Markup: "```\n$1\n```" Arguments: null
Action: "quote" Markup: ">\t$1" Arguments: null
Action: "list:<type>" Markup: "-\t$1" | "1.\t$1" | "- [ ]\t$1" | "- [x]\t$1" Arguments: <type:string>
Creates a List use "unordered", "ordered", "unchecked" or "checked" as type argument to configure the list.
Action: "link:<type>" Markup: "[$1](url)" Arguments: <type:string>
Creates a clickable Hyperlink, use "dropdown" or "dialog" as type argument to create a Dropdown or Dialog box or use no argument to just insert the respective marup!
Action: "image:<type>" Markup: "" Arguments: <type:string>
Creates a Image Link / Embed, use "dropdown" or "dialog" as type argument to create a Dropdown or Dialog box or use no argument to just insert the respective marup!
Action: "table:<type>" Markup: "" Arguments: <type:string>
Creates a Table Structure, use "dropdown" or "dialog" as type argument to create a Dropdown or Dialog box.
Action: "indent" Markup: "\t$1" Arguments: null
Action: "outdent" Markup: null Arguments: null
Action: "preview" Markup: null Arguments: null
Parses the Markdown Markup content, requires marked.
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus