quill Cannot import modules/emoji-toolbar. Are you sure it was registered?

[michaelbukachi]

I'm getting the following errors with the latest version 0.1.4:

Here's my code:

<template>
    <div>
        <el-row>
            <el-col :span="12" :offset="6">
                <el-input v-model="title" placeholder="Title"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" :offset="6">
                <quill-editor v-model="content"
                              ref="myQuillEditor"
                              :options="editorOption"
                              @blur="onEditorBlur($event)"
                              @focus="onEditorFocus($event)"
                              @ready="onEditorReady($event)">
                </quill-editor>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" :offset="6">
                <p class="text-right"> {{ messageLength }} / 2000 </p>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {Col, Input, Row} from 'element-ui'

    import {quillEditor} from 'vue-quill-editor'

    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    let toolbarOptions = {
        container: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],
            [{'header': 1}, {'header': 2}],               // custom button values
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
            [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
            [{'direction': 'rtl'}],                         // text direction
            [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
            [{'header': [1, 2, 3, 4, 5, 6, false]}],
            [{'color': []}, {'background': []}],          // dropdown with defaults from theme
            [{'font': []}],
            [{'align': []}],
            ['clean'],
            ['emoji']
        ],
        handlers: {'emoji': function () {}}
    }

    export default {
        name: "Editor",
        components: {
            [Col.name]: Col,
            [Input.name]: Input,
            [Row.name]: Row,
            quillEditor
        },
        data() {
            return {
                content: '',
                title: '',
                editorOption: {
                    modules: {
                        'toolbar': toolbarOptions,
                        'emoji-toolbar': true,
                        'emoji-textarea': true,
                        'emoji-shortname': true
                    }
                },
                messageLength: 0,
                maxLength: 2000
            }
        },
        watch: {
            content: function (val) {
                this.messageLength = val.length
                // this.editor.enable(this.messageLength >= this.maxLength)
            }
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill
            }
        },
        methods: {
            onEditorBlur(quill) {
                this.$log.info('editor blur!', quill)
            },
            onEditorFocus(quill) {
                this.$log.info('editor focus!', quill)
            },
            onEditorReady(quill) {
                this.$log.info('editor ready!', quill)
            },
            onEditorChange({quill, html, text}) {
                this.$log.info('editor change!', quill, html, text)
                this.content = html
            }
        }
    }
</script>

<style scoped>

</style>

[Elazul]

I've got the exact same issue using vue2-editor. I presume this is because Quill is not defined globally in the module. Maybe should we fix Quill import in quill-emoji.js using

import _Quill from 'quill'
const Quill = window.Quill || _Quill

instead?

[michaelbukachi]

Hmm. That might work. Let me try it.

[tuannguyenminh2086]

still not work!!!

[michaelbukachi]

Same here. I even tried modifying the library. Got a bunchof errors.

[tuannguyenminh2086]

Hi all, I using another way. It working now.

• If you're trying to use this lib with vue-2-editor. it will not work. I took a day to configure.
• So my solution is: just only this lib and remove vue2-editor. It's working like a charm.

` import Quill from 'quill' import quillEmij from 'quill-emoji/dist/quill-emoji'

const toolbarOptions = { container: [ ['bold', 'italic', 'underline'], ['emoji'] ], handlers: { emoji() {

  },
},

} export default { name:'editor', components: {

},
props: ['content'],
data() {
  return {
    content: ''
  }
},
methods: {
  onCancel (){},
  onSubmit () {},
  setupEditor (){
    let container = document.getElementById('macaw__editor');
    let editor = new Quill(container, {
      modules: {
        "toolbar": toolbarOptions,
        "emoji-toolbar": true
      },
      placeholder: '',
      theme: 'snow'
    });
  }
},
mounted() {
  // setup 
  this.setupEditor()
}

}`

I hope it helps.

[michaelbukachi]

Interesting. Let me try that.

[fohancer]

same here. Has anyone solved the problem?

[tuannguyenminh2086]

same here. Has anyone solved the problem?

Did you see my solution?

[michaelbukachi]

I tried it. Things broke. The web app I'm working on is highly dependent on Vue.

[tuannguyenminh2086]

I tried it. Things broke. The web app I'm working on is highly dependent on Vue.

I did it. and it work fine. Could you show your code? And I can help

[michaelbukachi]

https://github.com/dita-dev-team/my-portal-messages-v2/blob/master/src/components/Editor.vue

[tuannguyenminh2086]

I told in previous post. Do not use vue-quill-editor. It doesn't work and I have my example following also.

[michaelbukachi]

Do you mind sharing a snippet of using Vue with quill without any third party library?

[tuannguyenminh2086]

https://github.com/contentco/quill-emoji/issues/51#issuecomment-449712887

[michaelbukachi]

Out of curiosity, has anyone faced any issue integrating any other module besides this one with vue-quill-editor or vue-2-editor?

[ploca14]

Is there really no way to make it work with vue-quill-editor?

[michaelbukachi]

@ploca14 I still haven't found one. Had to drop looking into the issue due some workload. I'll get back to it as soon as I'm free.

[thatericsmith]

I found that I had to manually register the emoji modules to get it to work - so in my Vue component:

  import Quill from 'quill'
  import QuillEmoji from 'quill-emoji'
  import { quillEditor } from 'vue-quill-editor'

  Quill.register('modules/emoji-shortname', QuillEmoji.ShortNameEmoji)

then in the config:

modules: {
            "emoji-shortname": true,
             ...

And it is working great!

[michaelbukachi]

@thatericsmith which vue quill editor are you using?

[thatericsmith]

@michaelbukachi 3.0.6

[michaelbukachi]

@thatericsmith Do you mind providing your package.json setup? I can't still get it to work with your provided config.

[finebo]

I wrote it according to your format. Can you help me? @thatericsmith

[finebo]

Did you solve the problem of emoji @michaelbukachi

[michaelbukachi]

@finebo No I wasn't able to get it work.

[finebo]

OK，maybe i will give up

---Original--- From: "Michael Bukachi"<notifications@github.com> Date: Thu, Mar 26, 2020 21:30 PM To: "contentco/quill-emoji"<quill-emoji@noreply.github.com>; Cc: "Mention"<mention@noreply.github.com>;"fine"<670785257@qq.com>; Subject: Re: [contentco/quill-emoji] quill Cannot import modules/emoji-toolbar. Are you sure it was registered? (#51)

@finebo No I wasn't able to get it work.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[abner-carvalho]

This worked for me (using vue2-editor)

Template:

` <vue-editor v-model="comment_content" :editorOptions="editorSettings"

`

Script:

import { VueEditor, Quill } from "vue2-editor";
import QuillEmoji from "quill-emoji";
import "quill-emoji/dist/quill-emoji.css";

Quill.register("modules/emoji", QuillEmoji);

export default {
  components: { VueEditor },
  data: () => ({
    comment_content: null,
    editorSettings: {
      modules: {
        toolbar: {
          container: [["bold", "italic", "underline", "strike"], ["emoji"]],
          handlers: { emoji: function () {} },
        },
        "emoji-toolbar": true,
        "emoji-textarea": true,
        "emoji-shortname": true,
      },
    },
   })
}