aric-editor
v2.2.0
Published
A minimal text editor for all front-end frameworks.
Readme
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-editorhttps://unpkg.com/[email protected]/dist/AricEditor.min.jsYou 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/[email protected]/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>