Textile Editor For Textarea - jQuery textileToolbar

Textile Editor For Textarea - jQuery textileToolbar

This is a textile toolbar jQuery plugin which adds a Textile Markup Language Editor with custom editor buttons to your textarea.

Supported editor buttons:

  • Spacer
  • Strong
  • Italic
  • Underline
  • Deleted
  • Code
  • H1
  • H2
  • H3
  • UL
  • OL
  • Pre
  • Img
  • Link
  • URL

How to use it:

1. Import the stylesheet textileToolbar.css in the head, and the JavaScript textileToolbar.js after jQuery library.

<link rel="stylesheet" href="textileToolbar.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.textileToolbar.js"></script>

2. Call the function on the textarea element and done.

<textarea id="textile-demo"></textarea>
$("#textile-demo").textileToolbar();

3. Specify the buttons to display in the textile toolbar.

$("#textile-demo").textileToolbar({
  toolbar: ["strong","italic","underline","spacer","ul","ol"]
});

4. Destroy and remove the textile toolbar.

$("#textile-demo").textileToolbar("destroy");

This awesome jQuery plugin is developed by mauntrelio. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.04.2018
  • Source