Как сделать не выбираемый пользовательский формат для встраивания в quilljs

Я хотел бы создать собственный формат для встраивания, который можно стилизовать, но его текст нельзя изменить. Мой вариант использования очень похож на случай с хэштегом. Я хочу иметь внешнюю кнопку, которая добавит хэштег к текущему выбранному диапазону в редакторе. Но после этого я хочу, чтобы хэштег вел себя как «блок», чтобы пользователь не мог пойти туда и изменить его текст.

Единственный способ, которым я мог это сделать, - сказать, что узел формата contenteditable = false, но я не уверен, что иду правильным путем, поскольку у меня есть некоторые проблемы с этим подходом, в основном:

Если хэштег является последним в редакторе, я не могу пройти мимо него (стрелками или курсором). Двойной щелчок по нему для выбора должен выделить все это (а не отдельные слова) (для стиля). Если курсор находится сразу за хэштегом, нажатие вправо и запись будет писать внутри хэштега. Вы можете проверить код, который я сделал, экспериментируя с этим:

  Quill.import('blots/embed');
  class QuillHashtag extends Embed {
    static create(value) {
      let node = super.create(value);
      node.innerHTML = `<span contenteditable=false>#${value}</span>`;
      return node;
    }
  }
  QuillHashtag.blotName = 'hashtag'; 
  QuillHashtag.className = 'quill-hashtag';
  QuillHashtag.tagName = 'span';

Вот полный код: http://codepen.io/emanuelbsilva/pen/Zpmmzv.

Если вы, ребята, можете дать мне какие-либо советы о том, как я могу это сделать, я был бы рад.

Спасибо.


quill
person emanuelbsilva    schedule 20.10.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Все, что вам нужно сделать, это установить для атрибута contenteditable значение false в основном диапазоне. В настоящее время вы делаете это на вложенном диапазоне.

node.setAttribute('contenteditable', false);

Я изменил код хэштега из вашего сообщения и применил это изменение.

var Embed = Quill.import('blots/embed');
class QuillHashtag extends Embed {
  static create(value) {
    let node = super.create(value);
    node.setAttribute('contenteditable', false);
    node.innerHTML = value;
    return node;
  }
}
QuillHashtag.blotName = 'hashtag';
QuillHashtag.className = 'quill-hashtag';
QuillHashtag.tagName = 'span';

Quill.register({
  'formats/hashtag': QuillHashtag
});

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});


document.getElementById('b').addEventListener('click', () => {
  var range = quill.getSelection();
  if (range) {
    var hashtag = prompt("Select hashtag", "foobar");
    quill.insertEmbed(range.index, 'hashtag', hashtag);
  }

});
#editor-container {
  height: 375px;
}

.quill-hashtag {
  background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script>
<div id="editor-container"></div>
<button id="b">add hashtag</button>

person Hamed    schedule 18.10.2018