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

JavaScript Selection API چیزی است که امکان تعامل برنامه‌نویسی با این متن‌های انتخابی را فراهم می‌کند.

در این آموزش، ما عمیقاً به Selection API می پردازیم، تحلیل می کنیم که چه کاری می تواند انجام دهد، و نشان می دهیم که چگونه می توانید از آن برای ایجاد برنامه های کاربردی وب تعاملی و مبتنی بر انتخاب استفاده کنید.

در این مقاله به موارد زیر خواهیم پرداخت:

JavaScript Selection API را کاوش کنید، ابزاری قدرتمند برای تعامل و دستکاری متن انتخاب شده توسط کاربر در یک صفحه وب.

معرفی document.execCommand()، یک روش آسان برای گفت ن قالب بندی به متن انتخاب شده، از جمله پررنگ، ایتالیک و زیرخط.

نحوه ساخت یک ویرایشگر متن غنی ساده با ویژگی های قالب بندی اولیه را با استفاده از Selection API و execCommand () نشان دهید.

عناصر کلیک شده و موقعیت آنها را در زمان واقعی شناسایی کنید.

Selection API چیست؟

Selection API یک API وب است که توسط مرورگرهای مدرن ارائه شده است که به توسعه دهندگان امکان می دهد با انتخاب متن کاربر در یک صفحه وب کار کنند. به شما اجازه می دهد:

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

انتخاب ها را به صورت برنامه ای تغییر دهید یا دستکاری کنید.

تشخیص زمانی که کاربران انتخاب می کنند.

ذخیره، جایگزینی، یا حذف انتخاب های متن.

این API معمولاً برای ویرایشگرهای متن غنی، عملکرد کپی/پیست، نکات سفارشی ابزار، برجسته کردن، حاشیه نویسی و موارد دیگر استفاده می شود.

با استفاده از Selection API چه کاری می توانید انجام دهید؟

Selection API به شما این قدرت را می دهد که با متن انتخاب شده توسط کاربر به روش های مختلف تعامل داشته باشید. برخی از قابلیت های کلیدی عبارتند از:

دریافت متن انتخاب شده فعلی : متن برجسته شده ای را که کاربر در سند انتخاب می کند استخراج کنید.

تغییر انتخاب : به صورت برنامه‌ای یک انتخاب را تنظیم یا تغییر دهید، یا با تنظیم نقطه شروع و پایان جدید برای انتخاب یا کوچک کردن آن به طور کامل.

حذف انتخاب : پس از پایان استفاده از انتخاب، آن را پاک کنید.

استخراج اطلاعات موقعیت : بدانید انتخاب از کجا شروع و به پایان می رسد، هم در داخل سند و هم روی صفحه (مفید برای راهنمایی های ابزار سفارشی یا حاشیه نویسی).

اعمال یک استایل سفارشی : می‌توانید متن انتخاب‌شده را استایل دهید، نکات برجسته اضافه کنید یا زمانی که کاربر انتخابی را انجام می‌دهد، رویدادها را فعال کنید.

اجزای کلیدی Selection API

برای استفاده موثر از Selection API، درک برخی از مفاهیم اصلی آن مهم است. در اینجا اشیاء و روش های کلیدی آمده است:

1. Selection شی

شی Selection نشان دهنده انتخاب فعلی متن در یک صفحه وب است. از طریق متد window.getSelection() قابل دسترسی است و شی اصلی است که با آن تعامل خواهید داشت.

 const selection = window .getSelection(); console .log(selection);

شی Selection چندین ویژگی و روش برای بازیابی، اصلاح و دستکاری متن انتخاب شده توسط کاربر ارائه می دهد.

2. Range Object

شی Range بخشی از یک سند را نشان می دهد. اطلاعات مربوط به نقطه شروع و پایان یک انتخاب را در خود نگه می دارد و به شما امکان می دهد بخش هایی از سند را دستکاری کنید.

به عنوان مثال، می‌توانید محدوده‌ای ایجاد کنید تا گره‌های متنی خاص را برجسته یا دستکاری کنید یا محتوای متن را در محدوده خاصی بازیابی کنید.

 const selection = window .getSelection(); const range = selection.getRangeAt( 0 ); // Get the first range of the selection console .log(range);

