contentco / Quill Emoji
Quill module toolbar extension for emoji
Stars: ✭ 175
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Quill Emoji
Laravel Emoji
😄 This package assist you in getting started with emoji easily.
Stars: ✭ 146 (-16.57%)
Mutual labels: emoji
Android List To Grid
Implementation of List to Grid: Icon Transition
Stars: ✭ 147 (-16%)
Mutual labels: toolbar
Spacymoji
💙 Emoji handling and meta data for spaCy with custom extension attributes
Stars: ✭ 151 (-13.71%)
Mutual labels: emoji
Infinitex
A LaTeX and WYSIWYG editor with academic search functionality and other helpful tools
Stars: ✭ 145 (-17.14%)
Mutual labels: quilljs
Vue Twemoji Picker
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.
Stars: ✭ 154 (-12%)
Mutual labels: emoji
Twemoji
Emoji for everyone. https://twemoji.twitter.com/
Stars: ✭ 13,604 (+7673.71%)
Mutual labels: emoji
Whatsbook
Create books from WhatsApp group chats with Python and LaTeX
Stars: ✭ 147 (-16%)
Mutual labels: emoji
Summernote Cleaner
Plugin for Summernote that adds a Button and/or Paste functionality for cleaning MS Word Crud from editor text
Stars: ✭ 148 (-15.43%)
Mutual labels: toolbar
Alipayhome
高仿支付宝首页的头部伸缩动画(使用design实现效果,CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar)
Stars: ✭ 164 (-6.29%)
Mutual labels: toolbar
Emoji Ime Dictionary
日本語で絵文字入力をするための IME 追加辞書 📙 Google 日本語入力などで日本語から絵文字への変換を可能にする IME 拡張辞書です
Stars: ✭ 172 (-1.71%)
Mutual labels: emoji
Frameless Titlebar
Customizable Electron Titlebar for frameless windows
Stars: ✭ 167 (-4.57%)
Mutual labels: toolbar
Quill Emoji Selector
Module extension for Quill.js that handles emojis in the toolbar. Through this extension, you can add emojis through the toolbar at the top, or by typing the emoji code.
To add an emoji via emoji code, type :
followed by the first few letters, and an autocomplete menu will appear. You can then select or tab
to the preferred emoji.
This module is still in active development
Installation
yarn add quill-emoji
Usage
Webpack/ES6
const toolbarOptions = {
container: [
['bold', 'italic', 'underline', 'strike'],
['emoji'],
],
handlers: {'emoji': function() {}}
}
const quill = new Quill(editor, {
// ...
modules: {
// ...
toolbar: toolbarOptions,
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
}
});
or
import * as Emoji from "quill-emoji";
Quill.register("modules/emoji", Emoji);
<Quill
defaultValue=""
theme="snow"
modules={{
toolbar: toolbarOptions,
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
}}
value={quill_data.delta}
/>
Import styles
Styles are present under
import "quill-emoji/dist/quill-emoji.css";
Examples
- Classic HTML/JS
- AngularJS using ng-quill
Options
See emoji-list.js for emoji list example
Example options
// Custom emoji-list
const emojiList = [ /* emojiList */ ];
// MDI emojicon instead of default icon
const emojiIcon = '<svg class="i" viewBox="0 0 24 24"><use ></use></svg>';
const quill = new Quill(editor, {
// ...
modules: {
// ...
"emoji-shortname": {
emojiList: emojiList,
fuse: {
shouldSort: true,
threshold: 0.1,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
"shortname"
]
},
onOpen: function() { /* ... */ },
onClose: function(emojiListItem) { /* ... */ }
},
"emoji-toolbar": {
buttonIcon: emojiIcon
},
"emoji-textarea": {
buttonIcon: emojiIcon
}
}
});
Custom Emoji Blot
If you need to display the emojis in a different way, you can customize the emoji blot by creating a new blot or extending the default emoji blot.
New emoji blot
import Quill from 'quill';
const Embed = Quill.import('blots/embed');
class EmojiBlot extends Embed {
// Customized version of src/format-emoji-blot.js
// ...
}
EmojiBlot.blotName = 'emoji';
EmojiBlot.tagName = 'span';
Quill.register({
'formats/emoji': EmojiBlot
}, true);
Contributing
Please check out our contributing guidelines. )
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].