آموزش استفادهٔ از کتابخانهٔ writer.js

نوشتن یک ویرایشگر تحت وب با استفادهٔ از جاوااسکریپت مدت‌ها ذهن من رو مشغول خودش کرده بود. تا اینکه بعد از مدت‌ها راه ایجاد یک ویرایشگر متن رو پیدا کردم و ازش برای چند تا از پروژه‌های خودم استفاده کردم. تا اینکه تصمیم گرفتم برای راحتی کار خودم و استفادهٔ دیگران از این ویرایشگر ساده و سبک آن را به حالت یک کتابخانه در بیاورم.

چون دیدم در اینترنت سوالات مختلفی در این موضوع پرسیده شده، گفتم بد نیست اول دربارهٔ اینکه «چجوری می‌تونیم یک ویرایشگر متن در جاوااسکریپت بنویسیم» صحبت کنم.

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

<h1>title</h1>
or
# title

نکته: ویرایشگرهای markdown از نوع دوم هستند.

از بین این دو دسته من برای writer.js حالت اول یعنی WYSIWYG رو به دلیل راحت‌تر بودن کار باهاش و تجربهٔ کاربری بهتر انتخاب کردم. اما برگردیم به سوالمون..! چجوری یک ویرایشگر ویزی‌ویگ بنویسیم؟
یکی از قابلیت‌های کمتر دیده شده که احتمال داره اصلا اسمش رو نشنیده باشید، designMode هست. فکر می‌کنم از اسمش مشخص است حالت طراحی را on یا off می‌کند. نحوهٔ استفادهٔ از آن به این شکل است:

document.designMode = &quoton&quot

اگر این کد را اجرا کنید،‌ کل صفحهٔ شما در حالت طراحی قرار می‌گیرد. یعنی قابل ویرایش است. ما که نمی‌توانیم برای ایجاد یک ادیتور یا همان ویرایشگر از نوع ویزی‌ویگ از یک textarea استفاده بکنیم. چرا که می‌خواهیم برخی کدها اجرا شوند. یعنی اگر متنی را داخل h1 قرار دادیم، آن متن قرار است به این حالت نمایش داده شود:

عنوان

نه به این حالت:
<h1>عنوان</h1>

به همین دلیل از iframe استفاده خواهیم کرد. و با استفادهٔ از مقدار designMode آن را قابل ویرایش خواهیم کرد. در ادامه تابع دیگری به نام execCommand داریم که از آن برای قابلیت‌های ویرایشگر مثل bold کردن متن استفاده می‌کنیم. فکر می‌کنم خودتان با تحقیق بیشتر، می‌توانید یک نمونهٔ ساده از ویرایشگر متن را بسازید.

اما بد نیست به اصل موضوع مقاله یعنی چگونگی و چرایی استفاده از writer.js هم بپردازیم.

چرا باید از writer.js استفاده کنیم؟

پیش نمایش: writer.js (alirezakefayati.github.io)

همانطور که می‌دانید ویرایشگرهای تحت وب مختلفی با استفاده از جاوااسکریپت موجود هستند. برای مثال می‌توان به ckeditor و tinyMCE اشاره کرد. این ویرایشگرها امکانات زیادی را به طور رایگان و غیررایگان در امکان کاربران قرار داده‌اند. اما برتری writer.js نسبت به آنها چیست؟ writer.js بسیار سبک است و ساختاری ساده دارد. استفادهٔ از آن پیچیدگی و دردسری برای برنامه‌نویس ندارد و از دو زبان انگلیسی و فارسی پشتیبانی می‌کند. writer.js سایت شما را کند نخواهد کرد و بسیار کم‌حجم است. همچنین حداقل امکانات را به ساده‌ترین شکل برای شما فراهم کرده است. پس حتی برای یک بار هم که شده از writer.js استفاده کنید و لذت ببرید.

چطور از writer.js استفاده کنیم؟

یکی از برتری‌های writer.js نسبت به دیگر ادیتورها سادگی استفادهٔ از آن است.

برای شروع در کدهای html خود باید یک div و داخل آن یک iframe ایجاد کنیم. و به این دو id دلخواه خود را بدهیم. به جهت گرفتن استایل‌های مدنظر ما فراموش نشود که کلاس writer-js به iframe داده شود.

<div id=&quoteditor-box&quot>
     <iframe id=&quotwriter-js&quot class=&quotwriter-js&quot></iframe>
</div>

کد css و js مخصوص writer.js را از گیت‌هاب دانلود کرده و در کد خود به حالت external از آن استفاده می‌کنید:

<link rel=&quotstylesheet&quot href=&quotwriter.js/css/style.css&quot>

<script src=&quotwriter.js/js/script.js&quot>

یک تگ script ایجاد کرده و داخل آن متغیر با نام دلخواه ایجاد کرده و یک شی جدید از کلاس writer میسازیم. این کلاس پنج ورودی می‌گیرد که سه مقدار اولی آن اجباری است.

let writerJs = new writer(lang, iframe Id, box Id, default value, style)

مقدار اول lang است که این مقدار باید برابر fa یا en باشد.
مقدار دوم iframeId است که باید id همان iframe که ایجاد کردیم را به آن بدهیم.
مقدار سوم boxId است که باید id همان باکسی که ایجاد کردیم را به آن بدهیم.
مقدار چهارم defaultValue است. اینجا اگر می‌خواهیم به صورت پیش‌فرض متنی داخل input باشد، متنمان را داخل رشته به آن می‌دهیم و در غیر این صورت '' را قرار می‌دهیم.
مقدار پنجم style است که اگر می‌خواهیم متن داخل ادیتور style خاصی داشته باشد مقداری داخل آن قرار می‌دهیم. مثلا می‌خواهیم تگ a داخل ادیتور استایل خاصی داشته باشد.

مثال:

let writerJs = new writer('fa', 'writer-js', 'editor-box', 'hello world', '*{font-family: vazir;}')

خروجی:

امیدوارم که از این ویرایشگر ساده استفاده بکنید. از راهنمایی‌ها و کمک‌های شما در گیت‌هاب در خصوص افزودن قابلیت‌های دیگر برای writer.js خوشحال خواهم شد. star دادن فراموش نشه..!