Ruslan Brest, rb.labtodo.com
Backend web-developer: CodeIgniter, PHP, MySQL, OpenCart, PrestaShop, MaxSite CMS

WYSIWYG

Неприятные сюрпризы Summernote и Firefox

Почитал баг opencart/opencart#2521 и его фикс. Подумал. Поэкспериментировал.

Офигеваю.

Opera (12.60 на старом движке, под линуксом) генерирует при нажатии кнопки Bold на панели Summernote семантически приятный код со strong:

test <strong>word</strong>

Как оказалось, это - подарок судьбы, а не является нормой. В других браузерах генерируемый HTML исходник может отличаться в зависимости от CSS админки. Это же полный переворот с ног на голову идей семантической вёрстки и отделения представления (внешнего вида) от смысла (чистой семантики исходного кода).

Например, Firefox (v37.0) при исправленном CSS (убранном "text-weight:500" с текста по умолчанию) генерирует

test <span style="font-weight: bold;">word</span>

Кроме мата я на это не могу ничего дипломатичного сказать. Поэтому промолчу. (Нет, ну я не могу! Спан со встроенным стилем?!?! Ну $L@#ь, ну %1z*#ц же!)

Если CSS в админке без исправлений, то на стандартном тексте кнопка Bold в Summernote в FFox нажата и генерируемый код дополняется ещё одним лишним спаном.

В общем, Firefox разочаровал по полной. Даже не Summernote, нет. Хотя теперь я многократно счастливее от того, что сразу ушёл от дурацкого WYSIWYG-а в сторону Markdown.

Если верить сказанному в багрепорте про Chrome, там такой ошибки нет. Боюсь даже Хром запускать, чтобы посмотреть, какой код генерируется.

UPD. Google Chrome: поведение кнопки Bold на панели Summernote, а также внешний вид текста в редакторе не зависит от CSS, в отличие от Firefox. Генерируемый в Хроме код - такой же, как в Firefox (спан со стилем), лишь без глюка кнопки [B] (bold/normal).

Выводы у меня такие

  1. WYSIWYG зло. Однозначно;
  2. Firefox - неприятное открытие. Для меня это событие масштаба "событие года". Совершенно неожиданно. Хотя я и не был фанатом FFox;
  3. Оперу зауважал ещё больше, хотя и думал, что дальше некуда. Старую, разумеется. Новой у линуксоидов вообще ещё нет, а по описаниям виндовс-пользователей, новую даже пробовать не хочется, настолько это не Опера, а чёрт знает что;
  4. IE11 ведёт себя так же, как FFox. (Вот уж "комплимент" для фаерфокса...) Chrome - вроде бы нет;
  5. Код, генерируемый Summernote, может зависеть от CSS админки (!) и от браузера (!). У сторонников семантичекой вёрстки на этом пункте волосы шевелятся и становятся дыбом. Поведение кнопок Summernote зависит от стилей текста в CSS. Это тоже весьма заметный такой ахтунг.

Прикрутил Markdown Extra к Opencart 2.0.1.1

Писать описания стало в разы легче: Summernote (в Opencart 2.x), как и любой другой WYSIWYG HTML редактор (CKEditor в Опенкарт 1.5.x), мне больше мешают, чем помогают. Единственное место, где при работе над контентом изредка возникает желание переключиться с режима исходников на "кнопочки" - вставка ссылки вокруг выделенного текста и может быть ещё списки.

Всё остальное время - это либо яростная борьба с лишними тегами (те же `br`, например), лишними переводами строк, лишними наборами спанов, стилей и шрифтов (иногда удлиняющими исходник втрое), ненужными указаниями размеров шрифта и с массой всего ещё. Н-е-у-д-о-б-н-о. Я очень многое после них исправлял, а иногда делать это приходилось после каждого исправления, потому что у этих WYSIWYG редакторов свой взгляд на форматирование и представление кода.

Тем же, кто работает над контентом не один, добавляется ещё одна головная боль - контролировать единообразие оформления совсем непросто, когда у контентщиков в руках вместо палки-копалки - огромнейшая машина, с которой они плохо управляются и пытаются нажать все кнопки, которые освоили.

Второй большой бонус для меня - сопровождение описаний модулей стало гораздо легче. Не надо хранить три разные версии одного и того же текста в разных форматах и мучиться с синхронизацией исправлений во всех копиях описаний.

Ну и сам по себе Markdown гораздо лаконичней HTML исходников. Работать с ним мне намного удобней.

При этом, что очень важно, ничто не мешает использовать HTML в описаниях, если есть необходимость! То есть переезд с HTML на Markdown в описаниях товаров и категорий оказывается безболезненным. Старые описания показываются как и показывались.

CKeditor в Opencart 2.0 заменили на Summernote

13 августа 2014 г. Ruslan Brest E-commerce » OpenCart » Web development2

В Opencart 2.0 в админ-части заменили WYSIWYG редактор: CKeditor убрали, вместо него теперь используется Summernote.

http://hackerwins.github.io/summernote/

Opencart - тюнинг полей описания (CKeditor)

30 сентября 2012 г. JohnnyVega E-commerce » Howto » OpenCart21

В Opencart для описаний товара, категории, статей и т.д. используются поля описания. Такие, как на рисунке ниже.

CKEditor custom toolbar

Технически это реализовано с помощью компонента CKEditor - свободного WYSIWYG-редактора, который может быть использован на веб-страницах. В поле описания отображается описание продукта, категории, статьи и т.д. в том виде, который вы увидите в магазине. Это основное достоинство WYSIWYG-редактора.

Разработчики CKEditor заложили в своё детище гораздо больше возможностей, чем первоначально доступно в Opencart. Настало время устранить эту историческую несправедливость :)

Далее...