Minimalist HTML/Markdown Editor – Scriptor.js

Preview:

Description:

Scriptor is a lightweight, easy-to-use text editor for the modern web. By using Scriptor.js you are building your own minimalist HTML or Markdown editor with just enough features to please the users.

It was written in JavaScript and is extremely lightweight and fully customizable allowing you to make the editor exactly the way you / your users want it.

How to use it:

1. Download and load the minified version of the Scriptor.js library in the document.

<script src="/dist/scriptor.min.js" defer></script>
2. Create a textarea for the text editor.

<textarea id="text-editor"></textarea>

3. Add buttons to the editor using the data-scriptor-btn attribute.

<button class="btn" data-scriptor-btn value="h1" wrap="True" type="button">H1</button>
<button class="btn" data-scriptor-btn value="h2" wrap="True" type="button">H2</button>
<button class="btn" data-scriptor-btn value="h3" wrap="True" type="button">H3</button>
<button class="btn" data-scriptor-btn value="b" wrap="True" type="button">Bold</button>
<button class="btn" data-scriptor-btn value="i" wrap="True" type="button">Italic</button>
<button class="btn" data-scriptor-btn value="details" wrap="True" type="button">Details</button>
<button class="btn" data-scriptor-btn value="blockquote" wrap="True" type="button">Block Quotes</button>
...

4. Markdown syntax is supported as well.

<button class="btn" data-scriptor-btn value="#" htmltags="false" wrap="false" type="button">H1</button>
<button class="btn" data-scriptor-btn value="##" wrap="false" htmltags="false" type="button">H2</button>
<button class="btn" data-scriptor-btn value="###" htmltags="false" wrap="false" type="button">H3</button>
<button class="btn" data-scriptor-btn value="**" htmltags="false" wrap="True" type="button">Bold</button>
<button class="btn" data-scriptor-btn value="i" wrap="True" type="button">Italic</button>
<button class="btn" data-scriptor-btn value="details" wrap="True" wrap="True" type="button">Details</button>
<button class="btn" data-scriptor-btn value="blockquote" wrap="True" type="button">Block Quotes</button>
<button class="btn" data-scriptor-btn value="@" wrap="false" htmltags="false" type="button">GitHub Mention</button>
<button class="btn" data-scriptor-btn value="~~" wrap="True" htmltags="false" type="button">StrikeThrough</button>
...