روش ها و ویژگی های کلیدی API انتخاب

در اینجا خلاصه ای از متداول ترین روش ها و ویژگی های انتخاب API و Range API آورده شده است:

روش های انتخاب API:

1. window.getSelection() :

متد window.getSelection() برای بازیابی متن انتخابی فعلی در صفحه وب استفاده می شود. یک شی Selection را برمی‌گرداند که نشان‌دهنده محدوده متن انتخاب شده توسط کاربر، یا موقعیت فعلی caret است (اگر متنی انتخاب نشده باشد).

جزئیات مربوط به window.getSelection() :

شی Selection حاوی جزئیاتی در مورد متن انتخاب شده فعلی (در صورت وجود)، از جمله گره های شروع و پایان، افست ها و روش های دستکاری انتخاب است.

اگر هیچ متنی انتخاب نشده باشد، Selection شی موقعیت کنونی کارت را بدون هیچ محدوده انتخابی منعکس می کند.

کد مثال:

 const selection = window .getSelection(); console .log(selection); // Logs the Selection object to the console

مثال استفاده:

تحلیل کنید که آیا متنی انتخاب شده است:

 const selection = window .getSelection(); if (selection.rangeCount > 0 ) { console .log( 'Text is selected' ); } else { console .log( 'No text selected' ); }

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

2. Selection.anchorNode و Selection.focusNode :

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

focusNode نشان دهنده گره ای است که کاربر انتخاب را در آنجا پایان داده است. این نقطه پایان انتخاب است، اما دوباره، اگر کاربر به عقب انتخاب کند، می تواند به صورت بصری به عنوان شروع انتخاب ظاهر شود.

جزئیات مهم:

جهت انتخاب : اگر انتخاب از چپ به راست انجام شود (به جلو کشیده شود)، این anchorNode قسمت اولیه انتخاب خواهد بود. اگر انتخاب از راست به چپ انجام شود (با کشیدن به سمت عقب)، anchorNode در قسمت بعدی انتخاب قرار خواهد گرفت، اما فوکوس ابتدا ظاهر می شود.

انواع گره : هر دو anchorNode و focusNode گره‌های DOM را برمی‌گردانند. این بدان معنی است که آنها می توانند گره های متنی، گره های عنصر یا هر نوع گره دیگری در سند باشند.

Offsets : همراه با این ویژگی ها، Selection.anchorOffset و Selection.focusOffset به شما مقدار دقیق آفست نویسه ها را در گره هایی که انتخاب شروع می شود و به پایان می رسد، می دهد.

3. Selection.toString() :

برای استفاده از متد Selection.toString() ، می‌توانید به سادگی آن را در انتخاب فعلی فراخوانی کنید. این روش مقدار رشته متن انتخاب شده فعلی را در سند برمی گرداند.

 const selectedText = selection.toString(); console .log(selectedText); // Output: The selected text

چگونه کار می کند:

window.getSelection() : این شیء Selection فعلی را بازیابی می کند که متن انتخاب شده توسط کاربر را نشان می دهد.

.toString() : این محدوده انتخاب شده را به یک رشته متن ساده تبدیل می کند.

سپس نتیجه در کنسول چاپ می شود.

4. Selection.removeAllRanges() :

متد Selection.removeAllRanges() برای پاک کردن یا حذف هر متن انتخابی فعلی در یک صفحه وب استفاده می شود. هنگامی که فراخوانی می شود، هر متنی را که کاربر ممکن است انتخاب کرده باشد، از حالت انتخاب خارج می کند و انتخاب را خالی می گذارد.

 selection.removeAllRanges();

چگونه کار می کند:

window.getSelection() : شیء Selection فعلی را بازیابی می کند.

.removeAllRanges() : انتخاب را پاک می کند و در واقع هر متن برجسته شده در صفحه را از حالت انتخاب خارج می کند.

5. Selection.addRange(range) :

