WC-WSIWYG HTML5 Editor written in TypeScript and designed by web-componennt, support all JS frameworks and browsers. See full demo - wc-wysiwyg demo list and demo of all editor features

Features

✅ Multilingual support via HTMLElement.lang attribute 🇷🇺/🇺🇸 supported by default

✅ 🌐 Support all major browsers

✅ 🚀 Reusable between all major JS frameworks

✅ CSS styles for all popular HTML5 tags

✅ CSS support for 🔥 in bulleted lists

✅ Support for style inheritance via CSS class in the data-content-class attribute of emoji in bulleted lists

✅ Inline actions on selected text

✅ Storing value in window.localStorage and restoring after reload, check in comment form below

✅ Eetting editable properties of any tags, the number of tags and attributes are configurable

✅ Autocomplete as you type / for supported tags in new paragraph

✅ Text\HTML5 view switcher

✅ Clear format tag button Ⱦ

✅ Live preview

✅ Keyboard Shortcuts
- ALT+SPACE toggle the current caret pointer outside the tag
- ESCAPE close bottom editor dialog box

✅ Validation required, minlength, maxlength, filtertags

✅ Inserting <audio> element

✅ Inserting <video> element

✅ Suppoer extensions
- Color text and background editor
- Emoji table

Install

npm i wc-wysiwyg-editor --save

Commands

Available package commands

Build scss styles

npm run sass

Compile TypeScript

npm run tsc

Minify code with babel-minify after TypeScript compile

npm run babel-minify

build all stpes 1.sass 2.tsc 3.babel-minif

npm run build

Integration WC-WYSIWYG element demo

First need integrate wc-wysiwyg styles, you have 2 way, vanila css in dist/sass or scss in src/sass just include in your web project

Second, include JS and define custom element

import('/src/components/wc-wysiwyg.js').then(esm => {
    //you can pass any name into define fn
    esm.define();
});

And use in HTML

<wc-wysiwyg id="wc-demo-comment"
    data-allow-tags="strong,u,i,b,q,blockquote,a,img,pre"
    data-storage="demo-comment"
    data-hide-bottom-actions="1"
    is="wc-wysiwyg"
    required
    minlength="5"
    maxlength="500">
    <textarea>your comment</textarea>
</wc-wysiwyg>

See full demo - wc-wysiwyg demo list and demo of all editor features

Dont forgot star on git! Thank you! Enojoy!

Dev by strokoff - make web, not war)