contentco / quill-emoji

Quill module toolbar extension for emoji
274 stars 166 forks source link

[Parchment] Cannot insert emoji into block #54

Open emmanuelmcd opened 5 years ago

emmanuelmcd commented 5 years ago

Hi, I have a problem implementing quill emoji inside vueJs. I'm having this error : Uncaught Error: [Parchment] Cannot insert emoji into block

Here is my code:

import { VueEditor, Quill } from 'vue2-editor';
  import Emoji from 'quill-emoji/dist/quill-emoji';
  import EmojiBlot from 'quill-emoji/src/format-emoji-blot';
  import ToolbarEmoji from 'quill-emoji/src/module-toolbar-emoji';
  import ShortNameEmoji from 'quill-emoji/src/module-emoji';
  import TextAreaEmoji from 'quill-emoji/src/module-textarea-emoji';
  import 'quill/dist/quill.snow.css';
  import 'quill-emoji/dist/quill-emoji.css';

  Quill.register({
    'modules/quill-emoji': Emoji,
    'formats/emoji': EmojiBlot,
  }, true);

  export default {
    name: 'textarea-model',
    components: { VueEditor },
    props: {
      /**
       * Define the field inside the object which will be modified
       */
      value: {
        type: [String, Number]
      }
    },
    computed: {
      field: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val);
        }
      },
    },
    data() {
      return {
        customModulesForEditor: [
          { alias: 'toolbar_emoji', module: ToolbarEmoji },
          { alias: 'short_name_emoji', module: ShortNameEmoji },
          { alias: 'textarea_emoji', module: TextAreaEmoji },
        ],
        editorOptions: {
          modules: {
            toolbar: {
              container: [
                [{ header: [1, 2, 3, 4, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                ['link'],
                [{ color: [] }],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ align: [] }],
                ['clean'],
                ['emoji'],
              ],
              handlers: {
                emoji: function () {}
              },
            },
            toolbar_emoji: true,
            short_name_emoji: true,
            textarea_emoji: true,
          },
        },
        text: null,
      };
    }
  };

And I don't quite understand why ? Any Idea ?

ChinaCarlos commented 4 years ago

last,how to fixed it?

avlasiuk commented 2 years ago

@maliaoMJ Same issue... Have you solved this?

jayrap24 commented 2 years ago

Same here, anyone with updates on how to solve this issue?