روش Selection.addRange(range) برای گفت ن یک شی Range خاص به انتخاب فعلی در سند استفاده می شود. این به شما این امکان را می دهد که به صورت برنامه نویسی محدوده ای از متن یا عناصر را انتخاب کنید.

 // Create a range object const range = document .createRange(); // Select a specific element or part of the document const element = document .getElementById( 'myElement' ); // Set the range to start at the beginning of the element and end at the end range.selectNodeContents(element); // Clear any existing selection and add the new range const selection = window .getSelection(); selection.removeAllRanges(); // Remove existing selections selection.addRange(range); // Add the new range

چگونه کار می کند:

document.createRange() : یک شی Range جدید ایجاد می کند.

range.selectNodeContents() : محدوده ای را برای پوشش محتویات یک عنصر DOM خاص (در این مورد، عنصر با ID myElement ) تنظیم می کند.

selection.removeAllRanges() : هر متن یا عنصری که قبلا انتخاب شده بود را پاک می کند.

selection.addRange(range) : تعریف Range به انتخاب اضافه می کند و آن را به متن یا محتوای انتخابی فعلی تبدیل می کند.

موارد استفاده:

برنامه‌ای انتخاب متن : اگر می‌خواهید قسمت‌های خاصی از سند را به صورت برنامه‌نویسی برجسته کنید، می‌توانید از این روش برای انتخاب آن‌ها استفاده کنید.

منطق انتخاب سفارشی : در برنامه‌های کاربردی وب که به انتخاب متن یا عنصر خاصی نیاز دارند، مانند ویرایشگرها یا ابزارهای رابط کاربری سفارشی، می‌توان از آن برای مدیریت انتخاب‌های کاربر استفاده کرد.

روش های Range API:

1. range.setStart(node, offset) :

متد Range.setStart(node, offset) برای تنظیم نقطه شروع یک شی Range استفاده می شود. شما node را مشخص می کنید که محدوده باید از کجا شروع شود و offset (موقعیت درون گره) برای نقطه شروع.

پارامترها:

node : گره DOM که محدوده باید از آنجا شروع شود. این می تواند یک گره عنصر یا یک گره متن باشد.

offset : موقعیت درون گره ای که محدوده از آنجا شروع می شود. برای گره های عنصر، این شاخص گره های فرزند است. برای گره های متن، موقعیت کاراکتر در متن است.

 // Create a range object const range = document .createRange(); // Select the text node where the range should start const textNode = document .getElementById( 'myElement' ).firstChild; // Set the start of the range at the 5th character in the text node range.setStart(textNode, 5 );

توضیح کد:

document.createRange() : یک شی Range جدید ایجاد می کند.

بیشتر بخوانید

بورس امروز کاهشی شد




textNode : این به فرزند اول عنصر با ID myElement اشاره دارد که پیش بینی می شود یک گره متن باشد.

range.setStart(textNode, 5) : شروع محدوده را در نویسه پنجم در گره متن تنظیم می کند.

نکات مهم:

در گره های متنی ، offset به موقعیت یک کاراکتر در متن اشاره دارد. به عنوان مثال، offset = 5 به این معنی است که محدوده بعد از کاراکتر 5 شروع می شود.

در گره های عنصر ، offset به شاخص گره های فرزند اشاره دارد. به عنوان مثال، offset = 0 قبل از اولین عنصر فرزند شروع می شود، در حالی که offset = 1 بعد از اولین فرزند شروع می شود.

مثال مورد استفاده:

می‌توانید از setStart در سناریویی استفاده کنید که می‌خواهید بخشی از متن را برجسته یا استخراج کنید، با شروع از یک نقطه خاص:

 const range = document .createRange(); const textNode = document .getElementById( 'myText' ).firstChild; range.setStart(textNode, 3 ); // Start at the 4th character range.setEnd(textNode, 8 ); // End at the 9th character const selection = window .getSelection(); selection.removeAllRanges(); // Clear previous selections selection.addRange(range); // Highlight the selected text

در این مثال، متنی را انتخاب می‌کند که از کاراکتر 4 شروع می‌شود و به کاراکتر 9 ختم می‌شود و به طور موثر آن قسمت از متن را برجسته می‌کند.

2. range.cloneContents() :

