GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → fvilers → tiny-editor

fvilers / tiny-editor

Licence: MIT license
A tiny HTML rich text editor written in vanilla JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Labels

editorhtmlvanillawysiwygtiny

Projects that are alternatives of or similar to tiny-editor

React Plain Router
🛣 A 2kb React router that works exactly as expected with native Javascript
Stars: ✭ 119 (+105.17%)
Mutual labels:  vanilla, tiny
ElvUI
ElvUI for World of Warcraft - Vanilla (1.12.1)
Stars: ✭ 67 (+15.52%)
Mutual labels:  vanilla
typora-hivacruz-theme
A Typora theme forked from Cobalt to match my other color schemes.
Stars: ✭ 38 (-34.48%)
Mutual labels:  wysiwyg
morrowind-sharp
A Morrowind modding guide. New and experienced players welcomed.
Stars: ✭ 107 (+84.48%)
Mutual labels:  vanilla
embed
An embeddable, tiny Forth interpreter with metacompiler.
Stars: ✭ 80 (+37.93%)
Mutual labels:  tiny
preact-journal
14k offline-capable journaling PWA using preact, node, MySQL, and IndexedDB.
Stars: ✭ 33 (-43.1%)
Mutual labels:  tiny
piecewiselinear
tiny linear interpolation library for go (factored out from https://github.com/sgreben/yeetgif)
Stars: ✭ 23 (-60.34%)
Mutual labels:  tiny
blocko
A block-based WYSIWYG editor.
Stars: ✭ 43 (-25.86%)
Mutual labels:  wysiwyg
sheret
A tiny, simple static file web server.
Stars: ✭ 45 (-22.41%)
Mutual labels:  tiny
tinyfunk
The tiniest of functional libraries
Stars: ✭ 26 (-55.17%)
Mutual labels:  tiny
ctxmenu
Tiny and customizable context menu generator
Stars: ✭ 20 (-65.52%)
Mutual labels:  tiny
Tiny-Basic
A tiny and basic TINY-BASIC interpreter
Stars: ✭ 33 (-43.1%)
Mutual labels:  tiny
django-vditor
A WYSIWYG editor plugin made by vditor for django
Stars: ✭ 14 (-75.86%)
Mutual labels:  wysiwyg
elk
A low footprint JavaScript engine for embedded systems
Stars: ✭ 1,458 (+2413.79%)
Mutual labels:  tiny
codex-web-app
React frontend for Codex (status: open alpha)
Stars: ✭ 58 (+0%)
Mutual labels:  wysiwyg
pfQuest
A Questhelper and Database Addon for World of Warcraft: Vanilla & TBC
Stars: ✭ 109 (+87.93%)
Mutual labels:  vanilla
meteor-editable-text-wysiwyg-bootstrap-3
WYSIWYG extension for babrahams:editable-text package for bootstrap-3 apps
Stars: ✭ 18 (-68.97%)
Mutual labels:  wysiwyg
lazy-cache
Cache requires to be lazy-loaded when needed. Uses node's own require system with tried and true, plain-vanilla JavaScript getters.
Stars: ✭ 51 (-12.07%)
Mutual labels:  vanilla
wysihtml5-rails
A wysiwyg text editor for use in the Rails asset pipeline
Stars: ✭ 28 (-51.72%)
Mutual labels:  wysiwyg
wc-monaco-editor
A vanilla Monaco Editor web component
Stars: ✭ 93 (+60.34%)
Mutual labels:  vanilla
View All Similar Projects ➔

tiny-editor

A tiny HTML rich text editor written in vanilla JavaScript

Goal

Create a less than 5 Kb (compressed) library that enables a HTML element to be used as a rich text editor in plain old vanilla JavaScript.

Support

If you use and like this library, feel free to support my Open Source projects.

donate

How to install

npm install tiny-editor

or load the bundle file directly at the end of your HTML document.

<script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

How to use

  1. Reference the editor library in your HTML document
  2. Add a link tag in your HTML document <head> to load the Font Awesome icon set
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  1. Add a data-tiny-editor attribute to the HTML element you want to transform into an editor

How to dynamically create an editor

Use the exported function window.__tinyEditor.transformToEditor() which take as the first argument the DOM element (usually a <div>) that you want to transform to an editor. Refer to the /public/index.html for an example.

How to extract the formatted text

Listen for the input event on the editor HTML element.

document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

How to customize

There are various options that can be used to customize how the Tiny Editor will be rendered. By default, every options are enabled. You can disable an option using data attributes.

For example, you can remove the bold format button using the following attribute:

<div data-tiny-editor data-bold="no"></div>

Options

  • data-formatblock="no": remove the styles drop down list
  • data-bold="no": remove the bold button
  • data-italic="no": : remove the italic button
  • data-underline="no": remove the underline button
  • data-fontname="no": remove the font drop down list
  • data-forecolor="no": : remove the text color button
  • data-justifyleft="no": remove the left align button
  • data-justifycenter="no": remove the center align button
  • data-justifyright="no": remove the right align button
  • data-insertorderedlist="no": remove the numbered list button
  • data-insertunorderedlist="no": remove the bulleted list button
  • data-outdent="no": remove the decrease indent button
  • data-indent="no": remove the increase indent button
  • data-remove-format="no": remove the clear formatting button

Supported browsers

Modern browser (Chrome, Firefox, Edge,...) are supported. Tiny Editor doesn't work on Internet Explorer.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].