A JavaScript Library for building custom text editors with ease 📝

Related tags

Learning resource javascript html front-end js frontend markdown-editor wysiwyg text-editor html-editor wysiwyg-editor wysiwyg-editors wysiwyg-html-editor text-editing wysiwyg-js-editor text-editor-for-web text-editors scriptor text-editor-library scriptor-js
Overview

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.

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 insert a value

^ this needs a better definition / term.

Note: if text is highlighted value will be added before highlighted text selection, if NOT the value will be added to last typing position.

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

To insert a value at last typing or clicked position:

  <button data-scriptor-btn value=":yum: " insert="true" wrap="True" type="button">Add a Comment</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.

You might also like...

Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian Plugin - Text Expander JS (open beta) This Obsidian plugin allows the user to type text shortcuts that are replaced by (or "expanded into") j

Dec 27, 2022

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

Dec 7, 2022

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia 💊 Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Dec 29, 2022

Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with 3

Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with <3

Gutpress(WordPress Gutenburg Block Plugin) Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan w

Nov 23, 2022

Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨

solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .

Nov 27, 2022

A tool to check for response status codes with ease

A tool to check for response status codes with ease

About Archer Archer is an cross-platform tool developed using Nodejs which focuses on the reconnaissance phase of a penetration test. Got a bunch of l

Oct 19, 2022

⚖️ Limit an async function's concurrency with ease!

limit-concur Limit an async function's concurrency with ease! Install $ npm i limit-concur Usage import got from 'got' import limitConcur from 'limit-

Apr 8, 2022

To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease.

To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease.

TODO-LIST To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease. Additional description a

Jul 22, 2022

pokedev.js is a tool make to help developers get info about a pokemon and use it in any project with ease.

pokedev.js is a tool make to help developers get info about a pokemon and use it in any project with ease.

pokedev.js pokedev.js is a tool make to help developers get info about a pokemon and use it in any project with ease. Quick Links pokedev.js Quick Lin

Apr 4, 2022
Comments
  • ♻️ Syntax updates

    ♻️ Syntax updates

    • Reorganizes files to work better with NPM and cdn systems.
    • Implements esbuild build system (included rewriting license comment to prevent auto-minification)
    • Implements debug logging system (logging code is not built into final build)
    • Rewrites all the code to have a simpler flow (could still be improved in other manners)
    • Changes button identifier to [data-scriptor-btn] so as not to push for invalid html

    Still does allow some invalid html (opens wrapping closings and such) That was a new thing and this PR is just refactoring

    This PR reduces the final bundle size by 40%

    opened by ekwoka 9
Releases(v1.0.0)
Owner
Marketing Pipeline
We ❤️ Open Source
Marketing Pipeline
GitHub
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Functions and objects that make it easier to add fields to Portable Text editors for accessibility meta information, like language changes or abbreviations.

Porta11y Porta11y is a collection of accessibility-focused annotations, decorators and validators for Sanity’s Portable Text editor. Portable Text is

Hidde de Vries 21 Aug 25, 2022
The language service that powers VS Code's Markdown support, extracted so that it can be reused by other editors and tools

VS Code Markdown Language Service ❗ Note this project is actively being developed and not yet ready for production use! The language service that powe

Microsoft 369 Dec 30, 2022
CodePlay is a Web App that helps the user to input HTML,CSS and JS code in the Code editors and display the resultant web page in real-time

CodePlay A codepen clone Setup Clone repository Create and go to the directory where you want to place the repository cd my-directory Clone the proj

Aniket Kumar 5 Sep 24, 2022
This plugin allows you to stick toolbar for summernote editors.

Summernote Sticky Toolbar This is a simple plugin for Summernote that makes the toolbar sticky. preview.mp4 Installation Classic Include the plugin sc

İlyas Özkurt 6 Oct 5, 2022
A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual te

Keshav Bajaj 2 Sep 13, 2022
This experimental library patches the global custom elements registry to allow re-defining or reload a custom element.

Redefine Custom Elements This experimental library patches the global custom elements registry to allow re-defining a custom element. Based on the spe

Caridy Patiño 21 Dec 11, 2022
Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

null 5 Oct 23, 2022