متد Range.cloneContents() برای ایجاد یک کپی از محتوا در محدوده مشخص شده استفاده می شود. یک DocumentFragment حاوی گره ها و محتوای محدوده را برمی گرداند اما سند اصلی را تغییر نمی دهد.

جزئیات کلیدی:

Returns : یک DocumentFragment که شامل گره ها و عناصر کلون شده در محدوده است.

غیر مخرب : این روش محتوا را از سند اصلی تغییر نمی دهد یا حذف نمی کند - به سادگی یک کپی ایجاد می کند.

کد مثال:

 // Create a range object const range = document .createRange(); // Select the content of a specific element const element = document .getElementById( 'myElement' ); range.selectNodeContents(element); // Clone the contents of the range const clonedContent = range.cloneContents(); // Append the cloned content somewhere in the document document .body.appendChild(clonedContent);

چگونه کار می کند:

document.createRange() : یک شی Range جدید ایجاد می کند.

range.selectNodeContents(element) : تمام محتوای درون عنصر مشخص شده را انتخاب می کند.

range.cloneContents() : یک DocumentFragment ایجاد می کند که حاوی یک کپی از محتویات انتخاب شده است.

document.body.appendChild(clonedContent) : محتوای شبیه‌سازی‌شده را در جایی از سند (در این مورد، در انتهای متن) اضافه می‌کند.

موارد استفاده:

کپی کردن محتوا : از این روش زمانی استفاده کنید که نیاز به ایجاد یک کپی از محتوای انتخابی بدون تغییر نسخه اصلی دارید.

دستکاری داده‌های کپی شده : پس از شبیه‌سازی محتوا، می‌توانید قطعه شبیه‌سازی‌شده را تغییر دهید یا پردازش کنید (مثلاً برای آپشن های کشیدن و رها کردن، نکات ابزار سفارشی، یا ذخیره بخشی از محتوا).

سناریوی نمونه:

اگر می خواهید بخشی از محتوای یک صفحه وب را کپی کنید و در جای دیگری نمایش دهید:

 const range = document .createRange(); const element = document .querySelector( '#textElement' ); range.setStart(element.firstChild, 0 ); // Set start of range range.setEnd(element.firstChild, 10 ); // Set end of range (first 10 characters) // Clone the content and append it to another element const clonedContent = range.cloneContents(); document .querySelector( '#targetElement' ).appendChild(clonedContent);

در این مثال، 10 کاراکتر اول #textElement کلون شده و در #targetElement درج می شود. این بر محتوای اصلی در #textElement تأثیر نمی گذارد.

استفاده از Cases of Selection API

1. برجسته کردن متن

با استفاده از Selection API، می توانید متن را به صورت پویا بر اساس ورودی کاربر برجسته کنید. به عنوان مثال، می توانید متن انتخاب شده را در یک برچسب <mark> بپیچید تا آن را برجسته کنید.

 < p id = "text" > This is some selectable text. </ p > < button onclick = "highlightSelection()" > Highlight </ button > < script > function highlightSelection ( ) { const selection = window .getSelection(); if (selection.rangeCount > 0 ) { const range = selection.getRangeAt( 0 ); const highlight = document .createElement( 'mark' ); range.surroundContents(highlight); } } </ script >

این اسکریپت به کاربران اجازه می دهد تا متن انتخاب شده را با یک کلیک ساده برجسته کنند.

2. کپی کردن متن انتخاب شده

به راحتی می توانید متن انتخاب شده را با متد Selection.toString() استخراج و دستکاری کنید. در اینجا نمونه ای از کپی کردن متن انتخاب شده در کلیپ بورد آورده شده است:

 < p id = "text" > Select any portion of this text and copy it to the clipboard. </ p > < button onclick = "copySelection()" > Copy </ button > < script > function copySelection ( ) { const selection = window .getSelection(); const text = selection.toString(); navigator.clipboard.writeText(text).then( () => { alert( "Copied to clipboard: " + text); }); } </ script >

این قطعه به کاربران این امکان را می دهد که هر متن انتخابی را کپی کرده و در جای دیگری جایگذاری کنند.

3. حاشیه نویسی متن

