GitHub style Markdown Editor For jQuery tail writer - Download GitHub-style Markdown Editor For jQuery - tail.writer

Download GitHub-style Markdown Editor For jQuery – tail.writer

By Posted on

This time I will share jQuery Plugin and tutorial about GitHub-style Markdown Editor For jQuery – tail.writer, hope it will help you in programming stack.

GitHub style Markdown Editor For jQuery tail writer - Download GitHub-style Markdown Editor For jQuery - tail.writer
File Size: 357 KB
Views Total: 6104
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

The tail.writer JavaScript plugin turns textarea fields into WYSIWYG markdown editors, which support GitHub Flavored Markdown, BBCode and Textile Markup.

Build for jQuery 1.8.0 and later with vanilla JavaScript. With support for live preview, line/character/word counters and more.

Intallation:

view source
1 # Yarn
2 $ yarn add tail.writer
3  
4 # NPM
5 $ npm install tail.writer --save

How to use it:

1. Include a theme CSS of your choice on your html page.

view source
1 <link rel="stylesheet" href="tail.writer.dark.css">
2 <link rel="stylesheet" href="tail.writer.github.css">
3 <link rel="stylesheet" href="tail.writer-white.css">

2. Include the main JavaScript on the page.

view source
01 <!-- Core -->
02 <script src="tail.writer.js"></script>
03  
04 <!-- tail.writer + tail.markup-bbcode script -->
05 <script src="tail.writer-bbcode.js"></script>
06  
07 <!-- tail.writer + tail.markup-markdown script -->
08 <script src="tail.writer-markdown.js"></script>
09  
10 <!-- tail.writer + tail.markup-textil script -->
11 <script src="tail.writer-textile.js"></script>
12  
13 <!-- OR -->
14 <script src="tail.writer-full.js"></script>

3. The editor currently supports 3 languages:

view source
1 <!-- All -->
2 <script src="./langs/tail.writer-all.js"></script>
3  
4 <!-- de -->
5 <script src="./langs/tail.writer-de.js"></script>
6  
7 <!-- pl -->
8 <script src="./langs/tail.writer-pl.js"></script>

4. Call the function on the textarea to generate a default markdown editor.

view source
1 <textarea></textarea>
view source
1 tail.writer("textarea");

5. All default settings to customize the markdown editor.

view source
01 tail.writer("textarea",{
02  
03   // additional class names
04   classNames: null,
05  
06   // debug mode
07   debug: true,
08  
09   // adds disabled attribute to the textarea
10   disabled: false,
11  
12   // uses a double line break
13   doubleLineBreak: false,
14  
15   // defines the parent element for the fullscreen mode
16   fullscreenParent: d.body,
17  
18   // height
19   height: [200, 500],
20  
21   // uses indent tab
22   indentTab: false,
23  
24   // tab size
25   indentSize: 4,
26  
27   // language
28   locale: "en",
29  
30   // markup name
31   markup: "markdown",
32  
33   // custom function to parse / render the written content
34   previewConverter: null,
35  
36   // prevents default key bindings
37   preventBindings: false,
38  
39   // is readonly mode?
40   readonly: false,
41  
42   // is resizable?
43   resize: true,
44  
45   // shows status bar
46   statusbar: true,
47  
48   // toolbar options
49   toolbar: "default",
50   toolbarMultiLine: false,
51   toolbar<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>able: true,
52  
53   // tooltip position
54   tooltip: "top",
55  
56   // width
57   width: "100%"
58    
59 });

Changelog:

v0.4.1 (2019-05-26)

  • Add: The new Polish Translation. 
  • Add: Support for module exporting, tested with browserify.
  • Update: The package.jsonand bower.json variables.
  • Update: Using classList to add / remove / check class names.
  • Update: Using Object.assign only to merge / clone object properties.
  • Update: Clone language strings (with the english ones, for backward compatibilities).
  • Remove: Support for Internet Explorer 9.

v0.4.0 (2019-03-16)

  • Info: This is the first version which supports different markup languages, therefore the package style has been adapted to the new environment. So tail.writer(.min).js doesn’t contain any markup button code anymore, use js/tail.writer-{markup}(.min).js or include the markup markups/tail.markup-{markup}.js in addition to the main file!
  • Add: The new tail.writer-full(.min).js file contains all languages AND all markup actions!
  • Add: The textile markup language (You can use the direct package tail.writer-textile(.min).js or the separate markup markup/tail.markup-textile.js in addition to the main file!
  • Add: The bbCode markup language (You can use the direct package tail.writer-bbcode(.min).js or the separate markup markup/tail.markup-bbcode.js in addition to the main file!
  • Add: Support as Asynchronous Module Definition, tested with requireJS (I’m new with AMD).
  • Add: A complete new markup system and interface.
  • Add: A complete new translation system and interface.
  • Add: Support for the Markdown parser showdown.
  • Add: Support for the textile parser textilejs.
  • Add: Support for the BBCode parser tail.BBSolid.
  • Add: New classNames option replaces classes and allows NULL (No custom classes), Boolean (true -> copy source textarea classes), String (space-separated classes) or Array (full with classname strings).
  • Add: New debug option allows to dis-/enable the debug messages [Unfinished, Prepared].

    • Create A Flat Barometer With jQuery And CSS/CSS3 – Barometer.js,

    ”

    source : jquery.net

    Related posts: