Блог

Я создал пользовательское выпадающее меню для своего редактора перьев, в котором применяются классы css (oracle_text, game_mechanics, обычный). Он работает так, как было объявлено, выберите класс в раскрывающемся списке, и он будет применен в Quill. Классы являются стилями уровня блока, применяемыми ко всему абзацу.

Как я могу изменить значение раскрывающегося списка, если пользователь помещает курсор в строку с указанным классом. Например: если пользователь помещает курсор в строку с классом game_mechanics, как я могу изменить выпадающее меню на game_mechanics (Механика)?

 /* Initialize Quill editor */
const Block = Quill.import('blots/block');

class OracleText extends Block {}
OracleText.blotName = 'oracle_text';
OracleText.className = 'oracle_text';
OracleText.tagName = 'blockquote';
Quill.register(OracleText);

class GameMechanics extends Block {}
GameMechanics.blotName = 'game_mechanics';
GameMechanics.className = 'game_mechanics';
GameMechanics.tagName = 'blockquote';
Quill.register(GameMechanics);

let quill = new Quill('#LogBook', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: [
        [{ 'placeholder': ['oracle_text', 'game_mechanics', 'normal'] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        ['clean']
      ],
      handlers: {
        "placeholder": function (value) { 
          if (value) {
            switch (value) {
              case "normal":
                var range = quill.getSelection();
                quill.removeFormat(range.index, range.length);
              default:
                quill.format(value, true);
            }
          }
        }
      }
    }
  }
});