ساخت texteditor مشابه راکت با livewire و جاوااسکریپت

درود...
پیوند زیر:
https://ckeditor.com/

@endworld روی سوالم رو یکم دقیق تر بخونید .
این پکیج ها کلی گیر و باگ دارن و عملا من از تمام امکاناتشون استفاده نمیکنم و شخصی سازیشون دردسره ولی چیزی که در راکت هست بسیار تمیز هست حتی میتونید inspect بگیرید و منظورم رو بفهمید

@mahdavi
اگر می خواهید اختصاصی بنویسید می توانید آموزش ساخت آن پیگیری کنید:
https://www.thatsoftwaredude.com/content/8912/create-a-basic-text-editor-in-javascript
یا می توانید ویرایگشرهای دیگر امتحان کنید:
https://www.tiny.cloud/
https://quilljs.com/
https://trix-editor.org/
https://editorjs.io/

اینجا می تونید پیشنهاد و درخواست تون رو مطرح کنید، تا شاید بعدا توی راکت آموزشی براش ساخته بشه:
https://roocket.ir/series/javascript-projects/episode/3

@milad مهندس میلاد عزیز میتونید راهنمایی کنید یک ادیتور اختصاصی برپایه markdown درست کنم به صورت اختصاصی چیزی مشابه راکت .

البته @endworld یک مقاله براساس قابلیت جدیدhtml هست ولی براساس markdown نیست و دکمه ها براساس المان های markdown وارد نمی شوند .

در تحلیلی که من کردم، این کار دو مرحله داره.
برای پیاده سازی نیاز هستش که از خصوصیاتی نظیر selectionStart و selectionEnd و دیگر خصوصیات مرتبط با این موضوع استفاده کنید.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

1) به کمک خصوصیات بالایی، عملکرد دکمه های ویرایشگر رو تنظیم می کنید تا متن ورودی کاربر در textarea رو مطابق با دستورالعمل نشانه گذاری maekdown تنظیم کنند (که بخش مشکل تر پروژه رو شامل میشه).
2) در نهایت هم به کمک خود markdown متن داخل textarea رو در پیشنمایش، به نمایش درمیارید.

نظر مهندس @mhyeganeh رو هم جویا بشید.

@milad تشکر مهندس عزیز . جلوتر در مراحل کار باز مزاحم میشم 🌹

مهندس @mhyeganeh لطفا در صورت امکان راهنمایی بفرمایید

سرزنده باشید 👍
ایشالا که مقصودتون رو برآورده کنید و در پایان می تونید کدهاتون رو اینجا برای سایرین هم قرار بدین.

@mahdavi
درود بر شما در راهنمایی شما باید بگم ما این ویرایشگر رو به شکل اختصاصی خودمون نوشتیم تقریبا ۷۰ درصد از کدها توسط ما نوشته شده و متاسفانه امکان ارائه اون به شکل اوپن سورس برای ما وجود نداره.
اما اگر در مورد ایجاد texteditor سرچ بفرمایید مقالات خوبی برای این داستان در اختیارتون قرار میگیره. اما این کار طبق تجربه واقعا پر چالش بوده.
نکاتی که @milad هم در بالا اشاره کردن به اون می‌تونه بهتون کمک کنه متوجه داستان این جور ویرایشگر‌ها بشید.

مهندس @hesammousavi ممنون بابت پیامتون
اگه امکان اوپن سورس کردن کد ها وجود نداره لااقل آموزشی در این مورد ارائه بفرمایید یا منابعی که خودتون ازشون کمک گرفتین رو بگید تا ما هم بتونیم پیش بریم چون منابع در اینترنت خیلی پراکنده هست و اگر در این مورد کمک بفرمایید ممنون میشم

@milad مهندس جان اگر شما در این روند کمک بکنید با هم میتونیم اوپن سورسش کنیم تا همه از این ویژگی استفاده کنند

چون اکثر برنامه نویس های فرانت اند دغدغشون اینه یه ادیتور رو بنویسند و هر زمان خواستند بخشهای اون رو شخصی سازی کنند اما این روند بسیار به گفته مهندس موسوی پرچالش هست و نیاز به کمک داره 🙏

یکی اینکه: من قبلا یک نوبت سعی کردم این موضوع رو بررسی کنم، منتها در تحلیلی که بالا نوشتم، پیاده کردن بخش اول، اذیتم کرد. ازونجایی که در حد بررسی بودش موضوع برام، کلیات کار دستم اومدش، ولی دیگه پیاده سازی عملی رو پیش نبردم. / الان و در این مقطع هم راستیتش، همچین پروژه ای برام اولویت نداره و زمان/انگیزه کافی ندارم که وارد چالشش بشم.
دو اینکه: بعید می دونم چنین کمبودی در دنیای وب باشه، همین الان ویرایشگرهای متن رایگان گوناگونی موجود هستش، من اگر بخوام درین زمینه وقت بزارم، ترجیح میدم یک وقت اساسی بزارم و ویرایشگرهای موجود رو بررسی کنم، و ببینم کدوم مناسب تر هستش. البته اگر شما به قدر کافی وقت گذاشتید برای ویرایشگرهای موجود، بحث تون از من جداست. / من هنوز فکر می کنم ویرایشگرهای موجود پاسخگو هستند.
سه: در حد دانش و زمان خودم، بتونم کمک می کنم داخل انجمن.
سرزنده باشید

