GitHub-style Markdown Editor in Javascript – tail.writer

The tail.writer script is a neat, powerful, highly extend- and translatable Markup Editor, written in Vanilla JavaScript. The tail.writer JavaScript plugin turns textarea fields into WYSIWYG markdown editors, which support GitHub Flavored Markdown, BBCode and Textile Markup. The tail.writer script is not a WYSIWYG (What you see is what you get) editor, it’s a Markup editor. The difference is the presentation of the written text: A WYSIWYG editor shows a bold text directly as bold text, while a Markup editor shows only the Markup syntax: **bold text**.

Features

• Three beautiful designs and many actions and buttons.
• WriteFlow supportive features & functions.
• Support for Markdown (Marked, Showdown), Textile (textile.js) and BBCodes (tail.BBSolid).
• Extensive Markup API to use custom Markup languages and actions.
• Hooks, Event Listeners & Key-Bindings for your own code.
• Completely Translatable and already available in multiple languages.
• Many Settings to adapt and configure the design and behaviour.
• Supports AMD (requireJS) and available as browserify module.
• Compatible with all modern browsers (including IE 10+)
• No Dependencies, just embed and use (except the Preview action)
• Free/To/Use – MIT Licensed

Libraries

Include the following libraries on page.

--CSS-->
<link rel="stylesheet" href="tail.writer.dark.css">
<link rel="stylesheet" href="tail.writer.github.css">
<link rel="stylesheet" href="tail.writer-white.css">
 
--JS-->
-- Core -->
>
-- tail.writer + tail.markup-bbcode script -->
>
-- tail.writer + tail.markup-markdown script -->
>
-- tail.writer + tail.markup-textil script -->
>
-- OR -->
>

Here is the sample code for adding GitHub-style Markdown Editor on page.

>
>
    >
        ="utf-8" />
 
        <link type="text/css" rel="stylesheet" href="css/tail.writer-white.min.css" />
    >
    >
        >
        -- > -->
 
        >>
 
        >
    >
>

tail.writer("textarea", {
    classNames: null,               
    debug: false,                   
    disabled: false,                
    doubleLineBreak: false,        
    fullscreenParent: d.body,       
    height: [200, 500],
    indentTab: false,
    indentSize: 4,
    locale: "en",                   
    markup: null,                   
    preventBindings: false          
    previewConverter: null,         
    readonly: false,               
    resize: true,
    statusbar: true,
    toolbar: [],
    toolbarMultiLine: true,         
    toolbarScrollable: true,        
    tooltip: "top",
    width: "100%"
});

See live demo and download source code.

This awesome script developed by pytesNET, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Related