وقتی نمایش داده می شود اسناد متنیدر مرورگر، موقعیت شکست خط در یک پاراگراف به طور خودکار بسته به اندازه فونت ها و اندازه درگاه نمایش تعیین می شود. شکست خط فقط روی کاراکترهای جداکننده کلمات (مثلاً فاصله) قابل انجام است. گاهی اوقات در اسناد نیاز به تنظیم یک فید خط اجباری است که بدون توجه به تنظیمات مرورگر اجرا می شود. برای این کار از تگ تغذیه خط اجباری استفاده می شود.
، که برچسب پایانی مربوطه ندارد. گنجاندن برچسب
در متن سند اطمینان حاصل می شود که متن بعدی از ابتدا قرار داده شده است خط جدید. به عنوان مثال، این رویکرد می تواند برای ایجاد ساختارهای نوع لیست بدون استفاده از برچسب های نشانه گذاری لیست خاص استفاده شود. یا مثلاً این تگ برای نمایش اشعار و غیره ضروری است.

در اینجا مثالی از استفاده از تغذیه خط اجباری آورده شده است (شکل 1.8):

استفاده از تغذیه خط اجباری

بالای پتروگراد تاریک

نوامبر سرمای پاییزی را تنفس کرد.

عجله در یک موج پر سر و صدا

در لبه حصار باریکش،

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

بی قرار تو رختخوابت

A.S. پوشکین. سوارکار برنزی

برنج. 1.8.برچسب بزنید
می توان از آن برای اجبار شکستن خط استفاده کرد

برخلاف تگ پاراگراف

هنگام استفاده از برچسب
هیچ رشته خالی تولید نخواهد شد.

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

توجه داشته باشید

هنگام استفاده از برچسب
برای شکستن متن، پیچیدن دور یک تصویر یا یک جدول، می‌توانید گزینه CLEAR را برای توقف بسته‌بندی متن تنظیم کنید. در فصل های 3 و 4 می توانید در این مورد بیشتر بخوانید.

برچسب ها تو

شرایطی وجود دارد که لازم است عملیات هدف مخالف انجام شود - منع تغذیه خط. یک برچسب ظرف برای این وجود دارد. . متن علامت گذاری شده با این برچسب بدون در نظر گرفتن طول آن، تضمین می شود که در یک خط باشد. اگر خط حاصل فراتر از نمای مرورگر باشد، یک نوار اسکرول افقی ظاهر می شود.

توجه داشته باشید

برای اطمینان از تداوم متن واقع در سلول های جداول، وجود دارد پارامتر خاصبرچسب NOWRAP در فصل 4 می توانید در این مورد بیشتر بدانید.

علامت گذاری متن با تگ خط بدون شکست شما می توانید بسیار خطوط طولانی. برای جلوگیری از این امر، می‌توانید به مرورگر خواننده بگویید که در کجا ممکن است شکستگی خط رخ دهد، که فقط در صورت نیاز انجام می‌شود (به اصطلاح تغذیه خط "نرم"). این را می توان با قرار دادن انجام داد جای مناسببرچسب متن (Word Break) که همان تگ است
، نیازی به برچسب بسته شدن ندارد.

توجه داشته باشید

برچسب بزنید به هیچ وجه توسط مرورگر Netscape پشتیبانی نمی شود. مرورگر مایکروسافت اینترنت اکسپلورراین تگ را فقط در متن برچسب گذاری شده تشخیص می دهد .

همه یا تقریباً همه در چیدمان استفاده می شوند. چند نفر از ما، کد را قرار می دهیم
فکر می کند: آیا او واقعاً در اینجا مورد نیاز است؟ در میان حروفچینی‌های بی‌تجربه، اغلب می‌توانید طرح‌بندی‌هایی از این نوع را ببینید: طرح‌بندی منو

و همچنین می توانید این پاراگراف های شگفت انگیز را پیدا کنید:

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

درخواست دادن
برای تشکیل پاراگراف ها، مثل کوبیدن میخ ها با یک پیچ گوشتی است (این هم یک ابزار است، چرا یک میخ را چکش نکنیم، یکی دیگر).

تگ برای چیست؟
?

به روز رسانی 02/23/10 - با "ترفندها" با فضای سفید: قبل از آن، باید مراقب باشید، زیرا با این قالب بندی، خطوطی که در بلوک قرار نمی گیرند به طور خودکار در یک خط جدید پیچیده نمی شوند. این به ویژه برای طرح های لاستیکی صادق است. اما در چنین مواردی باید اعمال شود
.

