1.0.2 • Published 3 years ago
@im4all/editor v1.0.2
roolith-editor
A basic es6 rich text editor (typescript supported)
Usage
<textarea id="editor"></textarea>
import { RoolithEditor } from '@im4all/editor';
new RoolithEditor(document.getElementById('editor'));
Installation
npm install @im4all/editor --save
Add style.scss
to project and import RoolithEditor from package. Check out demo folder for more details or you can use compiled version for non es6 project. To do that clone the repo and run npm run build
and it will generate dist folder with minified css and js file.
watch for changes
const editor = new RoolithEditor(document.getElementById('editor'));
editor.on('change', value => {
console.log(value);
});
Customize toolbar
const editor = new RoolithEditor(document.getElementById('editor'), {
toolbar: [
'bold', 'italic', 'underline', 'insertUnorderedList', 'insertOrderedList', 'removeFormat', '-',
'indent', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', '-',
'headings', 'createLink', 'subscript', 'superscript', 'formatBlock:blockquote', 'formatBlock:pre', '-',
'image', 'video', 'videoUrl'
],
linkType: '_blank',
width: '100%',
height: '50vh'
});
editor.on('change', value => {
console.log(value);
});
Custom toolbar
const editor = new RoolithEditor(document.getElementById('editor'), {
registerCustomToolbar: [
{
name: 'custom',
icon: `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
`,
clickHandler: (event, button) => {
editor.openModal('Test', `
<form class="roolith__editor__modal__form" data-command="custom">
<div class="roolith__editor__modal__form__item">
<textarea type="text" rows="5" name="something" class="roolith__editor__modal__form__item__field"></textarea>
</div>
</form>
`, value => {
if (value.command === 'custom') {
console.log(value);
editor.insertContent(value.something);
}
});
}
}
],
toolbar: [
'bold', 'italic', 'underline', 'insertUnorderedList', 'insertOrderedList', 'removeFormat', '-',
'indent', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', '-',
'headings', 'createLink', 'subscript', 'superscript', 'formatBlock:blockquote', 'formatBlock:pre', '-',
'image', 'video', 'videoUrl', 'custom',
],
linkType: '_blank',
width: '100%',
height: '50vh'
});
editor.on('change', value => {
console.log(value);
});