How can i integrate emoji in react-quill ?

Hi, i’m using the master version of react-quill but i can’t figure out how to add emoji support…

using the info provided with quill-emoji module i’ve to setup my quill in the following way

const toolbarOptions = {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['emoji'],   
                        ],
                        handlers: {'emoji': function() {}}
                        }
const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        toolbar: toolbarOptions,
        toolbar_emoji: true,
    }
});

How can i set up react-quill to achieve the same result ?

Thanks, thanks for your work

Issue Analytics

State:
Created 5 years ago
Reactions:7
Comments:7

Top GitHub Comments

14reactions

derekeeeeelycommented, Jun 12, 2019

like this:

import { Component } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import quillEmoji from 'quill-emoji';
import 'react-quill/dist/quill.snow.css';

const { EmojiBlot, ShortNameEmoji, ToolbarEmoji, TextAreaEmoji } = quillEmoji;

Quill.register({
  'formats/emoji': EmojiBlot,
  'modules/emoji-shortname': ShortNameEmoji,
  'modules/emoji-toolbar': ToolbarEmoji,
  'modules/emoji-textarea': TextAreaEmoji
}, true);

export default class MyComponent extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      text: "",
    }
  }

  modules = {
    toolbar: [
      [{ 'font': [] }, { 'header': [] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'align': [] }],
      ['emoji'],
      ['link', 'image'],
      ['clean']
    ],
    'emoji-toolbar': true,
    "emoji-textarea": true,
    "emoji-shortname": true,
  }

  formats = ['font', 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block', 'color', 'background', 'list', 'indent', 'align', 'link', 'image', 'clean', 'emoji']

  render() {
    return (
      <div className="text-editor">
        <ReactQuill
          theme="snow"
          modules={this.modules}
          formats={this.formats}
        />
      </div>
    );
  }
}

hope it works for u

11reactions

rafaelleliscommented, Oct 17, 2019

The final working solution is here: https://github.com/contentco/quill-emoji/issues/75#issuecomment-520791828

It was missing import the css:

import "quill-emoji/dist/quill-emoji.css";

Top Results From Across the Web

react-quill-emoji - npm

Start using react-quill-emoji in your project by running `npm i ... There is 1 other project in the npm registry using react-quill-emoji.

react-quill-emoji examples - CodeSandbox

Learn how to use react-quill-emoji by viewing and forking react-quill-emoji example apps on CodeSandbox.