MediumEditor – Встроенная панель инструментов для редактирования текста в Интернете

Все знают Medium.com и их чрезвычайно популярная платформа для блогов. Они пересмотрели множество идей в мире дизайна, и вы можете найти множество учебных пособий, которые научат вас, как клонировать свои проекты.

Один инструмент, который вам может понравиться, это MediumEditor плагин основанный на чистом JavaScript. Он позволяет добавить собственный встроенный текстовый редактор на любую страницу того же дизайна, что и сайт блога Medium. Таким образом, вы можете позволить читателям выделять жирным шрифтом, курсивом, добавлять ссылки, заголовки и почти все остальное, с помощью простой визуальной панели инструментов.

Обратите внимание, что этот проект никоим образом не связан с Medium, поэтому он не является официальным плагином.

Он был создан фанатом сайта и тем, кто любит стиль дизайна Medium. Вы можете узнать больше о настройке на GitHub который хранит весь код, совершенно бесплатно для использования.

Читайте также: Лучшие инструменты веб-аннотации и разметки

Редактор работает во всех основных браузерах, включая текущую версию Microsoft Edge и IE. Он даже поддерживает более старые версии Internet Explorer, начиная с IE7. Сумасшедший!

Установка очень проста: вы можете извлечь все файлы напрямую через npm или Bower, или даже использовать бесплатный онлайн CDN, такой как JSDelivr,

Затем вы добавите файлы CSS и JavaScript в заголовок вашего сайта. Очень просто.

Оттуда вы вызываете редактор с одной строкой кода:

var editor = new MediumEditor (‘. editable’);

Вы можете передать список элементов страницы, которые должны работать только с редактором, или разрешить его запуск по всей странице.

Вероятно, наиболее практичным использованием этого плагина является создание какого-либо WYSIWYG-редактора для веб-приложения.

Он не обрабатывает передачу данных между сервером и клиентом, поэтому вам нужно создать эту логику самостоятельно. Тем не менее, этот плагин намного проще, чем начинать с нуля.
Если вы прокрутите до самого низа MediumEditor демонстрационная страница вы также найдете список расширений, которые вы можете протестировать. К ним относятся полное редактирование уценкинаряду с кнопками в стиле Medium и другими интерфейсными функциями.

Этот плагин настоятельно рекомендуется для всех поклонников Medium, которые хотят скопировать часть своего UX в другой проект.

Читайте также: Как увеличить изображения, как средний