js-editor-frameworks – Developer stories

Create Quill RichText editor using react-quill

How to use React Quill toolkit in React

Quilljs is a Javascript editor for enriching the web applications. The toolkit was used by companies like, LinkedIn, Slab etc.

How to use Quill in React

For React we can use community libraries such as react-quill. Let’s setup a React project and install the dependencies.

npx create-react-app myapp
yarn add react-quill quill

We can use the the <ReactQuill/> component render the editor as follows.


import ReactQuill from "react-quill";
import React, { Component } from "react";
import "react-quill/dist/quill.snow.css";

function MyComponent() {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <ReactQuill theme="snow" value={value} onChange={setValue} />
    </div>
  );
}

The styling (CSS) may not work properly, for that import the CSS class provided by Quill.

 import "quill/dist/quill.snow.css";

A live version of the project can be found at sandbox , in case required.

Links

React-Quills

How to get HTML from Remirror editor in Reactjs

How to get HTML from proseMirror editor using Remirror in Reactjs

We have learned how to setup basic proseMirror editor in React using remirror toolkit. How to access the state as HTML ?

Remirror allow us to use a onChangeHTML component and then we have to define handler for accessing a state.

First import the component remirror react.

import { OnChangeHTML } from "@remirror/react";

Secondly include the component in Remirror editor as follows

const RichTextEditor = () => {
  return (
    <div>
      <WysiwygEditor placeholder="I am a text">
        <OnChangeHTML onChange={handleChange} />
      </WysiwygEditor>
    </div>
  );
};

Let’s define the handleChange and access the state. For simplicity we output the HTML to console.

const handleChange = (data) => {
  console.log(JSON.stringify(data));
};

That’s all , 😊.

Open the code in Sandbox

How to get state as JSON from Remirror editor in Reactjs

How to get JSON from proseMirror editor using Remirror in Reactjs

We have learned how to setup basic proseMirror editor in React using remirror toolkit. What about accessing the state / JSON ?.

Remirror allow us to use a onChange component and then we have define handler for accessing a state.

First import the component remirror react.

import { OnChangeJSON } from "@remirror/react";

Secondly include the component in Remirror editor as follows

const RichTextEditor = () => {
  return (
    <div>
      <WysiwygEditor placeholder="I am a text">
        <OnChangeJSON onChange={handleChange} />
      </WysiwygEditor>
    </div>
  );
};

Let’s define the handleChange and access the state. For simplicity we output the JSON to console.

const handleChange = (json) => {
  console.log(JSON.stringify(json));
};

That’s all , 😊.

Open the code in Sandbox

Create a TinyMCE Rich Text Editor in React

How to create Editor in React using TinyMCE library

So far we have seen many Editor Frameworks and their usage guides.

May be the simplest of all Editor libraries for React is TinyMCE.

Let’s quickly setup a React project and install the Tiny dependencies.

npx create-react-app myapp
yarn add @tinymce/tinymce-react

Make sure all the dependencies and peer dependencies properly added. Using the Editor component we can setup the editor, similar to draft-js.

import { Editor } from "@tinymce/tinymce-react";

const TinyMceEditor = () => {
  return (
    <Editor
      initialValue="<p>This is the initial content of the editor.</p>"
      init={{
        height: 500,
        menubar: false,
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste code help wordcount"
        ],
        toolbar:
          "undo redo | formatselect | " +
          "bold italic backcolor | alignleft aligncenter " +
          "alignright alignjustify | bullist numlist outdent indent | " +
          "removeformat | help",
        content_style:
          "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
      }}
    />
  );
};

export default TinyMceEditor;

The configuration was quick, and it is easier to use.

Open the example in Sandbox.

Create a Slate Rich Text Editor in React

How to create Editor in React using Slatejs

So far we have seen many Editor Frameworks and their usage guides. Slatejs is a good alternative for Draft-js and it is in beta mode for a long time.

Let’s quickly setup a React project and install the slate dependencies.

npx create-react-app myapp
yarn add slate slate-react

Make sure all the dependencies and peer dependencies properly added.

import React, { useMemo, useState } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";

const SlateEditor = () => {
  const editor = useMemo(() => withReact(createEditor()), []);
  const initialValue = [
    {
      type: "paragraph",
      children: [{ text: "A line of text in a paragraph." }]
    }
  ];
  const [value, setValue] = useState(initialValue);

  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable />
    </Slate>
  );
};

export default SlateEditor;

Open the example in Sandbox.

Create a Material-UI Rich Text Editor in React

How to create Material UI Editor in React

So far we have seen many Editor Frameworks and their usage guides. As a React fan you may miss the MUI library. The mui-rte is Material UI RichText editor and viewer.

The editor was built on top of draft-js and supports use defined blocks, styles, autocomplete strategies, async/sync custom atomic blocks, callbacks, and decorators as well as toolbar and theme customization to enhance the editor to all needs.

Let’s quickly setup a React project and install the dependencies.

npx create-react-app myapp
yarn add mui-rte @mui/material @mui/icons-material @mui/styles @emotion/react @emotion/styled