@mahdavi
@milad

سلام و ادب؛

حقیقتش بنده تخصص زیادی در این زمینه ندارم و تا الان هم خیلی باهاش روبرو نشدم. چندباری هم که باهاش درگیر شدم از TinyMCE استفاده کردم. البته با مقدار زیادی Customization برای نیازهای خودم و اضافه کردن چند قابلیت خاص و خیلی هم خوب جواب داده و راضی بودم. ضمن اینکه معتقدم اون سبک از ادیتورها (فکر کنم اصطلاح دقیق ترش میشه ادیتورهای WYSIWYG) بهتر و مناسب تر هم باشه. مخصوصا برای کاربرهای غیرفنی و عام. چون نیازی به آشنایی و سر و کله زدن با مارک داون های بعضا عجیب و غریب ندارند و دقیقا خروجی کار جلوی چشممون هست و الباقی کارها پشت صحنه قرار می‌گیرند.

در هر صورت و در خصوص این موضوع فکر نمی‌کنم خیلی مسئله ی عجیب و غریب و یا نشدنی باشه. مقداری آشنایی با JS و طبیعتا HTML میخواد به نظرم فقط... نمی‌گم کار راحتیه و سه سوته قابل انجامه. بلکه قطعا چالش هم خواهیم داشت. مخصوصا اگر قصد پشتیبانی از زبان فارسی رو هم داشته باشید یا امکانات خاص تری هم بخواید بهش اضافه کنید.

ولی اگر کار رو بشکونیم و کمی راجع بهش فکر کنیم مشخص میشه که عمده اتفاقی که می افته این هست که کاربر روی یکی از button های تنظیمات (مثلا اعمال استایل Bold) کلیک می‌کنه.

حالا شما باید مثلا چک کنید که آیا قبلش تکه ای از متن داخل textarea به حالت select در اومده یا نه. اگر آری با استفاده از دستورات JS که بالاتر اشاره شد index شروع محل انتخاب و پایانش رو در میارید. بعد بر اساس این مقادیر و مثلا دستور substr() متن رو به سه قسمت تقسیم می‌ کنیم:

1- قبل از تکه انتخابی
2- تکه انتخابی
3- بعد از تکه انتخابی

و حالا میایم با استفاده از concatenation این سه تکه رو بعلاوه کاراکترهای لازم در قبل و بعد از تکه انتخابی مجدد با هم ادغام می‌کنیم. در مثال Bold کردن متن انتخابی و بر اساس استاندارد های مارک داون گیت هاب باید دوتا ستاره قبل و بعدش اضافه بشه. پس میشه یک همچین چیزی:

const result = text_before + '**' + text_selected + '**' + text_after;
//ES6 version:
const result = `${text_before}**${text_selected}**${text_after}`;

و در پایان کافیه این مقدار جدید رو جاگزین متن داخل textarea بکنیم:

document.getElementById("my_textarea").value = result;

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

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

این کارها که انجام شد آخر سر شما یک textarea دارید که فقط کافیه محتواش رو در دیتابیس ذخیره کنید. بقیه اتفاق ها بعدا و در زمان نمایش اون می افته که با استفاده از پکیج هایی بالاتر بهشون اشاره شد باید این متن رو یک جورایی render کنید و با تگ های مناسب html جایگزین نمایید. الباقی داستان هم که میشه جادوی CSS. 😉

پ ن ۱: کدهای بالا رو همین جوری و فقط جهت تقریب ذهن نوشتم و از کارکرد دقیقشون مطمئن نیستم.

پ ن ۲: پیشنهاد می‌کنم خودتون اول کار رو بشکونید به تکه های کوچک پازل و بعد برای پیدا کردن پاسخ همان تکه کوچیک پازل به حضرت گوگل و استک اورفلو مراجعه کنید. حتما افراد زیادی قبل از ما باهاش مواجه شدند و پاسخشون رو هم دریافت کردند. اینجوری خیلی بهتره به نظرم تا اینکه از ابتدا دنبال یک آموزش صفر تا صد و آماده شده بگردیم.

پ ن ۳: ضمن احترام به جامعه مهندسین بنده «مهندس» نیستم. محمدحسن یگانه ام :-)

موفق و پیروز باشید.

ممنون از دوستان زیر که در این گفتگو بنده رو همراهی کردند.
@hesammousavi
@milad
@endworld
و به ویژه مهندس یگانه (که البته خودشون میگن مهندس نیستن 😉) @mhyeganeh بسیار دید خوبی بهم دادن و باعث شدن که دنبال ویژگی های پنهان textarea بگردم و به دو لینک جالب زیر رسیدم که واقعا شاید 80 درصد چالش ها رو برام تکمیل کرد

