All Projects → contentco → Quill Emoji

contentco / Quill Emoji

Quill module toolbar extension for emoji

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
Tool Bar
Package providing customisable toolbar for Atom
Stars: ✭ 159 (-9.14%)
Mutual labels:  toolbar
Yii2 Podium
Yii 2 forum module project
Stars: ✭ 172 (-1.71%)
Mutual labels:  quilljs
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
Padroes De Commits
📄 Padrão de commits para repositórios.
Stars: ✭ 164 (-6.29%)
Mutual labels:  emoji
Infinitex
A LaTeX and WYSIWYG editor with academic search functionality and other helpful tools
Stars: ✭ 145 (-17.14%)
Mutual labels:  quilljs
Mojibar
🍊 Emoji searcher but as a menubar app.
Stars: ✭ 2,040 (+1065.71%)
Mutual labels:  emoji
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
Gemoji
Info on GitHub emoji: gemoji
Stars: ✭ 146 (-16.57%)
Mutual labels:  emoji
Emoji Ime Dictionary
日本語で絵文字入力をするための IME 追加辞書 📙 Google 日本語入力などで日本語から絵文字への変換を可能にする IME 拡張辞書です
Stars: ✭ 172 (-1.71%)
Mutual labels:  emoji
Arctoolbarview
An Arc view for the android Toolbar.
Stars: ✭ 145 (-17.14%)
Mutual labels:  toolbar
Github Complete.vim
Vim input completion for GitHub
Stars: ✭ 161 (-8%)
Mutual labels:  emoji
Emojicpp
Emoji 😄 for c++ developers 👍
Stars: ✭ 174 (-0.57%)
Mutual labels:  emoji
Emoji
💌 Find the emoji that echoes your mind.
Stars: ✭ 2,072 (+1084%)
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.

Screenshot

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

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].