marketingpipeline / scriptor.js

A JavaScript Library for building custom text editors with ease 📝

A JavaScript Library for building custom text editors with ease
Show your support!

Scriptor.js

This is a bare bone text editor library, meant to create your OWN text editor & customize it to your own / users needs.

It includes options for creating text editor buttons / values with ease, wrapping selected text, inserting text at last typed or clicked position & more...

Note: You WILL find bugs & lots of room for improvement! Any PR's to help fix bugs you find ARE MORE THAN appreciated. You can find also a list of things needed to be fixed inside of the to-do list

Example and usage

You can view the example's of Scriptor.js in use below!

• HTML Editor
  Source, Demo

• Markdown Editor
  Source, Demo

How to use Scriptor.js

Create a text area or another HTML element that can hold a value with the id text-editor

Add some buttons with the attribute data-scriptor-btn to add functionality to your text editor

Example:

<button data-scriptor-btn value="@" wrap="false" htmltags="false" type="button">GitHub Mention</button>
<button data-scriptor-btn value="&#x3C;img src=&#x22;text-editor-btn&#x22;&#x3E;" insert="true" type="button" htmltags="false">Insert Image Of A Dog</button>

<button data-scriptor-btn value="blockquote" htmltags="true" wrap="True" type="button">Blockquote</button>

Include this script in your HTML document & you're done, you've created a basic custom text editor!

<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Scriptor.js/dist/scriptor.min.js" defer></script>

Button Options

To wrap text with a HTML tags etc..

   <button data-scriptor-btn value="h1" wrap="True" type="button">Add a Comment</button>

To wrap text with a non-HTML tags

   <button data-scriptor-btn value="~~" wrap="True" htmltags="false" type="button">Strikethrough</button>

To call a custom function on button click

   <button data-scriptor-btn custom-function="helloWorld()" type="button">Console Log Hello World!</button>

To insert a value

Note: if text is highlighted value will be added before highlighted text selection, if NOT HIGHLIGHTED the value will be added to end of the text.

      <button data-scriptor-btn value="@" wrap="false" htmltags="false" type="button">GitHub Mention</button>

To insert a value at last typing or clicked position:

  <button data-scriptor-btn value=":yum:" insert="true"  type="button">Add a Yum Emoji!</button>

Note(s):

• Wrap options etc do not work on insert buttons.
• To insert a HTML value such as a image inside of a value attribute you must encode it

Contributing

Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

See also the list of contributors who participate in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.