Quill.js, расширяющий изменения кляксы / пергамента, не фиксируется в дельте

Я начинаю разбираться с quill.js - я хотел бы иметь возможность создать пользовательский блот с предварительно заданным содержимым, но которое я могу изменить .. Я выяснил, как создать блочный встраиваемый блот из руководства по клонированию среднего размера , но я заметил, что созданный узел не фиксируется в дельта-содержимом - я установил некоторый текст внутри стилизованного div, и я хотел бы сохранить эти изменения ... Я также хотел бы использовать этот процесс для таких вещей, как динамические подписи ... важно, что я могу сохранить дельту. node.innerText = 'test test test' устанавливает начальное содержимое нормально, но изменения не привязаны к дельте.

Есть ли способ вложить кляксы в блоки? или можно как-нибудь связать содержимое блота дельтой? был бы очень признателен за любой полезный пример кода. Спасибо.

class EditModuleBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('style', value.style);
    node.innerText = 'test test test';
    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('style')
    };
  }
}
EditModuleBlot.blotName = 'editmodule';
EditModuleBlot.tagName = 'div';

и это мой метод вызова Vue.js:

clickAddModule() {
  let range = this.quillInstance.getSelection(true);
  this.quillInstance.insertText(range.index, '\n', Quill.sources.USER);
  this.quillInstance.insertEmbed(range.index + 1, 'editmodule', {
    style: 'padding:10px;border: 2px dashed black;'
  }, Quill.sources.USER);
  this.quillInstance.setSelection(range.index + 2, Quill.sources.SILENT);
}

Дельта json не захватывает div innerText:

{
  "insert": {
    "editmodule": {
      "style": "padding:10px;border: 2px dashed black;"
    }
  }
},

* update * не используйте quill для расширений блоков, он не обрабатывает их должным образом --- используйте Slate.js, Prose Mirror или CkEditor


javascript parchment delta quill
person Sean D.    schedule 20.04.2017    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Я вроде как понял это, мне нужно расширить метод value с помощью значения innerText, но в целом я определил, что quill.js не лучший редактор - я чувствую себя несколько сбитым с толку проблемами с Quill, есть серьезные архитектурные ошибки которые чрезвычайно затрудняют расширение, я не уверен, что они когда-либо смогут их решить - они систематически удаляют ссылки на эти проблемы, они закрыли почти 1500 проблем, но они ничего не решили, они также блокируют пользователей кто публикует проблемы --- Quill не обрабатывает блоки внутри блоков, что делает невозможными расширенные расширения, такие как таблицы, формат дельты также не обрабатывает разрывы в блоках должным образом, поэтому вы даже не можете их обойти - это своего рода катастрофа --- Я бы порекомендовал посмотреть Slate.js или Prose Mirror, они не такие полные, но, что очень важно, не делали тех же ошибок, у них есть первоклассные модели данных ...

Вот код исправления для quill, но по возможности используйте что-нибудь другое.

class EditModuleBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('style', value.style);
    node.innerText = 'test test test';

    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('style'),
      text: node.innerText //now text will show up in the delta
    };
  }
}
person Sean D.    schedule 21.04.2017

arrow_upward
1
arrow_downward

Независимо от того, согласны ли вы с выводом @SeanD (у меня есть соблазн), вы (как и я) можете застрять, пытаясь заставить работать собственный Blot.

Если вы окажетесь здесь, я хотел бы задокументировать одну связанную вещь, которую я обнаружил:

...

EditModuleBlot.blotName = 'editmodule';
EditModuleBlot.tagName = 'div';
EditModuleBlog.className = 'my-edit-module';

Добавление className к вашему блоту не позволяет Quill предполагать, что все div должны использовать этот блот. Если у вас нет собственного имени класса, вставленный контент будет ужасным, поскольку Quill пытается заставить его в этом формате.

person Josh    schedule 09.01.2020