می توانید Selection API را با حاشیه نویسی های سفارشی ترکیب کنید. با تشخیص موقعیت انتخاب در صفحه، می توانید یک راهنمای ابزار یا جعبه حاشیه نویسی شناور را نمایش دهید.

 < p > Select text to see the annotation box. </ p > < script > document .addEventListener( "mouseup" , () => { const selection = window .getSelection(); const selectedText = selection.toString(); if (selectedText.length > 0 ) { const range = selection.getRangeAt( 0 ); const rect = range.getBoundingClientRect(); const annotationBox = document .createElement( "div" ); annotationBox.style.position = "absolute" ; annotationBox.style.left = ` ${rect.left} px` ; annotationBox.style.top = ` ${rect.top - 30 } px` ; annotationBox.textContent = "Annotate this!" ; document .body.appendChild(annotationBox); } }); </ script >

این اسکریپت یک کادر حاشیه نویسی درست بالای متن انتخاب شده ایجاد می کند.

ویژگی های پیشرفته Selection API

محدوده های چندگانه : برخی از مرورگرها از چندین انتخاب متن در یک صفحه پشتیبانی می کنند، جایی که می توانید چندین محدوده متن را انتخاب کرده و آنها را به طور همزمان دستکاری کنید.

تشخیص تغییرات انتخاب : می‌توانید به رویدادهای selectionchange در سند گوش دهید و به شما امکان می‌دهد تشخیص دهید کاربر چه زمانی انتخاب خود را تغییر می‌دهد.

 document .addEventListener( "selectionchange" , () => { const selection = window .getSelection(); console .log( "Selection changed:" , selection.toString()); });

کار با فرم‌ها : انتخاب‌ها می‌توانند در فرم‌ها مفید باشند و به شما این امکان را می‌دهند که ورودی کاربر را براساس متن انتخاب‌شده به‌طور خودکار تکمیل، کپی یا اعتبارسنجی کنید.

JavaScript Selection API یک ابزار قدرتمند برای ایجاد برنامه های وب پویا و تعاملی است. چه بخواهید عملکرد کپی/پیست سفارشی را پیاده سازی کنید، حاشیه نویسی را فعال کنید یا ویرایشگرهای متنی پیشرفته بسازید، Selection API کنترل و انعطافی را که برای مدیریت انتخاب های کاربر نیاز دارید را فراهم می کند.

با استفاده از روش‌ها و آپشن های آسان، می‌توانید تجربیات کاربر را بهبود ببخشید و آپشن های بصری و مبتنی بر انتخاب ایجاد کنید.

مثال استفاده: نحوه ایجاد یک ویرایشگر متن غنی با API انتخاب جاوا اسکریپت

Selection API نه تنها به شما امکان می دهد با انتخاب های متن تعامل داشته باشید، بلکه دری را برای دستکاری متن پیشرفته تر، مانند ایجاد یک ویرایشگر متن غنی، باز می کند. یک ویرایشگر متن غنی (RTE) به کاربران امکان می دهد متن انتخاب شده را با ویژگی هایی مانند پررنگ، ایتالیک و زیرخط قالب بندی کنند.

در این بخش، نحوه ساخت یک ویرایشگر متن غنی اولیه با استفاده از Selection API و ارائه مثالی با آپشن های قالب‌بندی کلیدی را توضیح خواهیم داد.

چگونه API Selection به ایجاد یک ویرایشگر متن غنی کمک می کند؟

Selection API به شما امکان می دهد:

متن انتخاب شده توسط کاربر را تشخیص دهید.

محتوای انتخابی را به‌صورت برنامه‌ریزی تغییر دهید، به‌عنوان مثال، از استایل‌های پررنگ، مورب یا خط‌دار استفاده کنید.

به کاربران اجازه دهید با کنترل‌های ساده رابط کاربری (مانند دکمه‌ها یا میان‌برهای صفحه‌کلید) ویرایش‌های درجا انجام دهند.

