Advanced_texteditor NPM

Advanced Texteditor

It has basic text editing tools and speech to text feature.

Examples:

Pure js:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/advanced_texteditor/index.css" />
    <script type="text/javascript" src="https://unpkg.com/advanced_texteditor/dist/index.js"></script>
</head>
<body>
    <h1>Text Editor</h1>
    <div id="editor"></div>
</body>
<script>
    new Advanced.TextEditor("#editor", { toolbar: "bold italic underline strikeThrough superscript subscript formatBlock justifyLeft justifyCenter justifyRight justifyFull insertOrderedList insertUnorderedList insertHorizontalRule html pre indent outdent createLink unlink refresh undoRedo clear", value: "<b>hello world</b>", onChange: (e,value) => { console.log(value) } })
</script>

</html>

React Js:

Class Component

import { TextEditor } from "advanced_texteditor";
import "advanced_texteditor/index.css";

class Sample extends React.Component {
    constructor(props) {
       this.editoRef = null;
    }

    componentDidMount = () => {
       this.editoRef = new TextEditor("#editor", {
        toolbar: "bold italic underline strikeThrough superscript subscript formatBlock justifyLeft justifyCenter justifyRight justifyFull insertOrderedList insertUnorderedList insertHorizontalRule html pre indent outdent createLink unlink refresh undoRedo clear",
        value: "<b>hello world</b>",
          onChange: (e,value) => {
            console.log(value);
          },
       }),
    }

    render = () => {
       return(
        <div id="editor"/>
       )
    }
}

Functional Component

import React, { useRef, useEffect } from 'react';
import { TextEditor } from "advanced_texteditor";
import "advanced_texteditor/index.css";

const Sample = () => {
    const editoRef = useRef(null);

    useEffect(() => {
       editoRef.current = new TextEditor("#editor", {
        toolbar: "bold italic underline strikeThrough superscript subscript formatBlock justifyLeft justifyCenter justifyRight justifyFull insertOrderedList insertUnorderedList insertHorizontalRule html pre indent outdent createLink unlink refresh undoRedo clear",
        value: "<b>hello world</b>",
          onChange: (e,value) => {
            console.log(e,value);
          },
       }),
    }, []);

    return (
      <div id="editor"/>
    );
}

Custom Styles

Create index.css file, import this file and update css like below

.ate_editor [contenteditable] {
   // add here
}

.ate_editor .ate_toolbar,
.ate_editor .ate_bottom_bar {
   // add here
}

.ate_editor .ate_toolbar button,
.ate_editor .ate_bottom_bar button {
   // add here
}

.ate_editor .ate_toolbar button .tooltiptext,
.ate_editor .ate_bottom_bar button .tooltiptext {
   // add here
}

.ate_editor .ate_bottom_bar {
   // add here
}

// add here