Make sure all the dependencies and peer dependencies properly added.

import { createTheme, ThemeProvider } from "@mui/material/styles";
import MUIRichTextEditor from "mui-rte";

const MuiEditor = () => {
  const save = (data) => {
    console.log(data);
  };
  const myTheme = createTheme({
    // Set up your custom MUI theme here
  });

  return (
    <div className="editorContainer">
      <ThemeProvider theme={myTheme}>
        <MUIRichTextEditor
          label="Type something here..."
          onSave={save}
          inlineToolbar={true}
        />
      </ThemeProvider>
    </div>
  );
};

export default MuiEditor;

Open the example in Sandbox.

Create a RichText editor using Quilljs

How to use Quill toolkit in React

Quilljs is a Javascript editor for enriching the web applications. The toolkit was used by companies like, LinkedIn, Slab etc.

How to use Quill in React

For React we can use community libraries such as react-quilljs. Let’s setup a React project and install the dependencies.

npx create-react-app myapp
yarn add react-quilljs quill

We can use the the useQuill hook implement the toolkit as follows.

import React from 'react';
import { useQuill } from "react-quilljs";
  
 

export default function Editor() {
    const { quill, quillRef } = useQuill();
  return (
    <div style={{ width: 1000, height: 300 }}>
      <div ref={quillRef} />
     
    </div>
  )
}

The styling (CSS) may not work properly, for that import the CSS class provided by Quill.

 import "quill/dist/quill.snow.css";

A live version of the project can be found at sandbox , in case required.

Links

React-Quills

Create minimal editor with Tiptap in React

How to create a minimal editor in React using Tiptap

Tiptap is a modern Editor framework for Javascript applications. It is popular because come with bunch pro features, extension, flexibility and its well documented for all frameworks such as Nextjs, Vuejs, React etc.

There are 50 more extensions ready to boost editor experience.

Let’s setup our react project with Tiptap dependencies.

npx create-react-app tiptapeditor 
npm install @tiptap/core @tiptap/starter-kit @tiptap/react

We can use hooks to create our Tiptap component in React.

import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import './styles.css'

export default function Minimal   ()   {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
    ],
    content: `
      <p>
        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
      </p>
      <p>
        The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
      </p>
    `,
  })

  return (
    <EditorContent editor={editor} />
  )
}

A live example can be found @ Sandbox

Links

Tiptap Repo on Github

Create a Social Editor using Remirror toolkit in React

Hot to create social editor with hashtag and mentions using Remirror toolkit in React

ProseMirror is a toolkit for developing or building rich-text editors for the web. Remirror is ProseMirror React tool kit, which simplify the configuration and usage.

It also minimize the initial setup required to use Prosemirror toolkit and supports all features and extensions.

Social Editor

A social editor support hash tagging and mentioning which was commonly found on CMS and social media. With Remirror it is simple to implement these feature.

Project Setup

Let’s build a React project with create-react-app command.

npx create-react-app mkdeditor

Add the remirror dependecies

yarn add @remirror/react-editors @remirror/react

Let’s hash tag objects and mentions which will be passed to our social component.

const USERS = [
    { id: "joe", label: "Joe" },
    { id: "john", label: "John" }
  ];
  const TAGS = ["remirror", "editor"];

Create a functional component for our app

import { SocialEditor } from "@remirror/react-editors/social";
const RemirrorEditor = () => {
  const USERS = [
    { id: "joe", label: "Joe" },
    { id: "john", label: "John" }
  ];
  const TAGS = ["remirror", "editor"];

  return (
    <div style={{ padding: 16 }}>
      <SocialEditor users={USERS} tags={TAGS} />
    </div>
  );
};

That’s all you need to know. We need not implement the CSS styles for the editor, everything is ready to use.

See Live example on Sandbox

Links

Remirror Repo on GitHub

Create a RichText Editor using Remirror toolkit in React

Hot to create a simple RichText editor using Remirror toolkit in React

ProseMirror is a toolkit for developing or building rich-text editors for the web. Remirror is ProseMirror React tool kit, which simplify the configuration and usage.

It also minimize the initial setup required to use Prosemirror toolkit and supports all features and extensions.

Let’s build a Ritch Text Editor with Remirror <WysiwygEditor /> component. It is a ready to use component.

Project Setup

Let’s build a React project with create-react-app command.

npx create-react-app mkdeditor

Add the remirror dependecies

yarn add @remirror/react-editors @remirror/react

Let’s import WysiwygEditor t components and create our RichTextEditor component.

import { WysiwygEditor } from "@remirror/react-editors/wysiwyg";

const RichTextEditor = () => {
  return (
    <div>
      <WysiwygEditor />
    </div>
  );
};

We need not implement the CSS styles for the editor, everything is ready to use.

See Live example on Sandbox

Links

Remirror Repo on GitHub

How to use Quill in React

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

How to use Quill in React

Share this:

Links

Share this:

Social Editor

Project Setup

Share this:

Project Setup

Share this: