Как использовать Quill Emoji с NG Quill - PullRequest
Новая
       12

Как использовать Quill Emoji с NG Quill

0 голосов
/ 09 мая 2018

Я хотел бы использовать quill emoji с ng quill для автоматического преобразования текста в смайлики (например, facebook или asana) :) :(: '(<3 и более </p>

Я пытался установить его, но, похоже, нене работает

Можете ли вы сказать мне правильный способ сделать это с угловым JS Quill?

спасибо, заранее

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

Привет, прежде всего вы должны добавить стили эмодзи в angular.json к стилю `` 

"styles": [
    "node_modules/quill/dist/quill.core.css",
    "node_modules/quill/dist/quill.bubble.css",
    "node_modules/quill/dist/quill.snow.css",
    "node_modules/quill-emoji/dist/quill-emoji.css",
    "node_modules/q`enter code here`uill-mention/dist/quill.mention.min.css"
],

`` а затем в вашем компоненте вверху вы должны импортировать эту строку кода import 'quill-emoji/dist/quill-emoji.js';

если вы импортируете в angular.json, вы получите ошибки, потому что плагину emoji нужны нижеуказанные модули, и вы получите к ним доступ, если вы импортируете js-файл здесь в компоненте

"эмодзи-панель инструментов": правда, "эмодзи-короткое имя": правда, "emoji-textarea": ​​правда

, а затем создать переменную конфигурации 

  const config = {
      'emoji-toolbar': true,
      'emoji-textarea': true,
      'emoji-shortname': true,
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'], // toggled buttons
          ['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]}],
          ['image'],                                    // image
          ['code-block'], // code block
          [{align: []}],
          ['emoji'],
          ['clean'], // remove formatting button
          ['link', 'image', 'video']['emoji']
        ]
      }
    };

после этого вы можете перейти к своему редактору угловых перьев 

 <quill-editor theme="bubble"
    [placeholder]="editorPlacehorder"
    [modules]="moduleConfig"
    [(ngModel)]="feedPost.content">

Это работает на 100%, поэтому, если у вас есть какие-либо вопросы, не стесняйтесь спрашивать

0 голосов
/ 21 сентября 2018

Вот пример, которому вы можете следовать, чтобы заставить quill-emoji работать, используя ng-quill .

https://github.com/contentco/quill-emoji/blob/master/demo/angular.html

В двух словах, вы можете просто включить quill-emoji после ng-quill в ваш html: 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.quilljs.com/1.3.1/quill.js"></script>
<script type="text/javascript" src="ng-quill.js"></script>
<script src="quill-emoji.js"></script>

В своем коде angularjs вы можете просто добавить его в список модулей: 

angular.module('quillTest', ['ngQuill']).controller('AppCtrl', ['$scope', AppCtrl]);

function AppCtrl($scope) {
  $scope.title = 'Quill works'
  $scope.customModules = {
  toolbar: [
    ['emoji'],
  ],
  "emoji-toolbar": true,
  "emoji-shortname": true,
  "emoji-textarea": true
  }
 }

Вернуться к вашему html, затем вы можете добавить: 

<ng-quill-editor ng-model="title" modules="customModules"></ng-quill-editor>
...