LINUX.ORG.RU
Форум — Web-development  

Не показываются свойства картинки в Summernote в Firefox

 , summernote,


0

1

Недавно внедрил в проект онлайн-редактор текста Summernote

https://summernote.org/

И теперь выяснилась такая проблема. Оказывается, в Chromium, при клике на картинку, отображается всплывающее меню настройки параметров картинки. А в Firefox 60.6.1 ESR такого меню не появляется, и поэтому настроить параметры картинки невозможно.

Пытаюсь найти решение проблемы в рунете и англонете - такое впечатление, что ни у кого такой же проблемы не возникало.

Можно ли как-то обойти проблему? Например вызывать окно настройки при клике на кастомную кнопку? Как это сделать?

★★★★★

Ответ на: комментарий от Xintrea

А что, если у заказчика ESR как корпоративный стандарт?

Плохо. Но не страшно. Можно написать свой костыль. Там при клике на картинку, срабатывает условие и элемент - становится «display: block», а по умолчанию «display: none;».

Можно написать небольшой скрипт, который будет при клике на картинку в посте, выставлять «display: block», например классу «note-image-popover». Возможно ещё нужно будет поиграть с позиционированием элемента.

th3m3 ★★★★★
()
Ответ на: комментарий от Xintrea

Вообще, попробуй вставить изображение и в консоли Firefox 60.6.1 ESR пропиши: 

document.getElementsByClassName('note-image-popover')[0].style.display = "block";
Должно отобразиться меню на картинке. Если нет, то скинь, что напишет консоль за ошибку.

th3m3 ★★★★★
()
Последнее исправление: th3m3 (всего исправлений: 1)
Ответ на: комментарий от th3m3

Это можно проверить прямо на главной странице сайта https://summernote.org/.

По команде в консоли ничего не происходит: ни если выделить картинку, ни если картинка не выделена. Только в консоль пишется «block».

Еще наблюдение: при выделении картинки мышкой в консоль валится ошибка: ReferenceError: event is not defined

Xintrea ★★★★★
() автор топика
Последнее исправление: Xintrea (всего исправлений: 1)
Ответ на: комментарий от th3m3

У них там сжатая версия скрипта. На полной версии скрипта ошибка «ReferenceError: event is not defined» происходит тут:

ImagePopover.prototype.update = function (target) {
    if (dom.isImg(target)) {
        var pos = dom.posFromPlaceholder(target);
        var posEditor = dom.posFromPlaceholder(this.editable);
        this.$popover.css({
            display: 'block',
            left: this.options.popatmouse ? event.pageX - 20 : pos.left, // <!-- Вот тут ошибка
            top: this.options.popatmouse ? event.pageY : Math.min(pos.top, posEditor.top)
        });
    }
...

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от Xintrea

У меня нет Firefox 60.6.1 ESR, чтобы затестить. Поэтому, всё приблизительно.

Если ошибка действительно в том месте, а то что выше - срабатывает, это значит, что элемент показывается, но возникает проблема с его позиционированием.

А вообще, на сайте немного другой код, через CloudFlare https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.min.js: 

this.$popover.css({
	display:"block",
	left:this.options.popatmouse?event.pageX-20:e.left,
        top:this.options.popatmouse?event.pageY:Math.min(e.top,o.top)}
Может так сработает?

Либо можно прописать постоянные значения для left и top.

th3m3 ★★★★★
()
Ответ на: комментарий от th3m3

Кароч, у них банально некорректный код.

В функцию приходит target, а event брать неоткуда. Все остальные функции в большинстве своем имеют параметр event.

Заменяем

event.pageX
event.pageY

на 
target.pageX
target.pageY


И все работает.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от Xintrea

Удивительно, что в других версиях Firefox и Chrome - работает.

th3m3 ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development