P (فضای سفید: pre;)

یادداشت

جامعه طرفداران چیدمان معنایی اصلاً شامل نشد
که در .

جایی که نباید باشد
?

  • از برچسب ها برای هدف مورد نظر خود استفاده کنید: برای پاراگراف ها، این است< >، برای لیست ها و -< >, < >, < >و غیره.؛
  • برای قالب بندی متن و تنظیم تورفتگی ها از , مانند ;
  • از عناصر جداگانه برای ایجاد خطوط استفاده کنید (عناصر نشانه گذاری خنثی برای این کار مناسب هستند< >و< >).

بیایید به چند مثال عملی نگاه کنیم. پاراگراف ها:

راه حل با عملکرد بالا دارای یک بزرگ است توان عملیاتی- تا 6.2 گیگابیت در ثانیه، و نه تنها برای انتقال صدا و ویدئو، بلکه برای برنامه های جدید که به پهنای باند نیاز دارند، مانند بازی های آنلاین، ایده آل است.

SGSN قادر است تا 1.5 میلیون جلسه PDP فعال را پشتیبانی کند.

P (حاشیه-پایین: 12 پیکسل؛ )

چند خط شماره تلفن:

را HTML
عنصرالف را تولید می کند خط شکستندر متن (کالسکه-بازگشت). برای نوشتن شعر یا آدرسی که تقسیم بندی سطرها قابل توجه است مفید است.

منبع این مثال تعاملی در یک مخزن GitHub ذخیره می شود. اگر می‌خواهید در پروژه نمونه‌های تعاملی مشارکت کنید، لطفاً https://github.com/mdn/interactive-examples را شبیه‌سازی کنید و یک درخواست جذب برای ما ارسال کنید.

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

ویژگی های

ویژگی های منسوخ شده

روشننشان می دهد که خط بعدی بعد از استراحت از کجا شروع شود.

استایل دهی با CSS

را
عنصر یک هدف واحد و کاملاً تعریف شده دارد - ایجاد یک شکست خط در یک بلوک متن. به این ترتیب، هیچ ابعاد یا خروجی بصری به خودی خود ندارد و برای استایل دادن به آن کار بسیار کمی می توانید انجام دهید.

می توانید یک حاشیه تعیین کنید
عناصر خود را برای افزایش فاصله بین خطوط متن در بلوک، اما این یک روش بد است - شما باید از ویژگی line-height که برای این منظور طراحی شده است استفاده کنید.

مثال ها

ساده br

در مثال زیر استفاده می کنیم
عناصر برای ایجاد شکاف بین خطوط مختلف یک آدرس پستی:

موزیلا
331 E. Evelyn Avenue
Mountain View, CA
94041
ایالات متحده آمریکا

نتیجه به نظر می رسد اینگونه است:

نگرانی های دسترسی

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

استفاده کنید

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

خلاصه فنی

دسته بندی محتوا جریان محتوا , عبارت بندی محتوا .
محتوای مجاز هیچ، یک عنصر خالی است.
ماموریت را تگ کنید باید برچسب شروع داشته باشد و نباید تگ پایان داشته باشد. در اسناد XHTML، این عنصر را به صورت بنویسید
.
والدین مجاز هر عنصری که محتوای عبارت را می پذیرد.
نقش های مجاز ARIA هر
رابط DOM ). از HTMLElement به ارث می برد."> HTMLBRElement

مشخصات فنی

مشخصات وضعیت اظهار نظر
استاندارد زندگی HTML
تعریف "
"در آن مشخصات.		 استاندارد زندگی
HTML5
تعریف "
"در آن مشخصات.		 توصیه
مشخصات HTML 4.01
تعریف "
"در آن مشخصات.		 توصیه

سازگاری با مرورگر

جدول سازگاری در این صفحه از داده های ساخت یافته تولید می شود. اگر می‌خواهید در داده‌ها مشارکت کنید، لطفاً https://github.com/mdn/browser-compat-data را بررسی کنید و یک درخواست برای ما ارسال کنید.

داده های سازگاری را در GitHub به روز کنید

دسکتاپسیار
کرومحاشیه، غیرمتمرکزفایرفاکساینترنت اکسپلورراپراسافارینمای وب اندرویدکروم برای اندرویدفایرفاکس برای آندرویداپرا برای اندرویدسافاری در iOSاینترنت سامسونگ
brپشتیبانی کامل کروم 1Edge پشتیبانی کامل بلهپشتیبانی کامل فایرفاکس 1پشتیبانی کامل IE بلهپشتیبانی کامل اپرا بلهسافاری پشتیبانی کامل بله
روشن

