roolith-editor

A basic es6 rich text editor (typescript supported)

Live demo

http://habibhadi.com/lab/roolith-editor/

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);
});

Example usage in Angular

1. Install package

npm install @im4all/editor --save

2. Inject SASS file

@import "../node_modules/@im4all/editor/src/sass/style.scss";

3. Import in component

template file

<textarea id="editor" #editor></textarea>

component file

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { RoolithEditor } from '@im4all/editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('editor') editorElement: ElementRef;

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    const editor = new RoolithEditor(this.editorElement.nativeElement);

    editor.on('change', value => {
      console.log(value);
    });
  }
}