اسکریپت نحوه اضافه کردن ویرایشگر متن WYSIWYG با PHP و JavaScript


در دنیای امروز، ویرایشگرهای متن WYSIWYG (What You See Is What You Get) نقش بسیار مهمی در طراحی و توسعه وب‌سایت‌ها و برنامه‌های تحت وب ایفا می‌کنند. این ویرایشگرها، به کاربران اجازه می‌دهند تا بدون نیاز به دانش عمیق در کد نویسی، محتواهای متنی خود را به صورت تصویری و با امکانات گرافیکی ویرایش کنند. در این مقاله، قصد داریم به صورت کامل و جامع، نحوه افزودن یک ویرایشگر متن WYSIWYG به پروژه‌های PHP و JavaScript را بررسی کنیم.

چرا از ویرایشگرهای WYSIWYG استفاده کنیم؟




قبل از شروع، بیایید نگاهی بیندازیم به دلایل استفاده از این ابزارهای قدرتمند. با بهره‌گیری از ویرایشگرهای WYSIWYG، فرآیند تولید محتوا بسیار ساده‌تر و سریع‌تر می‌شود. کاربران، می‌توانند متن‌هایی با استایل‌های مختلف، لیست‌ها، لینک‌ها، تصاویر و جدول‌ها را بدون نیاز به دانش فنی، به راحتی اضافه و ویرایش کنند. این ابزارها همچنین باعث افزایش تعامل و رضایت کاربران می‌شوند، زیرا تجربه کاربری به مراتب بهبود می‌یابد.

انتخاب بهترین ویرایشگر متن




در بازار، چندین ویرایشگر متن وجود دارد که در کنار سهولت پیاده‌سازی، امکانات فراوانی ارائه می‌دهند. برخی از محبوب‌ترین آن‌ها عبارتند از:
- TinyMCE

- CKEditor

- Quill

- Summernote
در این مقاله، تمرکز ما بر روی نحوه افزودن و استفاده از TinyMCE است، زیرا یکی از قدیمی‌ترین و محبوب‌ترین ویرایشگرهای متن است که به راحتی قابل نصب و پیکربندی است.

مرحله اول: آماده‌سازی محیط توسعه




برای شروع، نیاز دارید به یک محیط PHP بدون مشکل، که معمولاً شامل یک سرور محلی مانند XAMPP یا WAMP است. پس از راه‌اندازی، یک فایل HTML جدید ایجاد کنید و آن را برای افزودن ویرایشگر آماده کنید.

مرحله دوم: افزودن فایل‌های TinyMCE




در ابتدای کار، باید فایل‌های مورد نیاز TinyMCE را وارد پروژه کنید. بهترین روش، استفاده از نسخه CDN است، زیرا نیاز به دانلود و نصب فایل‌ها ندارد و به‌روزرسانی‌ها سریع‌تر انجام می‌شود.
در بخش `<head>` فایل HTML، کد زیر را قرار دهید:
html  


<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

این خط، نسخه‌ای از TinyMCE را از سرور CDN بارگذاری می‌کند. حال، باید یک `<textarea>` در صفحه خود قرار دهید که این ویرایشگر روی آن فعال می‌شود:
html  


<textarea id="myEditor"></textarea>

مرحله سوم: فعال‌سازی و پیکربندی TinyMCE




در قسمت پایین صفحه، باید کد JavaScript را اضافه کنید تا ویرایشگر فعال شود. برای این کار، از تابع `tinymce.init()` استفاده می‌کنیم. نمونه کد زیر، ویرایشگر را روی `<textarea>` با شناسه `myEditor` فعال می‌کند:
javascript  


<script>


  tinymce.init({


    selector: '#myEditor',


    height: 300,


    menubar: true,


    plugins: [


      'advlist autolink lists link image charmap print preview anchor',


      'searchreplace visualblocks code fullscreen',


      'insertdatetime media table paste code help wordcount'


    ],


    toolbar...  ← ادامه مطلب در magicfile.ir