لینک اول
لینک دوم بخش Insert HTML tags example

همچنین قابل توجه مهندس @hesammousavi عزیز که گفتند کدهارو نمیتونن اوپن سورس کنن بنده بعد اتمام کار کدها لینک گیت هاب پروژه رو همینجا میذارم بقیه دوستان هم بتونن ازش استفاده کنند😏

سلام در رابطه با ادیتور متن اتفاقا منم به عنوان یه چالش چند وقتی هست که شروع کردم به نوشتن البته براساس markdown نیست وبه صورت WYSIWYG کار میکنه
https://roocket.ir/discuss/12529
توی لینک بالا یه بحث در این باره شروع کردم، البته من سعی کردم با بررسی سه ادیتور معروف ckeditor 5, tinymce 5, froala این کارو پیش ببرم و همچنین برای استایل دادن هم به صورت پیش پا افتاده میتونید از این کد استفاده کنید که البته برای یه ادیتور خوب باید خیلی دقیق تر و جزعی تر نوشته بشه

const btn = document.querySelector('button');
    btn.addEventListener('click', function(){
        let selection = document.getSelection();
        let text = selection.toString();
        let strong = document.createElement('strong');
        strong.style.color = 'red';
        strong.textContent = text;
        let range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(strong);

یه موضوع دیگه که هست ادیتور ها این کار رو داخل textarea انجام نمیدن، البته در رابطه با markdown فک کنم بشه از textarea استفاده کرد

مهندس @hossein.r.1442 میشه دقیق تر توضیح بدید ؟
تا جایی که من اینترنت رو گشتم میشه با گرفتن مقادیر داخل textarea با جاوااسکریپت دقیقا بهش تگ اضافه کرد ولی در مورد افزودن عکس یا ویدیو دید کافی ندارم و در حال تحقیق هستم.

ممنون میشم راهنمایی بفرمایید🙏

ببینید برای نوشتن ادیتور markdown مشکلی وجود نداره و میتونید از textarea استفاده کنید ولی ادیتور های WYSIWYG رو نمیشه توی textarea پیاده کرد چون خروجی رو نمیشه مستقیم دید مگه اینکه یه المنت دیگه قرار بدید تا همونطور که داره کاربر اصلاحات رو داخل textarea انجام میده توی اون المنت به صورت ریل تایم بهش نمایش بدید که فک نکنم کاربر پسند باشه.
شما باید یه المنت قرار بدید و مقدار contentEditable اش رو برابر با true قرار بدید که کاربر داخل اون المنت شروع به تایپ کنه و فقط المنت هایی که نیاز به اصلاح ندارند رو مقدار contentEditable رو false کنید
مثلا

<div class="editor-wrapper" contentEditable="true">
  <p>sample paragraph</p>
  <figure>
    <img src="./url/img.png" alt="">
    <figcaption>this is img caption</figcaption>
  </figure>
  <p>sample 2</p>
</div>

توی مثال بالا اگه کاربر تصویر رو درگ کنه و بخواد جابجا کنه فقط تگ img تنها جابجا میشه و درعمل تگ img از تگ figure خارج میشه که این درست نیست، صحیح کد بالا به صورت زیر میشه

<div class="editor-wrapper" contentEditable="true">
  <p>sample paragraph</p>
  <figure class="draggable" contentEditable="false">
    <img src="./url/img.png" alt="">
    <figcaption contentEditable="true">this is img caption</figcaption>
  </figure>
  <p>sample 2</p>
</div>

با این کار تگ img دیگه نه درگ میشه و نه جابجا میشه که برای اینکه کاربر بتونه تصاویر رو جابجا کنه باید با جاوا اسکریپت کاری کنیم که تگ figure قابلیت درگ رو داشته باشه و کاربر بتونه جابجاش کنه
یه روش ساده برای ساخت ادیتور WYSIWYG اینه که شما ظاهر رو پیاده کنید و دکمه ها رو قرار بدید و در نهایت توسط دستور زیر سایر کار رو بسپارید دست جاوا اسکریپت

document.execCommand('bold', false, null);

این دستور خودش به متن انتخابی تگ و استایل های مورد نظر رو میده، حالا جای bold شما باید مقادر دیگه رو هم قرار بدید که لیست کامل کامند هایی که دریافت میکنه توی این لینک هست، ولی خوب ادیتور های پیشرفته این کار رو انجام نمیدند و بلکه خودشون به صورت پویا تگ و استایل های لازم رو به متن اعمال میکنند.
برای ادیتور های markdown هم شما میتونید قالب های markdown رو کدنویسی کنید و درنهایت برای تبدیل کردن به کدهای HTML از انجین های آماده استفاده کنید و دردسر خودتونو کم کنید، کاری که اکثر ادیتور های markdown هم انجام میدن