Як встановити та використовувати редактор TinyMCE у Laravel

Останнє оновлення Лют 12, 2025

Зміст

Встановіть та використовуйте TinyMCE Editor у Laravel

Раніше я опублікував статтю Як користуватися CKEditor у Laravel. Посилаючись на цю статтю, багато читачів просили написати допис про те, як користуватися редактором TinyMCE у Laravel. TinyMCE також є одним з популярних редакторів HTML WYSIWYG, таких як CKEditor. У цій статті ми вивчаємо, як встановити та використовувати редактор TinyMCE у додатку Laravel.

Під час роботи в Інтернеті іноді нам потрібно зберігати довгий вміст, зображення та розширені фрагменти у базі даних. Цей вміст може бути біографією, підсумком товару, вмістом сторінки тощо. Усі ці формати вимагають використання різних тегів HTML. Тег текстового поля HTML не є зручним для написання вмісту, включаючи елементи HTML. Тут слід використовувати веб-текстові редактори.

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

Редактор TinyMCE можна безкоштовно використовувати з обмеженими інструментами. Якщо ви хочете скористатися своїми плагінами преміум класу, будь ласка, ознайомтеся з ціновою сторінкою.

Встановіть та використовуйте TinyMCE Editor у 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');

У наведеному вище коді ми використовуємо функцію компіляції активів (змішування) 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