Удаление встроенных форматов в Quill

У меня возникли проблемы с тем, чтобы removeFormat работал должным образом. Как ни странно, пару дней назад я думал, что это работает; но теперь, когда я проверяю это, это не так. Он удаляет форматирование на уровне блоков независимо от того, где находится выбор. Простой пример использования Quill Quickstart с некоторыми изменениями:

  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
  let Block = Quill.import('blots/block');
let Parchment = Quill.import('parchment');

	class BlockquoteBlot extends Block { }
BlockquoteBlot.scope = Parchment.Scope.BLOCK;
	BlockquoteBlot.blotName = 'blockquote';
	BlockquoteBlot.tagName = 'blockquote';

	Quill.register(BlockquoteBlot);
	let quill = new Quill('#editor');

  $('#italic-button').click(function() {
    quill.format('italic', true);
  });
  $('#bold-button').click(function() {
    quill.format('bold', true);
  });
  $('#blockquote-button').click(function() {
    quill.format('blockquote', true);
  });
  $('.cust-clear').click(function(ev) {
    var range = quill.getSelection();
    quill.removeFormat(range.index, range.length);
  });
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Create the toolbar container -->
<div id="toolbar">
  <button id="bold-button" class="ql-bold">Bold</button>
  <button id="italic-button" class="ql-italic">Italic</button>
  <button id="blockquote-button" class="ql-blockquote">Blockquote</button>
  <button class="cust-clear" title="Clear Formatting">X</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

В этом примере, если я наберу жирный шрифт на «Привет» и сделаю всю строку цитатой, все будет выглядеть так, как должно. Если я затем выберу «Привет» и нажму кнопку X, чтобы удалить форматирование, оно удалит форматирование блок-кавычек, даже если я не нахожусь рядом с символом «\ n». Я неправильно понимаю removeFormat или есть ошибка в том, как я создал свой BlockquoteBlot? Я взял этот код в основном из демонстрации Medium на сайте Quill, но обнаружил, что в некоторых случаях мне нужно специально определить область действия, чтобы тег распознавался как блок (это может быть необязательно для этой демонстрации, но я включая его, если это создает проблему).


quill
person Christina    schedule 11.09.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Способ, которым removeFormat должен работать в настоящее время, удаляет все форматы блоков, которые выделяет пользователь, даже если они не пересекаются с символом "\n". Это имеет больше смысла, когда пользователь выбирает несколько строк Issue #649, но, возможно, это не должно работать таким образом, когда частично выделена только одна строка. Я создал проблему Github, чтобы обсудить это. Пожалуйста, не стесняйтесь вмешиваться.

person jhchen    schedule 12.09.2016

arrow_upward
2
arrow_downward

Я знаю, что это старый поток - как дополнение к вашему коду на случай, если кто-то ничего не выбрал - работает на Quilljs 1.2.6

 $('.cust-clear').click(function(ev) {
    var range = quill.getSelection();
    if (range.length ===0) {
      let leaf, offset = quill.getLeaf(range.index);
      quill.removeFormat(range.index - offset, range.index + leaf.domNode.length);
    } else {
       quill.removeFormat(range.index, range.length);
    }
  });
person IanOx    schedule 27.06.2017

arrow_upward
0
arrow_downward

Это должно работать

$('.cust-clear').click(function() 
{
    var range = editor.getSelection();
    if (range){
        if (range.length > 0) {
            editor.removeFormat(range, Quill.sources.USER);
        }
    }
});
person Mohamad Hamouday    schedule 03.08.2020