با استفاده از window.getSelection() و Range API، می توانید متن را بر اساس اقدامات کاربر (مانند کلیک بر روی دکمه Bold) دستکاری کنید. سپس می‌توانید متن انتخاب‌شده را در تگ‌های HTML مناسب بپیچید ( <b> ، <i> ، <u> ) یا سبک‌های درون خطی را اعمال کنید.

ویژگی های اصلی ویرایشگر متن غنی

برای مثال، ما سه ویژگی قالب‌بندی اصلی را پیاده‌سازی می‌کنیم:

Bold : متن انتخاب شده را پررنگ کنید.

Italic : متن انتخاب شده را به صورت مورب درآورید.

Underline : زیر متن انتخاب شده خط بکشید.

ساختار HTML

در اینجا یک طرح ساده برای ویرایشگر با دکمه های Bold، Italic و Underline آورده شده است:

 <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Simple Rich Text Editor </ title > < style > #editor { border : 1px solid #ccc ; min-height : 150px ; padding : 10px ; margin-top : 10px ; } .toolbar { margin-bottom : 5px ; } .toolbar button { margin-right : 5px ; } </ style > </ head > < body > < div class = "toolbar" > < button onclick = "formatText('bold')" > < b > Bold </ b > </ button > < button onclick = "formatText('italic')" > < i > Italic </ i > </ button > < button onclick = "formatText('underline')" > < u > Underline </ u > </ button > </ div > <!-- Contenteditable div for the editor --> < div id = "editor" contenteditable = "true" > Type your text here... </ div > < script src = "editor.js" > </ script > </ body > </ html >

جاوا اسکریپت: مدیریت قالب بندی با انتخاب API

اکنون که ساختار اولیه را داریم، اجازه دهید جاوا اسکریپت را برای مدیریت قالب بندی متن اضافه کنیم. ما از Selection API و document.execCommand() استفاده خواهیم کرد، یک روش قدیمی که هنوز توسط اکثر مرورگرها پشتیبانی می‌شود، برای اعمال قالب‌بندی.

در اینجا جاوا اسکریپت برای کاربردی کردن دکمه ها آمده است:

 // Function to format text based on the command function formatText ( command ) { document .execCommand(command, false , null ); }

متد execCommand به شما این امکان را می دهد که دستوراتی را روی محتوای درون عنصری که دارای ویژگی contenteditable است انجام دهید. در مورد ما، دستورات 'bold' ، 'italic' و 'underline' خواهند بود.

تابع document.execCommand()

تابع document.execCommand() یک روش قدیمی است که توسط مرورگرها ارائه شده است که به توسعه دهندگان اجازه می دهد تا عملیات ویرایش اسناد مختلف را مستقیماً روی محتوا در یک عنصر contenteditable انجام دهند. این روش به دلیل سادگی و پشتیبانی مرورگر به طور گسترده برای ساخت ویرایشگرهای متن غنی برای برنامه های کاربردی وب مورد استفاده قرار گرفته است.

اگرچه هنوز در اکثر مرورگرهای مدرن کاربردی است، اما شایان ذکر است که execCommand منسوخ شده است و ممکن است در نسخه های بعدی مرورگرها پشتیبانی نشود. اما همچنان نقطه شروع خوبی برای ویرایشگرهای متن غنی اولیه است.

اگر به دنبال راه حلی طولانی مدت هستید، API های جدیدتر مانند Selection API همراه با Range API یا کتابخانه های شخص ثالث (مانند Quill.js و Draft.js) برای نیازهای ویرایشی پیچیده توصیه می شوند.

document.execCommand() چیست؟

متد document.execCommand() یک دستور مشخص را برای دستکاری یا قالب بندی متن در یک عنصر محتوای قابل ویرایش (مانند div، textarea یا فیلد ورودی) اجرا می کند. این می تواند دستوراتی مانند اعمال سبک ها، اصلاح ترازبندی متن، ایجاد پیوندها و موارد دیگر را انجام دهد.

نحو execCommand() :

 document .execCommand(command, showUI, value);

command : رشته ای که دستور اجرا را نشان می دهد (به عنوان مثال، 'bold' , 'italic' , 'underline' , 'createLink' ).

