contentco / quill-emoji Goto Github PK
View Code? Open in Web Editor NEWQuill module toolbar extension for emoji
Quill module toolbar extension for emoji
Please remove this from the CSS:
body{background:#fff}
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
?
I want to use it on a custom toolbar, so what should i do? Thx
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.
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>
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" },
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!
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 ?
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?
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?
@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,
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 ?
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 ?
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.
webpack.config.js need to update
Do you have an expression selected event, and when the mobile expression is selected, there is an instant loss of focus and focus?
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
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?
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?
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?
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.
The problem is i what to type Chinese "你好" after emoji "😁", i hope to get "😁你好", but what i actually get is ”😁n你好“.
@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,
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!
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,
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?
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
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.
Should add some details to the feature set
hi!
How to use quill-emoji in angular version 7.x?
Thank!
Hello
I'm facing the following issue :
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
How to dropup
instead of dropdown
?
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 ?
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.
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.
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)}
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 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")}
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.
Right now it just inserts a space
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.
HI
can you give me an insight on how can I generate a Twemoji image map?
Some scss affecting the quill-table
module appears to have snuck in here:
quill-emoji/src/scss/core/_styles.scss
Lines 179 to 189 in 042f95e
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.