JavaScript

ایجاد یک ویرایشگر متن سازگار با تمام مرورگرها [JavaScript]

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

 

در این مطلب به شما خواهیم گفت که چگونه یک ویرایشگر سازگار با تمام مرورگرها طراحی کنید و در فرم هایتان از آن استفاده کنید.   مرورگرهایی که پشتیبانی می شوند:

  • Opera
  • Safari
  • IE9
  • Firefox
  • Chrome

متدهای اصلی DHTML که در این ویرایشگر استفاده شده اند،به شرح زیر است:

  • execCommand این متد،یک دستور را در سند فعلی،در اجزا انتخاب شده فعلی و یا در رنج مشخصی اجرا می کند
  • getElementById با استفاده از صفت id یک مرجع را به اولین شی ارجاع می دهد

دستوراتی که در این اسکریپت قابل استفاده هستند:

  • Bold تبدیل متن انتخاب شده،به کلفت یا برعکس
  • Underline تبدیل متن انتخاب شده به زیرخط دار یا برعکس
  • Italic تبدیل متن انتخاب شده به حالت کج یا برعکس
  • JustifyCenter سطرهای بلاک انتخاب شده را در وسط مرتب می کند
  • JustifyLeft سطور را به سمت چپ متمرکز می کند
  • JustifyRight سطور را به سمت راست متمرکز می کند
  • Indent تو رفتگی ایجاد می کند
  • Outdent بیرون رفتگی ایجاد می کند
  • Undo برگشت به حالت قبل
  • Redo اعمال آخرین عمل قبل از برگشت

مشخصه های اصلی مورد استفاده:

  • innerHTML تعیین یا بازیابی HTML ما بین تگ های شروع و پایان یک شی
  • designMode تنظیم یا بازیابی یک مقدار که مشخص کننده قابل ویرایش بودن سند است

تصاویر دکمه ها را از اینجا دریافت کنید

فایل CSS

فایل HTML

فایل Javascript

برای اطلاعات بیشتر می توانید کامنت ها را ببینید

فایل PHP

قسمت مهم فایل php تابع phpSafe است.با این تابع مطمئن خواهیم بود که علامت های نقل قول به صورت مناسب نمایش می یابند. برای اطلاعات بیشتر می توانید کامنت ها را ببینید.

تمام فایل ها را در یک پوشه ذخیره کنید و در سرور خود آپلود نمایید.می توانید با کد بازی کنید و امکانات و دکمه های بیشتری به آن اضافه کنید.در زیر منابع کاملی معرفی می کنیم:

امیدوارم استفاده کرده باشید

3 Comments

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *