vue2-editor: Error while adding Quill Emojis to editor

I tried to add Quill Emojis to editor but I am getting console error as Uncaught ReferenceError: Quill is not defined This is I have tried so far:

<template>
    <div id="app">
        <vue-editor v-model="content"></vue-editor>
    </div>
</template>

<script>
    import { VueEditor, Quill } from 'vue2-editor';
    import Emoji from 'quill-emoji/dist/quill-emoji';
    Quill.register('modules/quill-emoji', Emoji);


    export default {
        name: 'vue2editor',
        components: { VueEditor },
        data() {
            return {
                content: "<h1>Some initial content</h1>",
                editorSettings: {
                    modules: {
                        toolbar: {
                            container: [
                                [{'size': ['small', false, 'large']}],
                                ['bold', 'italic', 'underline', 'strike'],
                                ['blockquote', 'code-block'],
                                [{ 'header': 1 }, { 'header': 2 }],
                                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                                [{ 'script': 'sub' }, { 'script': 'super' }],
                                [{ 'indent': '-1' }, { 'indent': '+1' }],
                                [{ 'direction': 'rtl' }],
                                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                                [{ 'color': [] }, { 'background': [] }],
                                [{ 'font': [] }],
                                [{ 'align': [] }],
                                ['clean'],
                                ['link', 'image', 'video'],
                                ['emoji'],
                            ],
                            handlers: {
                                'emoji': function () {}
                            },
                        },
                        toolbar_emoji: true,
                        short_name_emoji: true,
                        textarea_emoji:true,
                    },
                },
                text: null,
            };
        },
    };
</script>

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 15 (2 by maintainers)

Most upvoted comments

Kind of work this way:

<template>
  <VueEditor v-model="html" :editorOptions="editorOptions" />
</template>

<script>
import { VueEditor, Quill } from "vue2-editor";
import Emoji from "quill-emoji";
import "quill-emoji/dist/quill-emoji.css";

Quill.register(
  {
    "formats/emoji": Emoji.EmojiBlot,
    "modules/short_name_emoji": Emoji.ShortNameEmoji,
    "modules/toolbar_emoji": Emoji.ToolbarEmoji,
    "modules/textarea_emoji": Emoji.TextAreaEmoji
  },
  true
);

const editorOptions = {
  modules: {
    toolbar: {
      container: [
        [{ size: ["small", false, "large"] }],
        ["bold", "italic", "underline", "strike"],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ direction: "rtl" }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],
        ["clean"],
        ["link", "image", "video"],
        ["emoji"]
      ],
      handlers: {
        emoji: function() {}
      }
    },
    short_name_emoji: true,
    toolbar_emoji: true,
    textarea_emoji: true
  }
};

export default {
  components: { VueEditor },
  data: () => ({ html: "" }),
  computed: { editorOptions: () => editorOptions }
};
</script>

Not a perfect solution however:

As you can see, there is an “extra” emoji button inserted in the editor (don’t know why). Also, the shortcut : to add an emoji directly doesn’t work (issues are already open in the quill emojis module project about that).

M1CK431 on Dec 16, 2019

@M1CK431 thank you for your help the emoji in the textarea you can hide it with

.textarea-emoji-control { display: none; }

hamzajb on Jul 5, 2021

just in case someone bumps into this in the future… the emoji in the textarea is showing because of this line of code located in …

Quill.register(
  {
    "formats/emoji": Emoji.EmojiBlot,
    "modules/short_name_emoji": Emoji.ShortNameEmoji,
    "modules/toolbar_emoji": Emoji.ToolbarEmoji,
    "modules/textarea_emoji": Emoji.TextAreaEmoji
  },
  true
);

"modules/textarea_emoji": Emoji.TextAreaEmoji

shoutershub on Oct 21, 2020

@tuannguyenminh2086 need register

Quill.register({
'formats/emoji': Emoji.EmojiBlot,
'modules/short_name_emoji': Emoji.ShortNameEmoji,
'modules/toolbar_emoji': Emoji.ToolbarEmoji,
'modules/textarea_emoji': Emoji.TextAreaEmoji}, true);

KM612 on Apr 3, 2019

 new webpack.ProvidePlugin({
          'window.Quill': 'quill/dist/quill.js',
          'Quill': 'quill/dist/quill.js'
        }),

It work when add config quill in webpack

HowardRoarkGeek on Feb 11, 2019

I think the proper way to disable it would be to set textarea-emoji to false in your options: textarea_emoji: false

klasjersevi on Jul 6, 2021