showUI : یک مقدار بولی که نشان می‌دهد آیا رابط کاربری پیش‌فرض برای دستور باید نشان داده شود (تقریباً همیشه false ، زیرا رابط‌های کاربری مرورگر اغلب ناسازگار هستند).

value : اختیاری رشته ای که نشان دهنده مقداری است که باید برای دستورات خاص ارسال شود (به عنوان مثال، URL برای ایجاد یک پیوند).

ارزش بازگشتی

execCommand() true را برمی گرداند اگر دستور با موفقیت اجرا شود یا false در غیر این صورت.

چگونه ویرایشگر متن غنی را تقویت کنیم

در حالی که مثال بالا یک ویرایشگر متن غنی اولیه را به شما می دهد، می توانید ویژگی های آن را با گفت ن کنترل های بیشتر و مدیریت دستورات دیگر گسترش دهید:

رنگ متن : رنگ متن انتخاب شده را با استفاده از execCommand('foreColor', false, 'red') تغییر دهید.

ترازبندی متن : متن را با استفاده از دستوراتی مانند execCommand('justifyCenter') به چپ، مرکز یا راست تراز کنید.

Undo/Redo : با استفاده از execCommand('undo') و execCommand('redo') عملکرد واگرد و مجدد را اجرا کنید.

گفت ن پیوندها : به کاربران اجازه می دهد تا با execCommand('createLink', false, ' http://example.com ') پیوندها را اضافه کنند.

با استفاده از Selection API همراه با document.execCommand() ، ما یک ویرایشگر متن غنی ساده و کاربردی با ویژگی های برجسته، ایتالیک و زیرخط ساخته ایم. این ویرایشگر اصلی را می توان با ویژگی های اضافی مانند اندازه فونت، رنگ، و تراز بیشتر تقویت کرد تا یک ویرایشگر متن غنی کامل برای برنامه های کاربردی وب شما ایجاد کند.

چگونه عنصر کلیک شده و موقعیت بیدرنگ آن را بدست آوریم

ساده ترین راه برای شناسایی عنصر کلیک شده در یک صفحه وب، استفاده از شنونده رویداد click در جاوا اسکریپت است.

در اینجا نحوه انجام این کار آمده است:

 document .addEventListener( 'click' , ( event ) => { const clickedElement = event.target; console .log( 'You clicked on:' , clickedElement.tagName); });

توضیح کد:

document.addEventListener('click', ...) : این شنونده رویداد را به کل سند متصل می کند.

event.target : این ویژگی عنصر خاصی را برمی گرداند که روی آن کلیک شده است.

clickedElement.tagName : نام تگ عنصر کلیک شده را ارائه می کند (مانند DIV ، SPAN ، BUTTON ، و غیره).

با کلیک بر روی هر نقطه از سند، نام تگ عنصر در کنسول ثبت می شود.

نحوه بدست آوردن موقعیت بیدرنگ عنصر

هنگامی که عنصر کلیک شده را دارید، می توانید موقعیت آن را روی صفحه با استفاده از DOM API جاوا اسکریپت پیدا کنید. به طور خاص، getBoundingClientRect() موقعیت عنصر را نسبت به viewport به ما می دهد.

 document .addEventListener( 'click' , ( event ) => { const clickedElement = event.target; const position = clickedElement.getBoundingClientRect(); console .log( `Element: ${clickedElement.tagName} ` ); console .log( `Position: Top - ${position.top} px, Left - ${position.left} px` ); });

توضیح کد:

getBoundingClientRect() : این متد اندازه یک عنصر و موقعیت آن را نسبت به viewport برمی گرداند. چندین ویژگی مفید به شما می دهد:

top : فاصله از بالای درگاه دید.

left : فاصله از سمت چپ درگاه دید.

right : فاصله از لبه چپ تا لبه راست عنصر.

bottom : فاصله از لبه بالا تا لبه پایین عنصر.

مقادیر top و left معمولاً مفیدترین هستند، زیرا به شما می گویند عنصر در کجا قرار گرفته است.

مثال کامل با کد

بیایید همه چیز را کنار هم بگذاریم. ما یک مثال تعاملی ایجاد خواهیم کرد که در آن با کلیک بر روی هر عنصر، نام و موقعیت تگ آن به صورت راهنمای ابزار نمایش داده می شود.

