چگونه برنامه های یونی را با استفاده از ویرایشگر متن غنی توسعه دهیم؟

ساخت برنامه های Ionic به لطف سازگاری بین پلتفرمی که جعبه ابزار ارائه می دهد، عموما راحت تر است. امروز مال ما آن را توسعه دهید مهندسان فرآیند استفاده از ionic برای ساخت برنامه های React را از طریق ویرایشگر متن غنی توضیح خواهند داد.

بیایید ابتدا در مورد ویرایشگر متن غنی بحث کنیم

یک ویرایشگر متن غنی ویرایشگری است که از گزینه های قالب بندی مانند فونت، رنگ، اندازه، تراز متن، تورفتگی و غیره پشتیبانی می کند. ویرایشگر متن غنی به راحتی متن شما را بدون هیچ گونه مداخله ای به زبان نشانه گذاری فرامتن (HTML) تبدیل می کند.

به همین دلیل، ویرایشگرهای متن غنی معمولاً به عنوان ویرایشگرهای WYSIWYG (آنچه می بینید همان چیزی است که دریافت می کنید) شناخته می شوند و ابزار انتخابی برای اکثر افراد هستند. شرکت های توسعه اپلیکیشن موبایل بیرون وجود دارد.

برای مثال امروز ما استفاده خواهیم کرد ویرایشگر متن غنی Quill. قبل از اینکه مستقیماً وارد آن شویم، بیایید درباره ویرایشگر متن غنی Quill بیشتر بدانیم.

ویرایشگر متن غنی Quill

Quill یک ویرایشگر WYSIWYG رایگان، منبع باز و قابل تنظیم است. این برای وب مدرن ساخته شده است و توسط API ویرایشگر متن غنی طراحی شده است. Quill همچنین از برنامه های کاربردی cross-platform پشتیبانی می کند و آن را به ابزاری مهم برای توسعه دهندگان تبدیل می کند. پیاده سازی ویرایشگر متن غنی در یک برنامه Ionic بسیار آسان است.

برای امروز ما از npm برای استقرار قلم در برنامه Ionic استفاده خواهیم کرد.

مراحل ذکر شده در زیر را دنبال کنید:

مرحله ی 1: دستورات زیر را در پروژه یونی خود اجرا کنید

گام 2: سبک تم bubble.css یا snow.css را به آن اضافه کنید quill.js به global.css

مرحله 3: برای فعال کردن انتخاب متن کد زیر را اضافه کنید global.scss. Ionic به طور پیش فرض انتخاب کاربر را در همه جا غیرفعال می کند.

مرحله 4: واردات QuillModule به app.module.ts

سپس اضافه کنید QuillModule به واردات از NgModule

مرحله 5: واردات QuillModule به طور خاص برای صفحه module.ts

سپس اضافه کنید QuillModule به واردات از NgModule

سپس فقط اضافه کنید به page.html شما و کار شما تمام است. شما می توانید ویرایشگر متن غنی خوب را در برنامه خود مشاهده کنید.

گزینه های پیکربندی Quill Rich Text Editor:

تنظیمات لازم را در QuillModule مطابق شکل زیر تنظیم کنید:

تنظیمات مفید:

• ngModel: یک مقدار و اتصال داده دو طرفه را برای یک فرم مبتنی بر الگو تنظیم کنید
• formControl/formControlName: مقدار و اتصال داده دو طرفه را برای فرم واکنشی تنظیم کنید
• فقط خواندنی: ویژگی Read Only را روی true یا false قرار دهید
• سبک ها: یک شیء سبک تنظیم کنید
• جایگزین: ظرف را روی ظرف تنظیم کنید
• اجباری: درست یا نادرست را برای فیلد مورد نیاز تنظیم کنید. مقدار پیش فرض غلط است
• حداکثر طول: حداکثر طول را تنظیم کنید
• دقیقه طول: حداقل طول را تنظیم کنید
• ضد عفونی کردن: برای پاکسازی HTML، مقدار true یا false را روی Angular DomSanitizer قرار دهید
• ماژول ها: برای پیکربندی/غیرفعال کردن ماژول های quill.
• قالب: این قالب 4 گزینه “HTML”، “object”، “JSON” و “text” را ارائه می دهد. ویرایشگر “HTML” را به عنوان فرمت پیش فرض تنظیم کرد.

گزینه های قالب بندی انواع بازگشت:

– html = رشته html

– شی = شیء کار قلم

– json = عملیات کویل json

– متن = متن ساده

ویرایشگر تمام تنظیمات را به صورت پیش فرض تنظیم می کند.

در اینجا ماژول ها و نتایج مورد نظر را همانطور که در زیر نشان داده شده است اضافه کرده ام:

پیکربندی مثال – 1:

پیکربندی مثال – 2:

پیکربندی مثال – 3:

پیکربندی مثال – 4:

پیکربندی مثال – 5:

پیکربندی فوق عملکرد زیر را ارائه می دهد:

• فوق العاده / زیرنویس
• تورفتگی / تورفتگی
• جهت متن

• منوی کشویی سفارشی سازی اندازه فونت و هدر
• تمام ویرایش ها را پاک کنید

Quill Rich Text Editor رویدادهای نشان داده شده در زیر را ارائه می دهد:

• onContentChanged: زمانی که متن به روز می شود، تماس گرفته می شود
• onSelectionChanged: هنگامی که انتخاب به روز می شود، فراخوانی می شود
• onEditorChanged: هنگامی که متن یا انتخاب تغییر می کند، فراخوانی می شود
• onFocus: زمانی فراخوانی می شود که ویرایشگر فوکوس داشته باشد
• onBlur: زمانی که ویرایشگر تار می شود، فراخوانی می شود

بنابراین، با استفاده از مراحل، پیکربندی و روش های زیر، می توانید به راحتی Quill Rich Text Editor را در برنامه های Ionic خود پیاده سازی کنید.

نتیجه

امیدواریم اطلاعات ذکر شده در این وبلاگ برای شما مفید بوده و به راحتی قابل پیگیری باشد. اگر بله، لطفا آن را با همکاران خود که ممکن است از آن بهره مند شوند به اشتراک بگذارید.

اگر سؤالی در مورد برنامه‌های ionic دارید، می‌توانید آن‌ها را در زیر نظر دهید و ما در اسرع وقت با شما تماس خواهیم گرفت. علاوه بر این، اینجا مستندات ابزارهای مورد استفاده امروز است و کلیک کنید اینجا برای پشتیبانی مربوط به npm

پست چگونه با استفاده از یک ویرایشگر متن غنی برنامه های یونی توسعه دهیم؟ اولین بار در DEV IT Journal ظاهر شد.