Как установить и использовать редактор TinyMCE в Laravel

Последнее обновление Июл 12, 2021

Содержание

Установите и используйте редактор TinyMCE в Laravel

Ранее я публиковал статью Как использовать CKEditor в Laravel. Ссылаясь на эту статью, многие читатели просили написать пост о том, как использовать редактор TinyMCE в Laravel. TinyMCE также является одним из популярных редакторов WYSIWYG HTML, таким как CKEditor. В этой статье мы изучаем, как установить и использовать редактор TinyMCE в приложении Laravel.

При работе в Интернете иногда нам нужно хранить в базе данных длинный контент, изображения и расширенные фрагменты. Это может быть биография, краткое описание продукта, содержимое страницы и т.д. Все эти форматы требуют использования разных HTML-тегов. Тег textarea HTML неудобен для пользователя, когда дело доходит до написания контента, включая элементы HTML. Здесь вам следует использовать веб-текстовые редакторы.

TinyMCE и CKEditor – популярные редакторы. Выбор за вами. Оба редактора WYSIWYG (то, что вы видите, то и получаете) легковесны и отлично работают с веб-приложениями.

Редактор TinyMCE можно использовать бесплатно с ограниченным набором инструментов. Если кто-то хочет использовать их премиум-плагины, пожалуйста, проверьте их страницу с ценами.

Установите и используйте редактор TinyMCE в Laravel

Чтобы интегрировать редактор TinyMCE в Laravel, я собираюсь использовать пакет npm для TinyMCE. Laravel предоставляет встроенную поддержку npm. Все, что вам нужно, чтобы убедиться, что Node.js установлен в вашей системе. Откройте терминал в корневом каталоге вашего проекта и запустите команду, чтобы сначала установить зависимости npm.

npm install

После этого установите TinyMCE с помощью npm командой:

npm i tinymce

По завершении, если вы перейдете в каталог node_modules / tinymce, вы увидите несколько файлов и папок. Нам нужно скопировать некоторые из них и поместить в «общедоступный» каталог. Для этого откройте webpack.mix.jsфайл и добавьте в него приведенный ниже код.

webpack.mix.js

....
....
mix.copyDirectory('node_modules/tinymce/icons', 'public/node_modules/tinymce/icons');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/node_modules/tinymce/plugins');
mix.copyDirectory('node_modules/tinymce/skins', 'public/node_modules/tinymce/skins');
mix.copyDirectory('node_modules/tinymce/themes', 'public/node_modules/tinymce/themes');
mix.copy('node_modules/tinymce/jquery.tinymce.js', 'public/node_modules/tinymce/jquery.tinymce.js');
mix.copy('node_modules/tinymce/jquery.tinymce.min.js', 'public/node_modules/tinymce/jquery.tinymce.min.js');
mix.copy('node_modules/tinymce/tinymce.js', 'public/node_modules/tinymce/tinymce.js');
mix.copy('node_modules/tinymce/tinymce.min.js', 'public/node_modules/tinymce/tinymce.min.js');

В приведенном выше коде мы используем функцию компиляции активов (Mix) Laravel.

Затем запустите команду, которая копирует файлы и папки из node_modules / tinymce в каталог public.

npm run dev

Теперь мы готовы использовать редактор TinyMCE в файле лезвия. Включите tinymce.jsфайл и вызовите редактор следующим образом.

<textarea class="description" name="description"></textarea>
<script src="{{ asset('node_modules/tinymce/tinymce.js') }}"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

Теперь вы должны увидеть на своей странице редактор TinyMCE, как показано на скриншоте ниже.

Установите TinyMCE с помощью CDN

До сих пор мы видели, как установить редактор TinyMCE с помощью npm, что является рекомендуемым способом. Другой способ использовать TinyMCE – через CDN. Используя CDN, вам не нужно хранить файлы библиотеки на своем сервере. Он напрямую включает необходимые файлы с размещенного сервера.

Пользователь может использовать TinyMCE через CDN следующим образом.

<textarea class="description" name="description"></textarea>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

Это оно! Надеюсь, вы понимаете, как установить и использовать редактор TinyMCE в Laravel. Я хотел бы услышать ваши мысли и предложения в разделе комментариев ниже.

Статьи по Теме

Источник записи: artisansweb.net