منسوخ

پشتیبانی کامل کروم 1Edge پشتیبانی کامل بلهپشتیبانی کامل فایرفاکس 1پشتیبانی کامل IE بلهپشتیبانی کامل اپرا بلهسافاری پشتیبانی کامل بلهWebView Android پشتیبانی کامل بلهChrome Android پشتیبانی کامل بلهفایرفاکس اندروید پشتیبانی کامل 4اپرا اندروید پشتیبانی کامل بلهسافاری iOS پشتیبانی کامل بلهسامسونگ اینترنت اندروید پشتیبانی کامل بله
مرورگر اینترنت اکسپلورر نت اسکیپ اپرا سافاری موزیلا فایرفاکس
نسخه 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
پشتیبانی آره آره آره آره آره آره آره آره آره آره آره آره آره
HTML: 3.2 4 XHTML: 1.0 1.1

شرح

برچسب بزنید
یک خط جدید در مکانی که این تگ در آن قرار دارد تنظیم می کند. برخلاف تگ پاراگراف

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

نحو

متن
متن

گزینه ها

clear به مرورگر می گوید که اگر متن در اطراف یک عنصر شناور قرار می گیرد، چگونه خط بعدی را مدیریت کند.

برچسب بسته شدن

لازم نیست.

مثال 1: استفاده از تگ





BR را تگ کنید


R.L. استیونسون


تابستان در کشور آمده است

هدر دوباره گل می دهد.

اما کسی نیست که بپزد

عسل هدر.


نتیجه این مثالنه انجیر یکی

برنج. 1. نوع متن هنگام استفاده از برچسب

شرح پارامترهای برچسب

پارامتر CLEAR

HTML: 3.2 4 XHTML: 1.0 1.1

شرح

پارامتر clear به مرورگر می گوید که اگر متن در اطراف عنصر شناور بپیچد، چگونه خط بعدی را مدیریت کند. یک عنصر شناور تصویری است که دارای مجموعه پارامتر align یا لایه ای است که روی آن اعمال می شود ویژگی cssشناور .

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

نحو


استدلال ها

all بسته بندی عنصر را از لبه های راست و چپ به طور همزمان خنثی می کند. left جریان سمت چپ عنصر بعد از تگ را معکوس می کند
. right بسته بندی سمت راست عنصر را خنثی می کند. هیچ کدام این ویژگی را لغو نمی کند.

مقدار پیش فرض

آنالوگ CSS

مثال 2: باز کردن متن





برچسب BR، پارامتر پاک کردن


Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


Duis autem dolor in hendrerit in vulputate velit esse molestie consequat، vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au tegue duisdola.


نتیجه مثال در شکل نشان داده شده است. 2.

برنج. 2. لغو بسته بندی متن در اطراف بلوک

توجه داشته باشید

استفاده از پارامتر clear در مشخصات HTML 4 منسوخ شده و به جای آن توصیه می شود. عنصر css clear - BR (روشن: هر دو | چپ | هیچ | راست).

اغلب نیاز به اضافه کردن یک پاراگراف جدید وجود دارد، اما بدون خط خالی که تگ پاراگراف درج می کند

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

برای بسته بندی خطوط اجباری، یک برچسب ویژه ارائه شده است که عملکرد آن در نام آن br تعبیه شده است (ردیف شکستن - "شکستن یک ردیف، خط"). برچسب بزنید
زبان نشانه گذاری فرامتن html به این معنی است که تمام محتوای زیر باید از یک خط جدید شروع شود. در صورت لزوم می توانید چندین تگ را پشت سر هم قرار دهید تا به فاصله دلخواه برسید.

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

مثال شکستن تگ

