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

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

Когда мы вставляем 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;
        });

javascript html rich-text-editor quill
person Brandon    schedule 01.08.2016    source источник
comment
У меня такая же проблема :(   -  person Pradeep Jaiswar    schedule 10.08.2016
comment
Это ошибка текущего выпуска. Я связался с Джейсоном, и он подтвердил. Он работал над исправлением, поэтому я предполагаю, что, возможно, в следующем выпуске оно будет исправлено. Однако тем временем я нашел решение. Если вы настроите таргетинг на container.innerHTML и просто установите этот атрибут в строку html, он будет работать нормально.   -  person Brandon    schedule 10.08.2016
comment
Большое спасибо за ответ. Можете ли вы предоставить для него образец кода. заранее спасибо   -  person Pradeep Jaiswar    schedule 10.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Если у вас есть полная строка 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 или что-то еще, что вы используете.

person Brandon    schedule 10.08.2016
comment
Оцените ваш ответ !! В моем случае я вставляю в позицию курсора, используя getSelection и rang.index, чем pastHTML. В этом методе я могу вставить тег в позицию курсора, но стиль теряется. Как можно добиться вставки html в позицию курсора и сохранения его стиля с помощью кода ur. - person Pradeep Jaiswar; 11.08.2016
comment
@PradeepJaiswar Не используйте метод Quill pasteHTML (). Если вы хотите вставить HTML-код в редактор, просто установите для свойства quill.container.firstChild.innerHTML значение HTML. Метод Quill pasteHTML удаляет встроенный стиль. - person Brandon; 12.08.2016