VladPolskiy/wc-wysiwyg
1
0
Fork 0
mirror of https://github.com/webislife/wc-wysiwyg.git synced 2025-07-21 05:47:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update readme.md

Browse Source
This commit is contained in:
Денис Строков
2023-02-13 00:24:54 +03:00
parent a59904adfe
commit 26d1bc72ea
1 changed files with 65 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
README.md
View File

@ -1,5 +1,6 @@
# wc-time # wc-wysiwyg custom element
WYWSIWYG HTML5 Editor written in TypeScript and designed by web-componennt, support all JS frameworks and browsers.
WC-WSIWYG HTML5 Editor written in TypeScript and designed by web-componennt, support all JS frameworks and browsers.
See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list and demo of all editor features See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list and demo of all editor features
@ -9,28 +10,76 @@ See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list an
npm i wc-wysiwyg-editor --save npm i wc-wysiwyg-editor --save
``` ```
## Features
✅ Multilingual support via [HTMLElement.lang](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang) attribute 🇷🇺/🇺🇸 supported by default
✅ 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
✅ Size Clear 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
## Commands ## Commands
Available package 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 sass' - build scss styles npm run build
`npm run tsc' - run typescript
`npm run babel-minify' - minify code after typescript
`npm run build' - build all stpes 1.sass 2.tsc 3.babel-minify
``` ```
## Custom element demo ## Integration WC-WYSIWYG element demo
<!-- <!--
``` ```
<custom-element-demo> <wc-wysiwyg value="foo">
<template> <textarea></textarea>
<link rel="import" href="index.html"> </wc-wysiwyg>
<next-code-block></next-code-block>
</template>
</custom-element-demo>
``` ```
--> -->
First, include JS and define custom element
```javascript
import('/src/components/wc-wysiwyg.js').then(esm => {
esm.define();
});
```
And use in HTML
```html ```html
<wc-wysiwyg id="wc-demo-comment" <wc-wysiwyg id="wc-demo-comment"
data-allow-tags="strong,u,i,b,q,blockquote,a,img,pre" data-allow-tags="strong,u,i,b,q,blockquote,a,img,pre"
@ -44,8 +93,9 @@ Available package commands
</wc-wysiwyg> </wc-wysiwyg>
``` ```
See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list and demo of all editor features See full demo - [wc-wysiwyg demo](https://webislife.ru/demo/wc-wysiwyg/) list and demo of all editor features
Dont forgot star on git! Thank you! Enojoy! Dont forgot star on git! Thank you! Enojoy!
Dev by strokoff.ru - make web, not war) Dev by strokoff - make web, not war)