@olsgreen @cbracco @himynameistimli @klaslundberg @vloginov
Hey Team,

I really love this extension for Quill.
It seems that thumbsup is not showing correct emoji.

Can you please let me know if I am missing something?
Regards,

Please remove this from the CSS:

body{background:#fff}

@olsgreen @cbracco @himynameistimli @klaslundberg @vloginov
Hey Team,

Is there any way to choose the list of emojis?
So It will fetch and show only listed emojis not all.

Regards,

The autocomplete module for emojis doesn't appear in firefox when a user types in a partial emoji name. See the following gif from firefox:
https://gyazo.com/78e2c5841a1b5d6949493fa805021ebf

Here's the working version in chrome:
https://gyazo.com/b6df04b272a49fbd77129ad5dcae1da1

Both of those gifs were generated from https://github.com/contentco/quill-emoji/blob/master/demo/index.html. I'm running MacOS High Sierra v10.13.6, chrome v69.0.3497.100, and firefox v62.0.3.

Let me know if there's anything else I can provide that might be of help to you guys. Also, I'll post anything else I learn about this issue here. Thanks again for keeping this project running, it's been a huge help.

I implemented this plugin initially in Windows and it worked perfectly. But when I access my project in Linux, the emojis doesn't load correctly. Do I have to install anything additional for it to work in Linux? I know that Linux may not have support for the font you are using natively.

Here is how it's showing me in Linux:

Edit: For what I see, the font is user dependent and I think that is a big problem. I tried to run my project in another PC with Windows 7 and it didn't load the emojis as well. Just in Firefox, but not in Chrome.

GET http://xenin.local/Users/tim/contentco/quill-emoji/dist/1e7b63404cd2fb8e6525b2fd4ee4d286.png 404 (Not Found)

Sass compiles without errors, copies images over but still uses this url.

This is how it appears rather than the one mentioned in the readme. Any thoughts why this is happening?

Console Error :
09:49:28.758 VM46 app.js:5071 Uncaught ReferenceError: Quill is not defined at Object../node_modules/quill-emoji/dist/quill-emoji.js (VM46 app.js:5071) at o (VM46 app.js:5071) at Object.<anonymous> (VM46 app.js:5071) at o (VM46 app.js:5071) at ./node_modules/quill-emoji/dist/quill-emoji.js (VM46 app.js:5071) at Object../node_modules/quill-emoji/dist/quill-emoji.js (VM46 app.js:5071) at __webpack_require__ (VM46 app.js:679) at fn (VM46 app.js:89) at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue (VM46 app.js:950) at __webpack_require__ (VM46 app.js:679)

and Here is my code

`import {quillEditor} from 'vue-quill-editor'
import 'quill-emoji/dist/quill-emoji'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const Quill = this.$refs.qEditor.quill`

is there any solution?

Do you have an expression selected event, and when the mobile expression is selected, there is an instant loss of focus and focus?

Hi!

Is there a way to trick the display of the emoji palette for a better adaptation on mobile ?

Let imagine a quill editor at the bottom of the display on a mobile phone (like chat application).
today the palette display is a the bottom-right corner of the cursor; so in mobile, the entire palette is off the screen.
I've tried to trick the css, but the positionning in done in js at each display of the palette, so it does not work.

Perhaps there is a way to use emoji handler to change top & left for example ?

Hi there,

I encountered following behaviour: When selecting an emoji via the popover and the first one is selected without clicking tab, the cursor jumps in the next line instead of staying at the same one.

I am using quill-emoji together with vue2-editor:

  import { Quill, VueEditor } from 'vue2-editor';

  Quill.register('modules/quill-emoji', Emoji);

  const toolbarOptions = {
    container: [
      ['emoji'],
    ],
    handlers: {
      emoji() {
      },
    },
  };
  export default {
    name: 'CommentEditor',
    components: { VueEditor },
    data() {
      return {
        editorSettings: {
          modules: {
            toolbar: toolbarOptions,
            toolbar_emoji: true,
            short_name_emoji: true,
          },
        },
        text: null,
      };
    },
};

Thanks for the help!
Sebastian

import ReactQuill from 'react-quill';
import 'quill-emoji';

 <ReactQuill
                   theme="snow"
                    value={this.state.comment}
                    onChange={this.handleChangeComment}
                    modules={{
                        toolbar: [
                            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                            [{ 'font': [] }],
                            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                            [{ 'align': [] }],
                            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
                            [{ 'direction': 'rtl' }],                         // text direction
                            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
                            ['blockquote', 'code-block'],

                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            [{ 'color': [] }, { 'background': [] }],  
                            ['emoji'],        // dropdown with defaults from theme
                            ['image', 'video', 'link'],

                            ['clean']
                        ]
                    }}
                />

it`s not working

Hey,
I am using the emoji-palette and emoji-suggestions, but the problem is my quill-editor is at the bottom of the screen and have a limited screen estate.

So, the emoji-palette and suggestions appear at the cursor position which makes the entire editor off the screen which shouldn't be happening.

Changing the CSS won't do much as the position is calculated in javascript dynamically.

Is there a solution for this?

Hello
I'm facing the following issue :

• Chrome : everything is working

• Firefox : emojis' box OK, I pick one and then in the textarea I have a WHITE 20x20 square instead of the emoji.

• Safari : same as Firefox, but BLACK square.

I've tried to add some properties in the js (crossorigin="Anonymous", width=20px, height=20px) but no change.
Maybe the png needs to be loaded prior ? but I don't think so

Any idea ?

Thanks a lot

Hi,
I'm trying to use quill-emoji with ngx-quill within an angular (7) app, and I'm unable to display the emoji's both in the pop-up and when it is inserted.

Here is a stackblitz https://stackblitz.com/edit/ngx-quill-emoji?file=src%2Fapp%2Fapp.component.ts implementation, do i need add anything specific to display the emojis ?

Integrated with quill is okay. Running smooth. But when using quill.getContents () function. these data of emoji just only:

{ "insert": {
        "emoji": true
}} 

in Delta object.

Any help?

Hey guys,

First off, thanks for putting this project together. It's been a huge help. Second, are you guys planning on publishing the latest changes (2ff9f4e) to NPM? I think the hosted version they have there is still on v0.0.9.

webpack.config.js need to update

Pls delete emoji-data-css from the project. I don't see where you use it.

I'm trying to integrate quill-emoji into ng-quill (https://www.npmjs.com/package/ng-quill), and it doesn't work. How to register module quill-emoji?

Some scss affecting the quill-table module appears to have snuck in here:

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 ?

I use ngx-quill. When I try to import quill-emoji I got this error

ERROR in ./node_modules/quill-emoji/src/scss/quill-emoji.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/lil-works1/Webdisk/www/npm/ngx-quill-angular-cli/node_modules/quill-emoji/src/scss/core/_emoji.scss:13:22: Can't resolve '../../sheet_apple_64.png' in '/Users/lil-works1/Webdisk/www/npm/ngx-quill-angular-cli/node_modules/quill-emoji/src/scss'

How can I solve this?

I configed it following the documentation, and then got an error

This is basically a follow-up to #10

I found the following CSS classes in quill-emoji.css which mess up my website's CSS styles, because the same class name is already in use.

I think for the plugin you should always define a CSS class to be under the scope of the quill-editor, in order to avoid this.

.mention{color:#0366d6}
.completions{list-style:none;background:#fff;border-radius:2px;box-shadow:2px 2px 2px rgba(0,0,0,.25)}

Lots of front-end modules are published to npm these days for ease of use with tools like browserify and Webpack. The main quill library is on npm, and I was surprised to find that this package wasn't.

Hi there.

After some hours to configurate it, I'm looking to send datas to the base. For this, I can not use the img tag and I've not been able to change the img to another thing. The format-emoji-blot seems invisible.

I have seen in the list that emojis got unicode, so, I'm wondering, how can we use it?

Thanks,

Hi there,
can you tell me, how it is possible to change the behaviour in a way, that the Emojis are inserted as <span></span> instead of an <img />?

I have also the need that the src="data:image/png;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" is NOT being inserted - so that's why it would be safe to change to a span-element.

Thanks!

If I change the align to right-align instead of left, the emoji popup still appears to the right of the selection, however, there seems to be an issue with the positioning / overlap / overflow

See screenshot:

I've implemented quill-emoji along with ngx-quill within an angular 7 app. Everything appears to work except the completions. I can see the UL tag, however there are no li tags when I try to trigger the completion ';s".

my html looks like this :
<quill-editor [(ngModel)]="postcontent" [modules]="{ toolbar: { container: [ 'emoji' ], handlers: { emoji: emptyHandler } }, 'emoji-toolbar': true, 'emoji-textarea': true, 'emoji-shortname': true }" (onEditorCreated)="addBindingCreated($event)">

the only thing different compared to the ngx-quill example is that I'm importing quill-emoji as :
import 'quill-emoji/dist/quill-emoji.js';

instead of

import 'quill-emoji"

when I try to import it as just quill-emoji it doesn't complie as it is having problem with teh css (background image). is there anything I can do to get this to work ?

Hi!
When I type text and use :sometimes I don't want add emoji and for it I add space after :.
But emoji dropdown list still appear even after multiple spaces

When click on flag smiles in textarea
Maybe already correct in other places
But if not, it can be fix by:

fromCodePoint(unicode) {
    if(unicode.indexOf('-') > 0) {
        return String.fromCodePoint(...unicode.split('-').map(function(item) {
            return '0x' + item;
        }));
    } else {
        return String.fromCodePoint('0x' + unicode);
    }
}

Hi there,

I encountered the problem that after inserting the emoji the cursor disappears. The cursor appears again when I hit space. The cursor disappears again when I am putting the cursor right in front of the emoji (see gif)

I use the quill-emoji through the vue-quill-editor. and when the webpack run , it always get the error link this.

I do not know why the components can not find the Quill.

Should add some details to the feature set

I'm trying to work out what needs to persisted in a database (whether the text is sufficient to be stored etc...). When I tried to look at the content, html and text, I noticed that there is nothing being emitted from an emoji selection using getText (assuming and according to the code that data.text is the result of getText.

Should this have the unicode for the emoji or a shortcode ?

The following stackblitz shows the example https://stackblitz.com/edit/quill-example-pt

Please note : The CSS is not being loaded properly but it is functioning.

Is it possible to create a custom emoji list?

I'd like to specify which emojis are shown and, ideally, which menu groups are shown. Maybe allowing a custom JSON file to override intern file.

HI
can you give me an insight on how can I generate a Twemoji image map?

How to dropup instead of dropdown ?

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>

Right now it just inserts a space

hi!
How to use quill-emoji in angular version 7.x?
Thank!

In the demo, I'm unable to either focus on different emojis via the arrow keys or select the emoji I want via the enter key. I think this is happening because of the format field that's being applied to the keybindings for arrow keys (see https://github.com/contentco/quill-emoji/blob/master/src/module-emoji.js#L58 and https://github.com/contentco/quill-emoji/blob/master/src/module-emoji.js#L64). If I remove those lines, I'm able to focus on different emojis again.

Normally, I'd submit a PR for removing those lines, but after looking into the triggerPicker method a bit, it seems like there was an attempt to limit the scope of those keybindings to text that was added to quill with a specific format indicating that the picker was open. Do you guys want to try to get the keybindings for the emoji-shortname format working, or would it be alright if I removed the format constraint on the arrow key bindings and removed the insert of the emoji-shortname formatted text from triggerPicker?

Hi everyone,

I'm trying to use this plugin, but it is not really working for me yet. I got in installed on Vue.js and added the buttons, but this is what I get:

In the Node_modules I see the png missing with all the right emojis, this is the wrong theme. Furthermore the layout is incorrect. I have no idea how to resolve this, can't really find a reason why.

Any ideas? The code I use is the following:

editorOption: { modules: { toolbar: { container: [ ['bold', 'italic', 'underline', 'strike'], ['emoji'] ], handlers: {'emoji': function () {}} }, toolbar_emoji: true, short_name_emoji: true, textarea_emoji: true } }

<quill-editor v-model="typingmessage" ref="quill" :options="editorOption" height="300px"> </quill-editor>

If more things are needed, please say so.

Thanks in advance!

I started facing this error after I have imported the package via NPM. My package is:

"devDependencies": { "axios": "^0.18.0", "bootstrap": "^4.0.0", "cross-env": "^5.1", "css-loader": "^1.0.1", "jquery": "^3.2", "laravel-mix": "^2.0", "less": "^2.3.1", "less-loader": "^4.1.0", "lodash": "^4.17.5", "node-sass": "^4.10.0", "popper.js": "^1.12", "quill-image-drop-module": "^1.0.3", "quill-image-extend-module": "^1.1.2", "quill-image-resize-module": "^3.0.0", "sass-loader": "^7.1.0", "resolve-url-loader": "^3.0.0", "style-loader": "^0.23.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue": "^2.5.17", "vue-html5-editor": "^1.1.1" },

I'm making an application that uses quill-emoji and I specifically only want the autocomplete using the : character to work (no emoji toolbar). Using the instructions outlined in the demo repo, I've been able to get this working for Chrome, however, the same steps / code does not work on Firefox. No matter what, using colon never brings up emojis.

Has anyone ran into this and / or have a solution?

The problem is i what to type Chinese "你好" after emoji "😁", i hope to get "😁你好", but what i actually get is ”😁n你好“.

Hello,
I am new to this project so kindly excuse my complete ignorance.
I am trying to integrate quill into a forum, To that end I need to render quill's delta without an editor.
I tried using quill-delta-to-html but the output of the converter is empty (when it hits emoji).
Is there something I am doing wrong?
Thank you in advance!
JJ.

Hi there,
I had the issue, that Safari on macOS showed a broken image placeholder due to the non-interpretation of the base64 encoded img-src. Found this while searching for a solution:
https://stackoverflow.com/a/38336311/5750030

Fixed it by changing the following in the file:
contentco/quill-emoji/blob/master/src/quill-emoji.js

{bolt:"data:image/png;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="},attributes:{class:"emoji ap ap-"+e.name,crossOrigin:"Anonymous"}

a.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=");a.setAttribute("crossOrigin","Anonymous")}

I want to use it on a custom toolbar, so what should i do? Thx