GitHub-style Markdown Editor in Javascript – tail.writer

by Posted on

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**.
github-markdown

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 -->
<script src="tail.writer.js"></script>
<!-- tail.writer + tail.markup-bbcode script -->
<script src="tail.writer-bbcode.js"></script>
<!-- tail.writer + tail.markup-markdown script -->
<script src="tail.writer-markdown.js"></script>
<!-- tail.writer + tail.markup-textil script -->
<script src="tail.writer-textile.js"></script>
<!-- OR -->
<script src="tail.writer-full.js"></script>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
 
        <link type="text/css" rel="stylesheet" href="css/tail.writer-white.min.css" />
    </head>
    <body>
        <script type="text/javascript" src="js/tail.writer-{markup}.min.js"></script>
        <!-- <script type="text/javascript" src="langs/tail.writer-{lang}.js"></script> -->
 
        <textarea></textarea>
 
        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                tail.writer("textarea", { /* Your Options */ });
            });
        </script>
    </body>
</html>



Following are the list of options you can use to customize the addon.

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.

DEMO | DOWNLOAD

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.

Published by admin