این هم کد کامل:

 <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Detect Clicked Element and Position </ title > < style > body { font-family : Arial, sans-serif; } .tooltip { position : absolute; background-color : #333 ; color : #fff ; padding : 5px ; border-radius : 5px ; font-size : 12px ; display : none; } </ style > </ head > < body > < div class = "tooltip" id = "tooltip" > </ div > < h1 > Click on elements to see their tag and position </ h1 > < p > This is a paragraph. Click on it! </ p > < button > Click me </ button > < div style = "width: 100px; height: 100px; background-color: lightblue;" > Click this box </ div > < script > const tooltip = document .getElementById( 'tooltip' ); document .addEventListener( 'click' , ( event ) => { const clickedElement = event.target; const position = clickedElement.getBoundingClientRect(); // Get the tag name of the clicked element const elementTag = clickedElement.tagName; // Get the element's current position const top = position.top + window .scrollY; // Account for page scroll const left = position.left + window .scrollX; // Display the tooltip near the clicked element tooltip.innerHTML = `Tag: ${elementTag} <br>Position: Top - ${ Math .round(top)} px, Left - ${ Math .round(left)} px` ; tooltip.style.display = 'block' ; tooltip.style.top = ` ${top + 20 } px` ; // Offset to position below the element tooltip.style.left = ` ${left + 20 } px` ; // Offset to position to the right of the element }); document .addEventListener( 'scroll' , () => { tooltip.style.display = 'none' ; // Hide the tooltip when the user scrolls }); </ script > </ body > </ html >

توضیح کد:

ساختار HTML :

tooltip div در ابتدا پنهان است اما زمانی که کاربر روی یک عنصر کلیک می کند به صورت پویا نشان داده می شود.

ما برخی از عناصر قابل کلیک ( h1 ، p ، button ، div ) را برای اهداف نمایش قرار داده ایم.

جاوا اسکریپت :

وقتی روی هر عنصری کلیک می شود، نام و موقعیت تگ آن را با استفاده از event.target و getBoundingClientRect() محاسبه می کنیم.

ما محتوای tooltip را به روز می کنیم و آن را به صورت پویا بر اساس موقعیت عنصر حرکت می دهیم.

window.scrollY و window.scrollX به حساب هر پیمایشی که در صفحه رخ داده است اضافه می شوند.

CSS :

راهنمای ابزار به عنوان یک جعبه کوچک با پس زمینه تیره و متن سفید استایل داده شده است. در ابتدا پنهان است ( display: none ).

وقتی روی یک عنصر کلیک می‌شود، با تنظیم سبک‌های top و left ، راهنمای ابزار در نزدیکی عنصر کلیک‌شده قرار می‌گیرد.

مثال زنده:

در هر نقطه از صفحه وب کلیک کنید، نام تگ و موقعیت عنصر کلیک شده را در یک راهنمای ابزار نمایش داده می شود. این روش برای ایجاد تعاملات سفارشی، اشکال زدایی یا مدیریت طرح‌بندی‌های پیچیده در برنامه‌های کاربردی وب مدرن سودمند است.

بسته بندی

در این آموزش، نحوه استفاده از JavaScript Selection API را برای تعامل با متنی که کاربر انتخاب می‌کند و دستکاری برنامه‌نویسی آن تحلیل کردیم. ما همچنین در مورد تابع document.execCommand() یاد گرفتیم که با وجود منسوخ بودن، به ما امکان می دهد قالب بندی متنی اولیه مانند بولد، ایتالیک و زیرخط را روی محتوای انتخاب شده اعمال کنیم.

ما نشان دادیم که چگونه با استفاده از این ابزارها یک ویرایشگر متن غنی ساده با ویژگی های اساسی بسازیم. ما همچنین نحوه تشخیص اینکه کدام عنصر HTML با استفاده از رویداد click و دسترسی به ویژگی event.target کلیک شده است را توضیح دادیم.

این تکنیک ها پایه و اساس ایجاد ویرایشگرهای متن وب پویا و تعاملی را تشکیل می دهند.

خبرکاو