editify
v0.0.7
Published
A pure implementation of WYSIWYG HTML editor all we needed
Downloads
17
Maintainers
saltyshiomixReadme
Editify
A pure implementation of WYSIWYG HTML editor all we needed.
Install
yarn add editifyUsage (commonjs)
<div>
<button id="toolbar-bold">BOLD</button>
</div>
<div id="editor">
<p>This line is editable!</p>
</div>import { Editify } from 'editify';
const editor = new Editify('editor');
editify.on('change', function(html, text) {
console.log('change event: new html: ', html);
console.log('change event: new text: ', text);
});
editify.on('selectionchange', function(selection) {
console.log('selectionchange event: selected text: ', selection.toString());
});Usage (umd)
<head>
<script src="./editify.js"></script>
<script>
window.onload = function() {
const editify = new Editify.Editify('editor');
editify.on('change', function(html, text) {
console.log('change event: new html: ', html);
console.log('change event: new text: ', text);
});
editify.on('selectionchange', function(selection) {
console.log('selectionchange event: selected text: ', selection.toString());
});
}
</script>
</head>
<body>
<div>
<button id="toolbar-bold">BOLD</button>
</div>
<div id="editor">
<p>This line is editable!</p>
</div>
</body>Usage (next.js)
export default function EditifyPage() {
const onChange = (html: string, text: string) => {
console.log('change event: new html: ', html);
console.log('change event: new text: ', text);
};
const onSelectionChange = (selection: Selection) => {
console.log('selectionchange event: selected text: ', selection.toString());
};
React.useEffect(() => {
// editify can be used only in client side
const { Editify } = require("editify");
const editor = new Editify("editor");
editor.on("change", onChange);
editor.on("selectionchange", onSelectionChange);
return () => {
editor.off("change", onChange);
editor.off("selectionchange", onSelectionChange);
};
}, []);
return (
<React.Fragment>
<div>
<button id="toolbar-bold">BOLD</button>
</div>
<div id="editor">
<p>This line is editable!</p>
</div>
</React.Fragment>
);
}Roadmaps
- [x] contenteditable
- [x] on
changeevent - [x] on
selectionchangeevent - [ ] toolbar (fixed)
- [x] inline: bold
- [x] toggle
- [ ] inline: italic
- [ ] toggle
- [ ] inline: color
- [ ] toggle
- [ ] inline: link
- [ ] insert
- [ ] edit
- [ ] remove
- [ ] list
- [ ] toggle
- [ ] indent: tab
- [ ] indent: shift+tab
- [ ] image
- [ ] insert
- [ ] edit
- [ ] remove
- [ ] PDF
- [ ] insert
- [ ] edit
- [ ] remove
- [ ] table
- [ ] insert
- [ ] 2 * 2 cells
- [ ] edit
- [ ] cell
- [ ] add row
- [ ] add column
- [ ] remove row
- [ ] remove column
- [ ] remove
- [ ] cmd: tab
- [ ] cmd: shift+tab
- [ ] insert
- [x] inline: bold
- [ ] toolbar (hovered)
- [ ] undo / redo
- [ ] CSS
- [ ] default theme
- [ ] custom theme
- [ ] plugins