nenadpnc / Cl Editor
Licence: mit
Lightweight text editor built with svelte, typescript
Stars: ✭ 148
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Cl Editor
Deckdeckgo
The web open source editor for presentations
Stars: ✭ 1,117 (+654.73%)
Mutual labels: editor, wysiwyg
Tiptap
The headless editor framework for web artisans.
Stars: ✭ 13,629 (+9108.78%)
Mutual labels: editor, wysiwyg
Wyg
A new WYSIWYG editing experience for the modern web
Stars: ✭ 73 (-50.68%)
Mutual labels: editor, wysiwyg
Megadraft
Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility
Stars: ✭ 982 (+563.51%)
Mutual labels: editor, wysiwyg
Django Tinymce4 Lite
TinyMCE 4 editor widget for Django
Stars: ✭ 121 (-18.24%)
Mutual labels: editor, wysiwyg
Rich Text Editor
Math editor (http://digabi.github.io/rich-text-editor/)
Stars: ✭ 45 (-69.59%)
Mutual labels: editor, wysiwyg
Omniawrite
A text editor engineered for creative writing.
Stars: ✭ 88 (-40.54%)
Mutual labels: editor, svelte
Awesome Medium Editor
Medium.com WYSIWYG editor clone, with RTL support.
Stars: ✭ 12 (-91.89%)
Mutual labels: editor, wysiwyg
Awesome Wysiwyg
A curated list of awesome WYSIWYG editors.
Stars: ✭ 1,801 (+1116.89%)
Mutual labels: editor, wysiwyg
Tinymce
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
Stars: ✭ 10,179 (+6777.7%)
Mutual labels: editor, wysiwyg
Phaser3 Particle Editor
A flexible editor for building phaser particles.
Stars: ✭ 131 (-11.49%)
Mutual labels: editor, wysiwyg
Canner Slate Editor
📝Rich Text / WYSIWYG Editor built for Modularity and Extensibility.
Stars: ✭ 1,071 (+623.65%)
Mutual labels: editor, wysiwyg
Quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility.
Stars: ✭ 31,554 (+21220.27%)
Mutual labels: editor, wysiwyg
Hypermd
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
Stars: ✭ 1,258 (+750%)
Mutual labels: editor, wysiwyg
Uncolored
(Un)colored — Next generation desktop rich content editor that saves documents with themes. HTML & Markdown compatible. For Windows, OS X & Linux. — http://n457.github.io/Uncolored/
Stars: ✭ 733 (+395.27%)
Mutual labels: editor, wysiwyg
Balsa
This repository holds source code of Balsa, a self hosted, privacy focused knowledgebase.
Stars: ✭ 93 (-37.16%)
Mutual labels: editor, wysiwyg
Swiftlatex
SwiftLaTeX, a WYSIWYG Browser-based LaTeX Editor
Stars: ✭ 1,664 (+1024.32%)
Mutual labels: editor, wysiwyg
Lightweight text editor
Built with svelte (no external dependencies)
File size (bundle includes css, html and js)
- min: 29kb
- gzip: 10kb
Installation
npm:
npm install --save cl-editor
HTML:
<head>
...
</head>
<body>
...
<div id="editor"></div>
...
</body>
Usage
import Editor from 'cl-editor';
// or
const Editor = require('cl-editor');
// Initialize editor
const editor = new Editor({
// <HTMLElement> required
target: document.getElementById('editor'),
// optional
props: {
// <Array[string | Object]> string if overwriting, object if customizing/creating
// available actions:
// 'viewHtml', 'undo', 'redo', 'b', 'i', 'u', 'strike', 'sup', 'sub', 'h1', 'h2', 'p', 'blockquote',
// 'ol', 'ul', 'hr', 'left', 'right', 'center', 'justify', 'a', 'image', 'forecolor', 'backcolor', 'removeFormat'
actions: [
'b', 'i', 'u', 'strike', 'ul', 'ol',
{
name: 'copy', // required
icon: '<b>C</b>', // string or html string (ex. <svg>...</svg>)
title: 'Copy',
result: () => {
// copy current selection or whole editor content
const selection = window.getSelection();
if (!selection.toString().length) {
const range = document.createRange();
range.selectNodeContents(editor.refs.editor);
selection.removeAllRanges();
selection.addRange(range);
}
editor.exec('copy');
}
},
'h1', 'h2', 'p'
],
// default 300px
height: '300px',
// initial html
html: '',
// remove format action clears formatting, but also removes some html tags.
// you can specify which tags you want to be removed.
removeFormatTags: ['h1', 'h2', 'blackquote'] // default
}
})
API
// Methods
editor.exec(cmd: string, value?: string) // execute document command (document.executeCommand(cmd, false, value))
editor.getHtml(sanitize?: boolean) // returns html string from editor. if passed true as argument, html will be sanitized before return
editor.getText() // returns text string from editor
editor.setHtml(html: string, sanitize?: boolean) // sets html for editor. if second argument is true, html will be sanitized
editor.saveRange() // saves current editor cursor position or user selection
editor.restoreRange() // restores cursor position or user selection
// saveRange and restoreRange are useful when making custom actions
// that demands that focus is shifted from editor to, for example, modal window.
- For list of available exec command visit https://codepen.io/netsi1964/pen/QbLLG
// Events
editor.$on('change', (event) => console.log(event)) // on every keyup event
editor.$on('blur', (event) => console.log(event)) // on editor blur event
// Props
editor.refs.<editor | raw | modal | colorPicker> // references to editor, raw (textarea), modal and colorPicker HTMLElements
Run demo
git clone https://github.com/nenadpnc/cl-text-editor.git cl-editor
cd cl-editor
npm i
npm run dev
This library is inspired by https://github.com/Alex-D/Trumbowyg and https://github.com/jaredreich/pell
Licence
MIT License
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].