یک ویرایشگر مارک‌داون مدرن، ساده و هوشمند که با تمرکز بر زبان فارسی و چینش راست-به-چپ (RTL) طراحی شده است. «دبیر» به شما اجازه می‌دهد تا بدون نیاز به کلیک روی دکمه‌های مختلف و تنها با استفاده از میانبرهای آشنای مارک‌داون، به سرعت یادداشت‌ها و اسناد زیبا و ساختارمند بنویسید. تمام محتوای شما به صورت خودکار در مرورگرتان ذخیره می‌شود تا هیچ نوشته‌ای را از دست ندهید.
این پروژه با استفاده از ابزارهای هوش مصنوعی ایجاد شده است.
- عناوین (Headings): پشتیبانی از سطوح ۱ تا ۴ با استفاده از
#. - قالب‌بندی متن: پررنگ کردن، کج کردن،
خط زدن،کد درونخطیو ==برجسته کردن==. - لیست‌ها: ایجاد لیست‌های مرتب (عددی) و نامرتب (گلوله‌ای) با قابلیت تودرتو شدن.
- بازبینه (Checklist): ساخت لیست وظایف با قابلیت تیک زدن و تودرتو شدن.
- نقل‌قول (Blockquote): جدا کردن بخشی از متن به عنوان نقل‌قول.
- بلوک شعر (Poem Block): نمایش ساختارمند اشعار، به طوری که هر بیت در یک خط و با فاصله‌گذاری مناسب بین دو مصرع قرار می‌گیرد.
- جعبه‌های توضیحی (Admonitions): ایجاد بلوک‌های رنگی برای نمایش
توجه،نکته،مهم،هشدارواحتیاط. - بلوک کد (Code Block): نمایش کدها با استایل مخصوص و خوانا.
- خط افقی (Horizontal Rule): ایجاد یک جداکننده با استفاده از
---. - جداول (Tables): ایجاد جداول ساده با استفاده از سینتکس مارک‌داون.
- پیوندها (Links): افزودن لینک‌های قابل کلیک.
- تصاویر (Images): درج تصاویر در متن به همراه زیرنویس.
- امنیت (Security): پاکسازی خودکار محتوا برای جلوگیری از حملات XSS و ایمن‌سازی ورودی‌ها.
- پایداری (Stability): معماری مقاوم در برابر خطا؛ بروز مشکل در یک افزونه یا پردازشگر باعث توقف کل ویرایشگر نمی‌شود.
- مدیریت منابع: جلوگیری از نشت حافظه (Memory Leak) با مدیریت دقیق رویدادها و آزادسازی منابع.
- میانبرهای کیبورد جامع: مجموعه کاملی از میانبرهای کیبورد (مانند
Ctrl+Bبرای پررنگ کردن) برای اعمال سریع تمام قالب‌بندی‌های مارک‌داون، با پشتیبانی کامل از کیبورد فارسی و عملکرد دوگانه (toggle). - میانبرهای هوشمند: تبدیل خودکار مارک‌داون به متن قالب‌بندی شده با زدن کلید
SpaceیاEnter. - ویرایش هوشمند در لحظه: با قرار دادن مکان‌نما بر روی هر بخش قالب‌بندی‌شده، متن خام مارک‌داون آن برای ویرایش سریع نمایش داده می‌شود و پس از خروج مکان‌نما، دوباره به شکل زیبا رندر می‌شود.
- تشخیص خودکار جهت متن: جهت نوشتار هر خط به صورت هوشمند و خودکار بر اساس اولین حرف محتوای آن (فارسی یا انگلیسی) تنظیم می‌شود و سینتکس مارک‌داون را نادیده می‌گیرد. این ویژگی تجربه‌ی نوشتن دوزبانه را روان‌تر می‌کند.
- رونوشت به صورت مارک‌داون (Copy as Markdown): هنگام کپی کردن بخشی از متن، محتوای انتخاب‌شده به صورت خودکار به مارک‌داون خالص تبدیل شده و در کلیپ‌بورد قرار می‌گیرد تا به راحتی در نرم‌افزارهای دیگر قابل استفاده باشد.
- ذخیره‌سازی خودکار: تمام نوشته‌های شما به صورت آنی در حافظه محلی مرورگر (Local Storage) ذخیره می‌شود.
- طراحی برای فارسی: تجربه‌ی کاربری بهینه شده برای نوشتار راست-به-چپ.
شما می‌توانید ویرایشگر «دبیر» را به صورت زنده در لینک زیر امتحان کنید:
برای راهنمایی کامل، مستندات API، و آموزش‌های توسعه پلاگین، به پوشه /docs مراجعه کنید:
- راهنمای شروع سریع
- راهنمای تنظیمات
- مرجع API
- راهنمای امنیت
- راهنمای توسعه پلاگین
- راهنمای استایل‌دهی
- میانبرهای کیبورد
- معماری پروژه
- راهنمای عملکرد و بهینه‌سازی
- مثال‌های کاربردی
- عیب‌یابی
ویرایشگر «دبیر» به عنوان یک کتابخانه مدرن و مبتنی بر ماژول‌های ES6 طراحی شده است. برای استفاده از آن در پروژه خود، مراحل زیر را دنبال کنید:
۱. فایل‌ها را به پروژه خود اضافه کنید: پوشه src و فایل styles.css را در پروژه خود کپی کنید.
۲. فایل CSS را به صفحه خود اضافه کنید: فایل styles.css را در بخش <head> صفحه HTML خود لینک کنید.
<link rel="stylesheet" href="path/to/styles.css">۳. یک المان برای ویرایشگر ایجاد کنید: یک المان <div> در جایی که می‌خواهید ویرایشگر نمایش داده شود، قرار دهید.
<div id="my-editor"></div>۴. ویرایشگر را راه‌اندازی کنید: یک تگ <script> از نوع module در صفحه خود ایجاد کنید. کلاس اصلی ویرایشگر (DabirEditor) و پلاگین‌های مورد نظر خود را وارد (import) کرده و سپس یک نمونه جدید از ویرایشگر بسازید.
<script type="module">
// ۱. کلاس اصلی ویرایشگر را وارد کنید
import DabirEditor from './src/index.js';
// ۲. پلاگین‌های مورد نیاز خود را وارد کنید
import { AdmonitionPlugin } from './src/plugins/admonitionPlugin.js';
import { DirectionPlugin } from './src/plugins/directionPlugin.js';
import { ListPlugin } from './src/plugins/listPlugin.js';
import { TablePlugin } from './src/plugins/tablePlugin.js';
// ۳. منتظر بمانید تا صفحه کاملاً بارگذاری شود
document.addEventListener('DOMContentLoaded', () => {
// ۴. ویرایشگر را روی المان مورد نظر راه‌اندازی کنید
new DabirEditor('#my-editor', {
// تنظیمات اختیاری
placeholder: 'یادداشت خود را اینجا بنویسید...',
storage: {
key: 'my-dabir-note' // کلید منحصر به فرد برای ذخیره‌سازی
},
// ۵. پلاگین‌های وارد شده را به ویرایشگر معرفی کنید
plugins: [
AdmonitionPlugin,
DirectionPlugin,
ListPlugin,
TablePlugin
]
});
});
</script>ویرایشگر شما اکنون آماده استفاده است! فایل index.html موجود در این پروژه یک مثال کامل و کاربردی را نمایش می‌دهد.
این پروژه تحت مجوز MIT منتشر شده است. برای جزئیات کامل به فایل LICENSE مراجعه کنید.