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


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

مقدمه‌ای بر ویرایشگرهای WYSIWYG




قبل از شروع، بیایید کمی درباره مفهوم ویرایشگرهای WYSIWYG صحبت کنیم. این نوع ویرایشگرها، همانطور که از نامشان پیداست، به کاربران اجازه می‌دهند متن خود را همانند یک برنامه واژه‌پرداز مانند Word یا Google Docs ویرایش کنند. یعنی، کاربر می‌بیند همان چیزی را که در خروجی نهایی خواهد دید، در حین ویرایش. این ویژگی، فرآیند وارد کردن محتوا را بسیار ساده‌تر و کاربرپسندتر می‌کند، مخصوصاً برای کاربرانی که با HTML یا کدهای برنامه‌نویسی آشنایی ندارند.

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




در بازار، چندین ویرایشگر متن رایگان و پرکاربرد وجود دارد، از جمله CKEditor، TinyMCE، Quill و Summernote. هر کدام ویژگی‌ها و امکانات خاص خودشان را دارند، اما در این مقاله، قصد دارم از TinyMCE برای آموزش استفاده کنم؛ زیرا یکی از محبوب‌ترین، قدرتمندترین و در عین حال آسان برای نصب است.

گام اول: افزودن فایل‌های ضروری




برای راه‌اندازی TinyMCE، اولین قدم، افزودن فایل‌های مربوطه است. بهترین راه، استفاده از CDN (Content Delivery Network) است که به راحتی و سریع می‌توانید این اسکریپت‌ها را در پروژه خود وارد کنید.
در قسمت `<head>` فایل HTML، کد زیر را قرار دهید:
html  


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

این خط، فایل JavaScript مربوط به TinyMCE را بارگذاری می‌کند و امکان استفاده از آن را در صفحه می‌دهد.

گام دوم: ایجاد Textarea و فعال‌سازی ویرایشگر




حالا باید یک عنصر `<textarea>` در صفحه ایجاد کنید و سپس با JavaScript، آن را به ویرایشگر TinyMCE تبدیل کنید. برای مثال:
html  


<textarea id="myeditor"></textarea>

در انتهای صفحه، یا در فایل جاوااسکریپت خود، کد زیر را قرار دهید:
javascript  


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: 'undo redo | formatselect | bold italic backcolor | \


            alignleft aligncenter alignright alignjustify | \


            bullist numlist outdent indent | removeformat | help'


});

این کد، ویرایشگر TinyMCE را فعال می‌کند و امکانات مختلفی مانند قالب‌بندی متن، لیست‌ها، لینک، تصویر و ابزارهای دیگر را در اختیار کاربر قرار می‌دهد.

گام سوم: ارسال داده‌های ویرایش‌شده به سرور با PHP




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