Актуализации: От лятото на 2019 г. вече не съм във Froala, така че тази статия може да не е актуална, когато я прочетете.

През последните 4 години имах възможността да работя в „един от най-добрите редактори за богат текст“ в днешно време. Всичко започна малко като прототип и отне по-малко от една година, докато Froala стана най-добрият избор на WYSIWYG HTML редактор и първата алтернатива на съществуващите решения като TinyMCE и CKEditor. В момента десетки хиляди разработчици от хиляди компании, включително много от Fortune 500, използват Froala Editor в своите приложения.

Нека да разгледаме какви технологии използваме там, за да създадем Froala Editor и да го предоставим на вас.

пътуване във времето.

  • През януари 2014 г. пуснахме първата версия на Froala Editor. Основно е изграден около метода document.execCommand, който позволява на разработчиците да прилагат форматиране на форматиран текст към contentEditable елемент.
  • През лятото на 2014 г. първоначалната архитектура на редактора вече не е подходяща за лесно добавяне на нови функции и ние сме изправени пред всякакви ограничения за всяка нова функция, върху която работим. След като се опитваме да скрием нещата, ние вземаме най-доброто решение да пренапишем всичко. Последваха много кафе и страхотни нощи на кодиране.
  • Една година по-късно версия 2 на Froala Editor излиза като бета, а през 2016 г. добавяме десетки нови функции. Новата версия вече не използва метода document.execCommand, а новият начин за извършване на редакции ни даде възможност да иновираме добавяне на нови функции, които не са били виждани преди в уеб редактор.
  • 2017 — фронтенд библиотеките стават все по-популярни. Всички питат за Angular, React и малко след това идват Vue, Aurelia и Ember. Работата върху един от най-популярните редактори ни позволява бързо да се запознаем с новостите във FrontEnd и да се учим, като работим с разработчици по целия свят.
  • 2018 изглежда като вълнуваща година за инструментите на Javascript, както и за редактора Froala

редактиране на съдържание.

Виждам ден след ден много разработчици да се оплакват колко лошо и грозно е [contenteditable]. Започва с „момчетата от Medium“ 👋, последвани от „водещи разработчици на CKEditor“ и други разработчици, които туитват ежедневно за това, въпреки че виждат само върха на айсберга. Въпреки че трябва да призная, че ме подлудява много пъти, вярвам, че това е един от най-мощните ресурси, които имаме за редактиране, и ако го използвате внимателно, резултатите са невероятни.

Основните проблеми около contenteditable не идват от това как се държат браузърите, а от това какво правят разработчиците. Ако има грешка, най-вероятно вината не е в браузъра, а има човек, който не е прочел документите изцяло или използва експериментална функция на браузъра. Тук във Froala използваме contenteditable само като вход и начин за събиране на информация от потребителя. След това превеждаме входа във вътрешни действия, които гарантират съвместимост между различни браузъри. Предотвратяваме чувствителните действия по подразбиране, направени там, като enter, backspace или прилагане на форматиране, и оставяме редактора на Froala да се справи с тях със своите методи.

Без значение какъв редактор решите да използвате, всички те разчитат на contenteditable, за да свършат упоритата работа в браузъра и това, което сме изградили върху това, доказва колко мощ се крие зад тази функция на браузъра. Facebook го използва, Google изгради Google Docs и GMail около него и почти всяко едно приложение, в което виждате мигащ курсор, има значителна вероятност да пишете в редактируемо поле.

код. тест. изграждане. внедряване

Преди кодът да стане достъпен за вас на нашия уебсайт, Github, NPM или Bower, трябва да извървите дълъг път. Всичко започва от нашите MacBook, където правим основната разработка с помощта на браузъра Chrome. Част от екипа използва Atom, за да напише кода, докато други са фенове на TextMate.

След внедряването на дадена функция, тя стига до фазата на тестване, където използваме хиляди модулни тестове, BrowserStack, виртуални машини, Xcode и други физически устройства, за да осигурим съвместимост между различни браузъри. За най-добро изживяване при редактиране използваме физически устройства с iOS и Android вместо симулатори, защото докосването винаги ще се усеща различно от щракването.

Целият код е изграден с помощта на GruntJS. Той е отговорен за свързването на модулите заедно, конвертирането на LESS в CSS и създаването на готови за използване примери, които предоставяме заедно с изходните кодове на редактора. Освен това, ние използваме линтери, за да гарантираме високо качество на кода.

След това кодът отива във вътрешните хранилища и Travis го внедрява автоматично в нашето хранилище за разработка само ако премине тестовете на кода. Сега кодът е там в Github и можете да извлечете и да играете с него.

Веднъж месечно събираме цялата работа от последния месец и я опаковаме в издание. Преди издание провеждаме няколко ръчни теста, които не можахме да автоматизираме, събираме регистъра на промените и маркираме версията. Сега новата версия на редактора стига до нашия уебсайт, Bower и NPM. След това актуализираме всички предни плъгини, които предоставяме, като ги тестваме и маркираме също.

Ура! Нова версия е готова! Пляскайте за това! 👏👏👏