تگ br در عمل< /title></p><p><р>پیاده روی در سرویس</р></p><p><p>هیچ جای دیگر و هرگز <br></p><p>من آنقدر بد نبودم <br></p><p>سران گروه حریص <br></p><p>منو زنده می جویدن</р></p><p>پیاده روی در سرویس</p><p>هیچ جای دیگر و هرگز <br>من آنقدر بد نبودم <br>سران گروه حریص <br>مرا زنده زنده می خورد</p><h2>ویژگی برچسب <br></h2><p>تنها ویژگی که <a href="https://bar812.ru/fa/oznachaet-teg-br-razryv-stroki-v-html-ispolzuem-teg-br-dlya-chego-prednaznachen-teg.html">تگ html</a> <br>نامیده می‌شود. به مرورگر می‌گوید که اگر متن باید در اطراف یک عنصر به اصطلاح شناور بپیچد، مانند تصویری با ویژگی align با استفاده از مقادیر راست/چپ، یا بلوکی در CSS که دارای یک دارایی شناور</p><p>در مشخصات XHTML 1.0 / HTML 4.01، ویژگی clear فقط با Transitional، Frameset و<!DOCTYPE>، در غیر این صورت کد کار نمی کند.</p><h2>ویژگی های ویژگی را تگ کنید</h2><p>تأثیر اعمال صفت clear به مقدار آن و محل عنصر شناور بستگی دارد. ویژگی می تواند 4 مقدار داشته باشد:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>مقدار سمت چپ مانع از بسته بندی عنصر تراز چپ می شود، بنابراین متن روی برچسب "تلو تلو می خورد" <br>، در زیر تصویر یا سایر عناصر شناور قرار می گیرد.</p><p>دقیقاً همان نتیجه را با استفاده از آرگومان all بدست می آوریم که هرگز به راست یا چپ اجازه نمی دهد.</p><p>مقدار مناسب مانع از پیچیدن متن در اطراف یک عنصر راست چین می شود، بنابراین بعد از تگ <br>متن چاره ای نخواهد داشت جز اینکه تصویر را دور بزند و در اطراف آن به سمت راست جریان یابد.</p><p>مقدار هیچ ("نه شما و نه ما") تمام اختیارات را از صفت واضح و برچسب حذف می کند. <br>بی صدا خط را به پایین می پیچد.</p><p>هیچ مقدار پیش فرضی برای صفت clear تگ وجود ندارد.</p><h2>برچسب بزنید <br>انتقال نرم است</h2><p>برچسب شکست خط برای ایجاد فاصله لازم بین پاراگراف ها بسیار مفید است، که در آن به عنوان یک شکست نرم استفاده می شود، اما نه به عنوان وسیله ای برای تقسیم متن به پاراگراف ها.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>برای قالب بندی متن نباید زیاد از برچسب خط جدید غافل شوید، زیرا نتایج همیشه زیبا نیستند.</p><p>به عنوان مثال، اگر از تگ استفاده می کنید <br>برای ترجمه خطوط داخل یک پاراگراف، اگر کوچکتر از پنجره ای باشد که مدیر وب سایت هدف قرار داده است، یک "شانه" در پنجره کاربر ظاهر شود.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> </div> </div> </div> </div> </article> <script type="text/javascript"> try { var sbmt = document.getElementById('submit'), npt = document.createElement('input'), d = new Date(), __ksinit = function() { sbmt.parentNode.insertBefore(npt, sbmt); }; npt.value = d.getUTCDate() + '' + (d.getUTCMonth() + 1) + 'uniq9065'; npt.name = 'ksbn_code'; npt.type = 'hidden'; sbmt.onmousedown = __ksinit; sbmt.onkeypress = __ksinit; } catch (e) {} </script> <div class="td-sub-footer-container td-container-wrap "> <div class="td-container "> <div class="td-pb-row "> <div class="td-pb-span td-sub-footer-menu "></div> <div class="td-pb-span td-sub-footer-copy ">2022 bar812.ru. فقط در مورد مجتمع برنامه ها. اهن. اینترنت. پنجره ها</div> </div> </div> </div> </div> <script data-cfasync="false" type="text/javascript"> if (window.addthis_product === undefined) { window.addthis_product = "wpwt"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpwt-3.1.2"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.9.1"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = { "data_track_clickback": true, "ui_language": "ru", "ui_atversion": "300" }; } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = { "info_status": "enabled", "cms_name": "WordPress", "plugin_name": "Website Tools by AddThis", "plugin_version": "3.1.2", "plugin_mode": "AddThis", "anonymous_profile_id": "wp-f2d21fd70bfc0c32605b4e5e1e4ff912", "page_info": { "template": "posts", "post_type": "" }, "sharing_enabled_on_post_via_metabox": false }; } (function() { var first_load_interval_id = setInterval(function() { if (typeof window.addthis !== 'undefined') { window.clearInterval(first_load_interval_id); if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) { window.addthis.layers(window.addthis_layers); } if (Array.isArray(window.addthis_layers_tools)) { for (i = 0; i < window.addthis_layers_tools.length; i++) { window.addthis.layers(window.addthis_layers_tools[i]); } } } }, 1000) }()); </script> <script type='text/javascript'> var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; </script> <script type='text/javascript' src='https://bar812.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=bbebb9a04042e1d7d3625bab0b5e9e4f'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> <div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar"> <header> <a title="ویرایشگر" class="tdw-tab tdc-tab-active" href="#" data-tab-content="tdw-tab-editor">با Live CSS ویرایش کنید</a> <div class="tdw-less-info" title="هنگامی که خطا در CSS و LESS شما شناسایی شود، قرمز خواهد بود"></div> </header> <div class="tdw-content"> <div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active"> <script> (function(jQuery, undefined) { jQuery(window).ready(function() { if ('undefined' !== typeof tdcAdminIFrameUI) { var $liveIframe = tdcAdminIFrameUI.getLiveIframe(); if ($liveIframe.length) { $liveIframe.load(function() { $liveIframe.contents().find('body').append('<textarea class="tdw-css-writer-editor" style="display: none"></textarea>'); }); } } }); })(jQuery); </script> <textarea class="tdw-css-writer-editor td_live_css_uid_1_5a5dc1e76f1d6"></textarea> <div id="td_live_css_uid_1_5a5dc1e76f1d6" class="td-code-editor"></div> <script> jQuery(window).load(function() { if ('undefined' !== typeof tdLiveCssInject) { tdLiveCssInject.init(); var editor_textarea = jQuery('.td_live_css_uid_1_5a5dc1e76f1d6'); var languageTools = ace.require("ace/ext/language_tools"); var tdcCompleter = { getCompletions: function(editor, session, pos, prefix, callback) { if (prefix.length === 0) { callback(null, []); return } if ('undefined' !== typeof tdcAdminIFrameUI) { var data = { error: undefined, getShortcode: '' }; tdcIFrameData.getShortcodeFromData(data); if (!_.isUndefined(data.error)) { tdcDebug.log(data.error); } if (!_.isUndefined(data.getShortcode)) { var regex = /el_class=\"([A-Za-z0-9_-]*\s*)+\"/g, results = data.getShortcode.match(regex); var elClasses = {}; for (var i = 0; i < results.length; i++) { var currentClasses = results[i] .replace('el_class="', '') .replace('"', '') .split(' '); for (var j = 0; j < currentClasses.length; j++) { if (_.isUndefined(elClasses[currentClasses[j]])) { elClasses[currentClasses[j]] = ''; } } } var arrElClasses = []; for (var prop in elClasses) { arrElClasses.push(prop); } callback(null, arrElClasses.map(function(item) { return { name: item, value: item, meta: 'in_page' } })); } } } }; languageTools.addCompleter(tdcCompleter); window.editor = ace.edit("td_live_css_uid_1_5a5dc1e76f1d6"); // 'change' handler is written as function because it's called by tdc_on_add_css_live_components (of wp_footer hook) // We did it to reattach the existing compiled css to the new content received from server. window.editorChangeHandler = function() { //tdwState.lessWasEdited = true; window.onbeforeunload = function() { if (tdwState.lessWasEdited) { return "You have attempted to leave this page. Are you sure?"; } return false; }; var editorValue = editor.getSession().getValue(); editor_textarea.val(editorValue); if ('undefined' !== typeof tdcAdminIFrameUI) { tdcAdminIFrameUI.getLiveIframe().contents().find('.tdw-css-writer-editor:first').val(editorValue); // Mark the content as modified // This is important for showing info when composer closes tdcMain.setContentModified(); } tdLiveCssInject.less(); }; editor.getSession().setValue(editor_textarea.val()); editor.getSession().on('change', editorChangeHandler); editor.setTheme("ace/theme/textmate"); editor.setShowPrintMargin(false); editor.getSession().setMode("ace/mode/less"); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: false }); } }); </script> </div> </div> <footer> <a href="#" class="tdw-save-css">صرفه جویی</a> <div class="tdw-more-info-text">CSS OR LESS را بنویسید و save را بزنید. CTRL + SPACE برای تکمیل خودکار.</div> <div class="tdw-resize"></div> </footer> </div> <script type="text/javascript" defer src="https://bar812.ru/wp-content/cache/autoptimize/js/autoptimize_d85127d8732b44d62e81e0455b3d3cb7.js"></script> </body> </html>