Как реализовать Quill Emoji Blot

Я пытаюсь реализовать редактор Emoji Blot в Quill Editor,

Но у меня есть проблемы с курсором в редакторе.

Чтобы решить эту проблему, я добавил пробел после вставки смайлов, но когда я пытаюсь их удалить, необходимы два пробела для удаления смайлов. В первый раз курсор останавливается в начале смайлика, а во второй раз смайлик удаляется.

Кто-нибудь уже делал что-то подобное? Как я могу заставить этот код работать правильно?

Заранее спасибо.

const Embed = Quill.import("blots/embed");
class EmojiBlot extends Embed {
  static create(classes) {
    let node = super.create();
    classes.split(" ").forEach(iconClass => {
      node.classList.add(iconClass);
    });
    return node;
  }

  static formats(node) {
    let format = {};
    if (node.hasAttribute("class")) {
      format.class = node.getAttribute("class");
    }
    return format;
  }

  static value(node) {
    return node.getAttribute("class");
  }

  format(name, value) {
    if (name === "class") {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name, value);
      }
    } else {
      super.format(name, value);
    }
  }
}

EmojiBlot.blotName = "emoji";
EmojiBlot.tagName = "span";
Quill.register({
  "formats/emoji": EmojiBlot
});

var myEditor = new Quill("#editor-container", {
  modules: {
    toolbar: document.getElementById("toolbar")
  },
  placeholder: "Compose an epic...",
  theme: "snow" // or 'bubble'
});

const insertEmoji = function() {
  let editorSelection = myEditor.getSelection();
  const cursorPosition = editorSelection && editorSelection.index ? editorSelection.index : 0;
  myEditor.insertEmbed(cursorPosition, "emoji", 'icon icon-smiley');
  myEditor.insertText(cursorPosition + 1, ' ')
  myEditor.setSelection(cursorPosition + 2)
};
document.querySelector(".emojiButton").addEventListener("click", insertEmoji);
#editor-container {
  height: 200px;
}

.icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 1em;
  font-size: 20px;
}

.icon-smiley {
  background-image: url("https://twemoji.maxcdn.com/2/svg/1f603.svg"); 
}
<link href="//cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet"/>
<script src="//cdn.quilljs.com/1.3.5/quill.js"></script>
<div
    id="editor-container"
></div>
<div id="toolbar">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="emojiButton">:D</button>
</div>


javascript quill
person Eduardo Schroder    schedule 30.01.2018    source источник
comment
На самом деле я сталкиваюсь с той же проблемой с аналогичной реализацией. Вдобавок перо, кажется, захватывает пробелы после моих вставок.   -  person charrondev    schedule 07.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Я изменил тег эмодзи с диапазона на img, а также заменил:

myEditor.insertText(cursorPosition + 1, ' ')
myEditor.setSelection(cursorPosition + 2)

С участием

myEditor.setSelection(cursorPosition + 1);

Это решает проблему. См. Пример здесь: https://jsfiddle.net/nadavrt/Ldgfp5pa/

Что касается того, что вызывает неправильное поведение диапазона, я предполагаю, что Quill не может правильно зарегистрировать ширину вашего Blot из-за ошибки в самом Quill. Я бы порекомендовал вам открыть проблему с ошибкой на странице проекта GitHub.

person Nadav    schedule 08.02.2018
comment
Большое спасибо за ваш ответ, это будет большим подспорьем. Я просто добавляю еще одну строку в метод create IconBlot node.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'). Чтобы добавить к элементу атрибут src, таким образом браузер не будет отображать границу на изображении. - person Eduardo Schroder; 09.02.2018
comment
Я рад, что это помогло. Если вы заинтересованы в реализации нескольких эмодзи, вы также можете взглянуть на эту страницу GitHub: github.com / contentco / quill-emoji - person Nadav; 10.02.2018
comment
@Nadav Проголосовал за jsfiddle, помог мне с проблемой, с которой я столкнулся. Спасибо ! - person jay_R_champ; 10.06.2019