ویرایشگر متن Editor

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

یرایشگر متن با استفاده از خصوصیات HTML5 و توابع جاوا اسکرسپت به شما امکان میدهد تا بتوانید متن خود را ویرایش کنید.

برای نمایش انواع مختلف به مثالهای زیر توجه کنید.

ساختار

برای ایجاد یک محیط ویرایشگر متن با امکانات ساده میتوانید از این ویراشگر متن استفاده کنید، این ویرایشگر در 4 سطح دسترسی طراحی شده است، که عبارتند از simple بدون هیچ ابزاری، standard با داشتن تعدادی از ویراستارهای متنی و full که تمامی ابزارها در دسترس است، هر چند شما خود نیز میتوانید بر اساس نیاز، میله ابزار مد نظر خود را بچینید.

Simple

LTR

RTL

Standard

اگر از خصوصیت mode استفاده نکنید، این نوع به صورت پیش فرض انتخاب میشود.

LTR

RTL

Full

LTR

RTL

شخصی سازی

برای ساخت میله ابزار شخصی سازی شده، کافیست یکبار ادیتور را به صورت full نمایش داده و کلیه محتوی toolbar را برداشته و بر اساس نیاز، هر گزینه ای که خواستید حذف نمایید.

فیلد مقدار

اگر تمایل دارید، مقدار html در یک input قرار بگیرد، از خصوصیت value-id استفاده کنید. زمانی که ویرایشگر متن بارگزاری میشود، مقدار اولیه را از این ورودی خوانده و هر هنگام تغییری کند مقدار را در آن قرار میدهد.

LTR

RTL

قلمهای پیش فرض

اگر میخواهید قلم های پیش فرض را تغییر دهید از خصوصیت defaultFonts و سپس مقداری مانند زیر دهید.
'Default On Page, Arial, Tahoma'

اندازه قلمهای پیش فرض

اگر میخواهید اندازه قلم های پیش فرض را تغییر دهید از خصوصیت defaultFontsize و سپس مقداری مانند زیر دهید.
'X Small:4px, Small:8px, Medium:12px, Normal:16px, Large:20px, X Large:24px,2X Large:32px,3X Large:48px'

تگ های پیش فرض

اگر میخواهید تگ های پیش فرض را تغییر دهید از خصوصیت defaultTags و سپس مقداری مانند زیر دهید.
'Paragraph:p,Heading 1:h1,Heading 2:h2,Heading 3:h3,Heading 4:h4,Heading 5:h5,Heading 6:h6,Preformat:pre'

پالت رنگ

اگر میخواهید پالت رنگ را تغییر دهید از خصوصیت dfaultColorPicker و سپس مقداری مانند زیر دهید.
'#000000,#333333,#555555'

جدا کننده پاراگراف

اگر میخواهید جدا کننده پاراگراف را تغییر دهید از خصوصیت paragraphSeparator و سپس مقداری مانند زیر دهید.
'p'
'div'

خصوصیت Html

در هر زمان نیاز داشته باشید با استفاده این خصوصیت که توسط جاوا اسکریپت فراخوانی میشود، مقدار html ویرایشگر را خوانده و یا تنظیم کنید.


    <script>
        alert(WN("editor1"].Html);
    </script>


    <script>
        WN("editor1"].Html='<p>Hello!</p>';
    </script>

Dark Mode

اگر میخواهید ادیتور در محیط تاریک باز شود، خصوصیت dark-mode را با مقدار true تنظیم کنید.