КОДЕКС
Начало работы с TinyMCE
Разработчики повсеместно используют TinyMCE для добавления редактирования текста WYSIWYG на свои веб-сайты и решения. Если вы хотите добавить на сайт HTML-редактор или просто хотите поэкспериментировать с одним из самых популярных в мире редакторов форматированного текста JavaScript, давайте сразу же приступим!
3 способа быстро начать работу с TinyMCE
Сценарий 1: онлайн-редактор
Сценарий 2: сеть доставки контента (CDN)
Сценарий 3: самообслуживание
Небольшое количество JavaScript и HTML полезно в этих сценариях, но наиболее полезным предварительным условием будет просмотр Документации TinyMCE, чтобы увидеть все функции, доступные для TinyMCE.
Хотя Планы TinyMCE действительно включают несколько платных облачных решений, мы сосредоточимся на версии с открытым исходным кодом Free Forever, которая распространяется по лицензии LGPL 2.1.
Давайте начнем
Сценарий 1: онлайн-редактор
Плюсы: легко добавлять решения в закладки и делиться ими.
Минусы: требуется подключение к Интернету.
Один из самых простых способов начать экспериментировать с TinyMCE - использовать онлайн-редактор, например TinyMCE Fiddle или CodePen.
В этом сценарии мы будем использовать TinyMCE Fiddle для обновления TinyMCE, чтобы добавить плагин Word Count. Если установлен плагин Word Count, редактор будет отображать количество слов в нижнем колонтитуле редактора.
Начните с открытия URL-адреса https://fiddle.tiny.cloud/ в вашем браузере.
Шаг 1: добавьте текст wordcount к параметрам подключаемых модулей
Шаг 2: добавьте текст wordcount к параметрам панели инструментов.
Шаг 3: нажмите кнопку Выполнить, чтобы применить изменения.
Теперь вы должны увидеть плагин Word Count, как показано на рисунке 1 в нижнем колонтитуле. В дополнение к Word Count TinyMCE предлагает надежные плагины премиум и с открытым исходным кодом, а также полнофункциональный API для разработки собственных плагинов.
К вашему сведению: брендинг POWERED BY TINY, показанный на рис. 1, можно отключить в параметрах пользовательского интерфейса. Этот брендинг не требуется для платных клиентов, но это рекомендуемый способ включения уведомления об авторстве для бесплатного использования и использования с открытым исходным кодом.
Сценарий 2: Сеть доставки контента (CDN)
Плюсы: использует CDN для быстрой доставки кода TinyMCE.
Минусы: немного сложнее поделиться, чем онлайн-версию
В отличие от сценария 1, где мы использовали онлайн-редактор для изменения кода TinyMCE, в этом сценарии мы будем работать с локальным файлом, который мы создаем.
Начните с открытия вашего любимого текстового редактора или редактора кода.
Шаг 1: создайте новый файл с именем index.html
Шаг 2: скопируйте / вставьте HTML-код ниже во вновь созданный файл index.html.
Шаг 3: сохраните файл index.html и откройте его в веб-браузере.
Теперь вы можете внести те же изменения, что и в Сценарии 1, чтобы добавить плагин Word Count или внести любые другие изменения, которые вам нравятся. Не забудьте посетить список плагинов с открытым исходным кодом, чтобы увидеть все плагины, автоматически включенные в TinyMCE.
Сценарий 3: самообслуживание
Плюсы: полностью автономное решение
Минусы: более сложная настройка и совместное использование
В этом третьем и последнем сценарии вместо ссылки на код TinyMCE из CDN мы загрузим его и будем обслуживать локально.
Начните с загрузки автономного пакета TinyMCE по этой ссылке:
Https://www.tiny.cloud/get-tiny/self-hosted/
На странице загрузки у вас будет возможность загрузить самые последние версии Сообщества или Dev Package, а также предыдущие выпуски. Версия Community готова к производственному использованию, а Dev Package полезен для просмотра полного исходного кода. Любая версия будет работать для этого сценария, но мы будем использовать пакет разработчика.
Шаг 1: создайте новую папку с именем сценарий-3
Шаг 2: разархивируйте содержимое загруженного выше пакета TinyMCE в папку Папка сценарий-3
Шаг 3: на верхнем уровне папки сценарий-3 создайте пустой файл с именем index. html
На этом этапе содержимое папки сценария-3 должно выглядеть как изображение на рисунке 4.
Шаг 4: скопируйте / вставьте приведенный ниже HTML-код во вновь созданный файл index.html.
Шаг 5: сохраните файл index.html и откройте его в браузере.
На данный момент мы не коснулись поверхности того, что возможно с TinyMCE, но мы показали 3 различных сценария, как быстро начать прототипирование с TinyMCE.
Удачного кодирования и наслаждайтесь оставшейся частью вашего путешествия по TinyMCE!
