Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including tail.writer with all npm packages installed. Try it out:

var tailWriter = require("tail.writer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

tail.writer v0.3.2

A light-weight, powerful and configurable Open Source GitHub Flavored Markdown editor, written in pure vanilla JavaScript!

tail.writer

npm npm Software License Author

A light-weight, powerful and Open Source GitHub Flavored Markdown editor, written in pure vanilla JavaScript with a jQuery and a MooTools implementation.

Demonstration

Work in Progress

The script is still Work in Progress!

How to use

// 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);
    });

// jQuery Edition
    jQuery(document).ready(function(){
        var options = { /* Your Options */ };

        // The known jQuery method
        jQuery(".my-tail-editor").tailWriter(options);
    });

// MooTools Edition
    window.addEvent("domready", function(){
        var options = { /* Your Options */ };

        // Single Selector
        $("my-textarea").tailWriter(options);

        // Multi Selector
        $("my-textareas").tailWriter(options);
    });

Available Options

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
};
TitleTypeDescription
widthstringDefines the width of the tail.writer container.
heightarrayDefines the height of the tail.writer container used as [minHeight, maxHeight]. The maxHeight parameter is used for the resize function.
classesstringAdds additional, custom class names to the tail.writer container element.
resizebooleanSet this to true to adapt the height of the textarea field to the content, limited to the height option.
indentTabbooleanSet this to true to use Tabs (\t) for indenting, and false to use spaces (depending on indentSize).
indentSizeintegerDefines the number of spaces for each indent step, requires indentTab: false!
toolbararrayDefines the actions / buttons within the shown toolbar.
tooltipstringDefines the position of the action / button tooltip position (use false to disable the tooltips).
statusbarbooleanSet this to true to enable the statusbar, which shows meta informations / counter data.

Available Toolbar Buttons

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.

Header

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).

Headers (Dropdown)

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.

Bold

Action:     "bold"
Markup:     "**$1**"
Arguments:  null

Italic

Action:     "italic"
Markup:     "_$1_"
Arguments:  null

Underline

Action:     "underline"
Markup:     "<u>$1</u>"
Arguments:  null

Strikethrough

Action:     "strikethough"
Markup:     "~~$1~~"
Arguments:  null

Inline Code

Action:     "code"
Markup:     "`$1`"
Arguments:  null

Horizontal Rule

Action:     "hr"
Markup:     "----------"
Arguments:  null

Pre Clode Block

Action:     "codeblock"
Markup:     "```\n$1\n```"
Arguments:  null

Blockquote

Action:     "quote"
Markup:     ">\t$1"
Arguments:  null

List

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.

Link

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!

Image

Action:     "image:<type>"
Markup:     "![$1](url)"
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!

Table

Action:     "table:<type>"
Markup:     "![$1](url)"
Arguments:  <type:string>

Creates a Table Structure, use "dropdown" or "dialog" as type argument to create a Dropdown or Dialog box.

Indent

Action:     "indent"
Markup:     "\t$1"
Arguments:  null

Outdent

Action:     "outdent"
Markup:     null
Arguments:  null

Preview

Action:     "preview"
Markup:     null
Arguments:  null

Parses the Markdown Markup content, requires marked.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free