Як встановити та використовувати редактор TinyMCE у 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. Я хотів би почути ваші думки та пропозиції у розділі коментарів нижче.
Пов’язані статті
- Trix – редактор WYSIWYG з відкритим кодом для веб-сайтів
- Створення багатомовного веб-сайту в PHP за допомогою Laravel Framework
- Як використовувати функцію декількох з’єднань баз даних Laravel на веб-сайті