This is a simple WYSIWYG editor for any front-end js framework like react.js. In case of simple HTML or PHP base project one can use the AricEditor.min.js and enjoy editing content.
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/aric-editor@2.1.8/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'| 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 |
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>
)
}
}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>
Arijit Deb Roy |