Aric-editor NPM

Paste content from anywhere and edit them with this simple editor whithout and tension of copying third party font and stylings.

npm install --save aric-editor

https://unpkg.com/aric-editor@2.1.8/dist/AricEditor.min.js

You can import bundled css to your Custom (pages_app.jsx in casse of Next.js) or if you want to use your own style then you can override classes.

import 'aric-editor/dist/AricEditor.css'

Classes

Class	Target
`aric-editor`	Rich content writing container
`aric-editor-source`	Trinspiled code container
`editor-btn-group`	Tool bar container
`editor-btn`	Each tool button
`editor-btn-click`	Active class on button click
`highlight-backend`	Highlighter color. Default `Yellow`

Examples

Using react.js

editor.js

import React from 'react';
import { AricEditor } from 'aric-editor';

class EditorComponent extends React.Component {
    constructor(props) {
            super(props);
            this.state = {
               editor: {},
               content: ''
            }
    }
       
    componentDidMount(){
        // Editor init
        this.state.editor = new AricEditor('editor');
            
        // Set data into editor
        this.state.editor.setEditorInstance('<b>Editor initialized with demo text.</b>');
    }
    
    getter = () => {
        // Get editor content
        this.state.content = this.state.editor.getEditorInstance();
    }
    
    destroy = () => {
        // Destroy editor content
        this.state.editor.destroyInstance();
    }
    
    render() {
        return (
            <table>
              <tbody>
                <tr>
                  <td align="center">
                    <div id="editor"></div>
                    <button onclick={this.getter.bind(this)} style={{marginRight: '10px'}}>GET</button>
                    <button onclick={this.destroy.bind(this)}>DESTROY</button>
                  </td>
                </tr>
              </tbody>
            </table>
        )
    }    
}

Using HTML

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://unpkg.com/aric-editor@2.1.8/dist/AricEditor.min.js"></script>
    </head>
    <body>
        <div id="editor"></div>
    </body>
    <script>
        var e1 = new ui.AricEditor('editor');
        e1.getEditorInstance();
        e1.setEditorInstance('Sample Text!!!');
    </script>
</html>