Skip to content

A JavaScript Library for building custom text editors with ease ๐Ÿ“

License

Notifications You must be signed in to change notification settings

MarketingPipeline/Scriptor.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

65 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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!


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 GitHub

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 GitHub

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