В процессе создания CMS я понял что ну уж очень не хватает нормального WYSIWYG редактора. Да, можно было бы использовать уже имеющиеся классические Tiny, JCE и т.п...
Но это, во первых, тащить через CDN (не люблю я этот метод), либо снова внедрять в сайт в виде расширения, настраивать взаимодействие с всей CMS... Опять же ограничения всякие...ну и чужие они!
Вот тут я, грешен, что уж, впервые обратился за помощью к продукту восточных товарищей. Нейронка помогла создать основу для редактора на JS и указала как подключить к проекту CMS.
Редактор претерпел ряд изменений, сначала было так:
- банально написать текст, работало корректно отступление, картинки вставлялись только посредством указания ссылки. Можно было использовать выравнивание "вправо", центр, "влево", делать "толстым" или "наклонным", "подчеркнутым" или "зачеркнутым" шрифт, выделять цветом фон текста или сам текст, но опять же только посредством вставки кода цвета.
- Дальше добавил маркированные и нумерованные списки, заголовки (H2 и H3). Создание таблицы. Стащил из функции комментариев CMS возможность вставки эмодзи.
- Позже добавлены функции редактирования ссылки с
блэкжеком и...в общем, можно просто указать ссылку, можно выбрать из контента сайта, создавать ссылку в виде иконок. Создана возможность работы с якорями.
- Потом прикрутил возможность загружать свое изображение и задавать атрибуты. Прикреплять файлы для загрузки. Вставлять видео из популярных хостингов.
Ну и многое другое...
в общем, что имеем теперь?
в общем, что имеем теперь?
4SLASeditor
1383 строки и ноль зависимостей ver.0.3
Это не очередная монструозная тулза на React. Это просто файлик, который подключается одним скриптом и работает сразу. jQuery не зовёт, npm install не просит, CDN не подключает.
Что он умеет (спойлер: дофига)
1. Текст без мусора
Всё стандартное: жирный (кнопка B), курсив (кнопка I), подчёркнутый (U), зачёркнутый (S). Можно менять цвет текста и фона — кликнул на квадратик, выбрал из палитры, готово. Заголовки H2 и H3 тоже есть. Если нужно что-то процитировать — нажал на кавычку, и текст красиво оформился.
2. Списки и как их верстать
Маркированный список (просто точечки) и нумерованный (с цифрами) — обе кнопки на тулбаре. Текст можно выровнять как душе угодно: влево, по центру, вправо или по ширине. Для блога — самое то.
3. Картинки: закинул и готово
Можно загрузить новую картинку (нажал кнопку — выбрал файл). Можно просто взять мышкой фотку из папки на компьютере и перетащить прямо в редактор — он сам загрузит и вставит. Можно даже просто ссылку на картинку из интернета вставить.
То же самое с файлами — PDF, ZIP, документы. Всё через ту же кнопку.
4. Видео, ссылки, якоря
Вставлять ссылки — вообще база. Выделил текст, нажал Ctrl+K, вставил URL. Есть и якоря — если нужно, чтобы по ссылке внутри статьи прыгать.
Видео тоже вставляется: ссылку с YouTube или VK дал — редактор сам подставит плеер. Для блога незаменимая вещь.
5. Таблицы
Да-да, обычные таблицы с рядами и колонками. Кнопка на тулбаре, нажал — и можно строить расписание, сравнения или просто для красоты.
6. Код с подсветкой
В редакторе есть кнопка **</>** — она открывает окошко, где можно вставить код. Выбираешь язык (PHP, JS, HTML, CSS, SQL, Python, Java, C++, C#, Go, Ruby, JSON, XML, Bash, Markdown — 15 штук), и код сразу подсвечивается. Без всяких внешних библиотек, своими руками через регулярки.
7. Эмодзи — палитра прямо в редакторе
Можно открыть палитру и ткнуть в любой смайлик — он вставится в текст. Для оживления статей — самое то.
8. Режим HTML
Если хочется покопаться в исходниках — кнопка **<> HTML** переключает редактор в режим кода. Там можно поправить теги руками, а потом переключиться обратно в WYSIWYG. И обратно тоже работает — всё синхронизируется.
9. Счётчик слов
Внизу редактора полоска, где написано "127 слов · 843 символа". Бесполезная штука, пока не начинаешь соблюдать лимиты на мета-описания. А так — приятно видеть, сколько написал.
10. Ctrl+Z и Ctrl+Y работают
Отмена и повтор — да, работают. Потому что без них вообще никак.
11. Полноэкранный режим
Если нужно сосредоточиться на тексте — нажал на кнопку, и редактор развернулся на весь экран. Ничто не отвлекает.
А что под капотом?
А под капотом — чистый JavaScript, одна класса `SimpleEditor` и куча событий. Когда пользователь печатает, редактор следит за изменениями и автоматом синхронизирует всё в скрытое поле textarea. Когда форма отправляется — контент уже там, можно сохранять на сервер.
Кстати, copypaste из Word и браузера — редактор чистит весь мусорный HTML, оставляя только чистый текст и форматирование. Никаких лишних `style="font-family:'Times New Roman'"` не проскочит.
Кому это надо?
Редактор живёт в 4SLAS CMS — это моя CMS для блога. Но если вы хотите воткнуть его в свой проект — берите, он отдельно лежит на GitHub:
Там же инструкция по подключению: скопировал JS → добавил div → вызвал `new SimpleEditor()`. Всё.
Резюме
Кнопок на тулбаре — 30 штук. Кода внутри — 1383 строки. Зависимостей — 0. А главное — это мой редактор, я знаю каждый его уголок и могу допилить любую фичу за вечер.
Хотите? Берите, не жалко. Open source, однако.
Комментарии
Для комментирования авторизуйтесь на сайте или используйте ВКонтакте