Как назначить ширину и высоту attr's в дельтах QuillJS/Rich-Text

Question

Мы используем QuillJS 1.0 Beta. У нас есть текстовый редактор, и пользователь изначально создает контент. Когда они нажимают кнопку «Отправить», он извлекает из редактора .innerHTML() и сохраняет его в нашей базе данных. Затем, если пользователь хочет отредактировать этот контент, мы вытаскиваем html из нашей базы данных и используем .pasteHTML() из API Quill для вставки его в редактор.

Когда мы вставляем html в редактор, стилизация текста вставляется просто отлично, но когда мы включаем изображения, размер изображения устанавливается на естественную высоту/ширину изображения вместо встроенного стиля. есть комплект. По какой-то причине чистильщик Quill должен удалить этот стиль. Есть ли параметр, чтобы пройти, чтобы мы могли избежать этого «чище», поскольку мы проходим прямо в html?

Вот некоторые из HTML строки, которая приходит из БД выглядит следующим образом:

<p class="ql-align-center"><strong class="ql-size-huge" style="color: rgb(255, 255, 255);">&nbsp;$450 Referral Bonus</strong></p><p class="ql-align-center"><strong class="ql-size-small" style="color: rgb(186, 35, 35);">Phone a friend!</strong></p><p class="ql-align-center"><img width="145" height="140" style="width: 145px; height: 140px;" src="data:image/png;base64,iVBORw0KG 

Как вы можете видеть, стиль есть. Когда я просматриваю DOM после того, как Quill вставляет его в редактор, тег img не имеет ни одного из этих стилей. Есть идеи?

Я пытался добавить Сличитель, который будет интерпретировать тег изображения определенным образом, но независимо от того, что я делаю, я не могу получить ширина/высота придерживаться:

quill.editor.clipboard.addMatcher('IMG', function(node, delta) { 
      let imgWidth = node.width; 
      let imgHeight = node.height; 
      var delta2 = new Delta([{ 
       insert: { image: node.src }, 
       attributes: { 
        width: imgWidth, 
        height: imgHeight 
       } 
      }]); 

      return delta2; 
     }); 

Answer 1

Если вы иметь полную строку HTML с встроенным стилем на изображениях, теги абзацев и т. д., вы можете просто установить свойство quill.container.firstChild.innerHTML в строку html и вставить его для вас со стилями. Это полностью обходит метод addMatcher и метод pasteHTML().

В моем случае, я получал HTML строку из нашей БД и установки этого свойства в нем:

this._httpClient.fetch('/ApiUrl') 
      .then(response => response.json()) 
      .then(resp => { 
       this.obj.editor.container.firstChild.innerHTML = resp.ExecutiveControlHtmlResult; 
      }); 

У меня был мой экземпляр Quill сохраняется в переменной с именем editor однако вы должны быть в состоянии только установите их через jquery или что-то еще, что вы используете.