22
Июл
2021

Добавление на панель текстового редактора Quill кнопок, позволяющих вставить в текст Material Icons

В админке одного сайта используется в качестве текстового редактора QUILL Rich Text Editor. Я хочу дать пользователю возможность добавлять в текст небольшой набор предопределенных иконок (Material Icons, потому что они вписываются в стиль сайта). В коде html это выглядит как <i class="material-icons">[name of icon]</i> Как я вижу это.

  • 1 шаг - добавить в место, где сейчас установлен курсор, текст с названием иконки [name of icon]
  • 2 шаг - установить выделение на только что набранный текст
  • 3 шаг - обернуть его в тэг <i class="material-icons"></i>
  • 4 шаг - снять выделение, пользователь продолжает писать текст.

Что я сделала (на примере иконки с названием grade):

let Inline = Quill.import('blots/inline');

class gradeBlock extends Inline{    
    static create(value){
        let node = super.create();
        node.setAttribute('class','material-icons');
        return node;    
    }    
}

gradeBlock.blotName = 'gradeblock';
gradeBlock.tagName = 'i';
Quill.register(gradeBlock);

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

var customButton = document.querySelector('.ql-gradeblock');
    customButton.addEventListener('click', function() {
    console.log('Clicked!');
        let mergeFieldText = "grade";
        var selection = quill.getSelection(true);  //find position of cursor
        quill.clipboard.dangerouslyPasteHTML(selection.index, mergeFieldText); //paste "grade" into the ql-editor content
        quill.setSelection(selection.index,5); //set selection on text "grade"
        var range = quill.getSelection();  
        quill.formatText(range,'gradeblock'); //add tags <i class="material-icons"></i> around the selected text 
        quill.setSelection(null); //reset the selection
}); 

Но это не работает так, как мне нужно. После первого нажатия на мою кнопку добавляется чистый текст "grade". После повторного нажатия - после (!) текста "grade" появляется нужная мне иконка Material Icons, но при этом если начать набирать дальше текст, то физически он остается внутри тега <i></i>.

Пожалуйста, помогите найти ошибку. Я не понимаю, что делаю не так. Почему не срабатывает первое нажатие? Как мне сделать так, чтобы дальнейший текст оставался внутри текущего <p></p>, но снаружи от <i></i> Может быть, есть какой-то совсем другой легкий способ решить мою задачу?

Попробовать мой или свой код можно тут: https://quilljs.com/playground/#quill-playground

Источник: https://ru.stackoverflow.com/questions/1307768/%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0-%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B0-quill-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA-%D0%BF%D0%BE%D0%B7%D0%B2%D0%BE%D0%BB%D1%8F%D1%8E%D1%89%D0%B8%D1%85-%D0%B2%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D0%B2-%D1%82

Тебе может это понравится...

Добавить комментарий