Возможно добавить кодовые блоки в теги без использования библиотек? [закрыто]</h1> <p> Javascript. Цифровое Кемерово </p> <p class="skiplink"><a href="#start_here">Перейти к содержимому</a></p> </div> </div> </div> <div class="navbar" role="navigation"> <div class="inner"> <ul id="nav-main" class="nav-main linklist" role="menubar"> <li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true"> <a href="#" class="dropdown-trigger"> <i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>Меню</span> </a> <div class="dropdown"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents" role="menu"> <li class="separator"></li> <li> <a href="./search.php?search_id=unanswered" role="menuitem"> <i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Темы без ответов</span> </a> </li> <li> <a href="./search.php?search_id=active_topics" role="menuitem"> <i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>Активные темы</span> </a> </li> <li class="separator"></li> <li> <a href="./search.php" role="menuitem"> <i class="icon fa-search fa-fw" aria-hidden="true"></i><span>Поиск</span> </a> </li> <li class="separator"></li> <a href="./viewtopic.php?t=346275&ver=mobi" title="Мобильная версия"><img style="vertical-align: middle;" src="https://stackoverflow.forums.wiki/ext/bb3mobi/MobileDevices/mobile.gif" alt="Мобильная версия" /> Мобильная версия</a> </ul> </div> </li> <li class="rightside" data-skip-responsive="true"> <a href="./ucp.php?mode=login&redirect=viewtopic.php%3Ft%3D346275" title="Вход" accesskey="x" role="menuitem"> <i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>Вход</span> </a> </li> <li class="rightside" data-skip-responsive="true"> <a href="./ucp.php?mode=register" role="menuitem"> <i class="icon fa-pencil-square-o fa-fw" aria-hidden="true"></i><span>Регистрация</span> </a> </li> </ul> <ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar"> <li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList"> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope><a itemprop="item" href="./" accesskey="h" data-navbar-reference="index"><i class="icon fa-home fa-fw"></i><span itemprop="name">Форум программистов</span></a><meta itemprop="position" content="1" /></span> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope data-forum-id="25"><a itemprop="item" href="./viewforum.php?f=25"><span itemprop="name">Кемерово-IT</span></a><meta itemprop="position" content="2" /></span> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope data-forum-id="33"><a itemprop="item" href="./viewforum.php?f=33"><span itemprop="name">Javascript</span></a><meta itemprop="position" content="3" /></span> </li> <li class="right rightside"><select onchange="document.location.href = this.options[this.selectedIndex].value;"><option value="-1">Создать новую тему без регистрации в...</option><option value="./posting.php?mode=post&f=25">Кемерово-IT</option><option value="./posting.php?mode=post&f=33">   Javascript</option><option value="./posting.php?mode=post&f=17">   C#</option><option value="./posting.php?mode=post&f=16">   JAVA</option><option value="./posting.php?mode=post&f=38">   Elasticsearch aggregation</option><option value="./posting.php?mode=post&f=39">   Python</option><option value="./posting.php?mode=post&f=9">   Php</option><option value="./posting.php?mode=post&f=40">   Android</option><option value="./posting.php?mode=post&f=41">   Html</option><option value="./posting.php?mode=post&f=42">   Jquery</option><option value="./posting.php?mode=post&f=43">   C++</option><option value="./posting.php?mode=post&f=45">   IOS</option><option value="./posting.php?mode=post&f=44">   CSS</option><option value="./posting.php?mode=post&f=7">   Excel</option><option value="./posting.php?mode=post&f=48">   Linux</option><option value="./posting.php?mode=post&f=49">   Apache</option><option value="./posting.php?mode=post&f=11">   MySql</option><option value="./posting.php?mode=post&f=28">Детский мир</option><option value="./posting.php?mode=post&f=26">Для души</option><option value="./posting.php?mode=post&f=13">   Музыкальные инструменты даром</option><option value="./posting.php?mode=post&f=19">   Печатная продукция даром</option><option value="./posting.php?mode=post&f=32">Внешняя красота и здоровье</option><option value="./posting.php?mode=post&f=18">   Одежда и обувь для взрослых даром</option><option value="./posting.php?mode=post&f=20">   Товары для здоровья</option><option value="./posting.php?mode=post&f=34">   Физкультура и спорт</option><option value="./posting.php?mode=post&f=8">Техника - даром!</option><option value="./posting.php?mode=post&f=14">   Автомобилистам</option><option value="./posting.php?mode=post&f=27">   Компьютерная техника</option><option value="./posting.php?mode=post&f=31">   Плиты: газовые и электрические</option><option value="./posting.php?mode=post&f=23">   Холодильники</option><option value="./posting.php?mode=post&f=21">   Стиральные машины</option><option value="./posting.php?mode=post&f=22">   Телевизоры</option><option value="./posting.php?mode=post&f=30">   Телефоны, смартфоны, плашеты</option><option value="./posting.php?mode=post&f=24">   Швейные машинки</option><option value="./posting.php?mode=post&f=10">   Прочая электроника и техника</option><option value="./posting.php?mode=post&f=35">      Фототехника</option><option value="./posting.php?mode=post&f=29">Ремонт и интерьер</option><option value="./posting.php?mode=post&f=15">   Стройматериалы, инструмент</option><option value="./posting.php?mode=post&f=12">   Мебель и предметы интерьера даром</option><option value="./posting.php?mode=post&f=47" disabled="disabled" class="disabled-option">   Cантехника</option><option value="./posting.php?mode=post&f=1">Другие темы</option><option value="./posting.php?mode=post&f=6">   Разное даром</option><option value="./posting.php?mode=post&f=36">   Давай меняться!</option><option value="./posting.php?mode=post&f=37">   Отдам\возьму за копеечку</option><option value="./posting.php?mode=post&f=46">   Работа и подработка в Кемерове</option><option value="./posting.php?mode=post&f=2">   Давай с тобой поговорим...</option></select></li> <li id="search-box" class="search-box rightside responsive-hide"> <form action="./search.php" method="get" id="search"> <fieldset> <input name="keywords" id="keyword" type="search" maxlength="128" title="Ключевые слова" class="inputbox search tiny" size="20" value="" placeholder="Поиск по форуму…" > <button class="button button-search" type="submit" title="Поиск"> <i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Поиск</span> </button> <a href="./search.php" class="button button-search-end" title="Расширенный поиск"> <i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">Расширенный поиск</span> </a> </fieldset> </form> </li> <li class="rightside responsive-search"> <a href="./search.php" title="Параметры расширенного поиска" role="menuitem"> <i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Поиск</span> </a> </li> </ul> </div> </div> </div> <div class="phpbb-ads" style="" data-phpbb-ads-id="2"> <div id="ad3090-658a71-10612" class="ad3090-658a71"></div> </div> <a id="start_here" class="anchor"></a> <div id="page-body" class="page-body" role="main"> <h2 class="topic-title"><a href="./viewtopic.php?t=346275">Возможно добавить кодовые блоки в теги <textarea> без использования библиотек? [закрыто]</a> ⇐ <font size = "2"><a href="./viewforum.php?f=33">Javascript</a> </font></h2> <!-- NOTE: remove the style="display: none" when you want to have the forum description on the topic body --> <div style="display: none !important;">Форум по Javascript<br /></div> <div class="action-bar bar-top"> <a href="./posting.php?mode=reply&t=346275" class="button" title="Ответить"> <span>Ответить</span> <i class="icon fa-reply fa-fw" aria-hidden="true"></i> </a> <div class="search-box" role="search"> <form method="get" id="topic-search" action="./search.php"> <fieldset> <input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="Поиск в теме…" /> <button class="button button-search" type="submit" title="Поиск"> <i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Поиск</span> </button> <a href="./search.php" class="button button-search-end" title="Расширенный поиск"> <i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">Расширенный поиск</span> </a> <input type="hidden" name="t" value="346275" /> <input type="hidden" name="sf" value="msgonly" /> </fieldset> </form> </div> <div class="pagination"> 1 сообщение • Страница <strong>1</strong> из <strong>1</strong> </div> </div> <div id="qr_posts"> <div class="post-container"> <div id="p354918" class="post has-profile bg2"> <div class="inner"> <dl class="postprofile" id="profile354918"> <dt class="no-profile-rank no-avatar"> <div class="avatar-container"> </div> <strong><span class="username">Anonymous</span></strong> </dt> </dl> <div class="postbody"> <div id="post_content354918">  <a href="#p354918">Возможно добавить кодовые блоки в теги <textarea> без использования библиотек? [закрыто]</a> <ul class="post-buttons"> <li> <a href="./posting.php?mode=quote&p=354918" title="Ответить с цитатой" class="button button-icon-only"> <i class="icon fa-quote-left fa-fw" aria-hidden="true"></i><span class="sr-only">Цитата</span> </a> </li> </ul> <p class="author"> <a class="unread" href="./viewtopic.php?p=354918#p354918" title="Сообщение"> <i class="icon fa-file fa-fw icon-lightgray icon-md" aria-hidden="true"></i><span class="sr-only">Сообщение</span> </a> <span class="responsive-hide"> <strong><span class="username">Anonymous</span></strong> » </span><time datetime="2025-07-18T10:27:14+00:00">18 июл 2025, 13:27</time> </p> <div class="content"> Можно ли получить кодовые блоки, как те, которые назначили фон и шрифт , внутри ? To visualize, the Notion note-taking app allows users to type plain texts and code blocks at the same time (although they didn't do it as tags):<br> <img src="https://i.sstatic.net/A29K2zM8.png" class="postimage" alt="Изображение"><br> <br> Is it possible to realize this without using libraries Как Tinymce, сделанный в ванильном JavaScript или React? Я понимаю, что данные подаренной формы типа строки, что затрудняет преобразование в другие типы. <br> Спасибо! <br> <br> Подробнее здесь: <a href="https://stackoverflow.com/questions/79705000/possible-to-add-code-blocks-to-textarea-tags-without-using-libraries" class="exlinks" rel="nofollow" target="_blank">https://stackoverflow.com/questions/797 ... -libraries</a></div> </div> </div> <div class="back2top"> <a href="#top" class="top" title="Вернуться к началу"> <i class="icon fa-chevron-circle-up fa-fw icon-gray" aria-hidden="true"></i> <span class="sr-only">Вернуться к началу</span> </a> </div> </div> </div> <pre id="qr_time354918" style="display: none;">1752834434</pre> <pre id="qr_author_p354918" style="display: none;" data-id="1">Anonymous</pre> <pre id="decoded_p354918" style="display: none;"> Можно ли получить кодовые блоки, как те, которые назначили фон и шрифт , внутри ? To visualize, the Notion note-taking app allows users to type plain texts and code blocks at the same time (although they didn't do it as tags):<br />[img]https://i.sstatic.net/A29K2zM8.png[/img]<br /><br />Is it possible to realize this without using libraries Как Tinymce, сделанный в ванильном JavaScript или React? Я понимаю, что данные подаренной формы типа строки, что затрудняет преобразование в другие типы. <br />Спасибо! <br /><br />Подробнее здесь: [url]https://stackoverflow.com/questions/79705000/possible-to-add-code-blocks-to-textarea-tags-without-using-libraries[/url]</pre> </div></div> <div id="qr_temp_container" style="display: none;"></div> <div class="pagination_next"> </div> <div class="action-bar bar-bottom"> <a href="./posting.php?mode=reply&t=346275" class="button" title="Ответить"> <span>Ответить</span> <i class="icon fa-reply fa-fw" aria-hidden="true"></i> </a> <div class="pagination"> 1 сообщение • Страница <strong>1</strong> из <strong>1</strong> </div> </div> <form method="post" action="./posting.php?mode=reply&f=33&t=346275" id="qr_postform"> <div class="panel"> <div class="inner"> <h2 class="quickreply-title">Быстрый ответ</h2> <fieldset class="fields1"> <dl style="clear: left;"> <dt><label for="subject">Заголовок:</label></dt> <dd><input type="text" name="subject" id="subject" size="45" maxlength="124" tabindex="2" value="Re: Возможно добавить кодовые блоки в теги <textarea> без использования библиотек? [закрыто]" class="inputbox autowidth" /></dd> </dl> <input type="hidden" name="subject" value="Re: Возможно добавить кодовые блоки в теги <textarea> без использования библиотек? [закрыто]" /> <dl style="clear: left;"> <dt><label for="username">Имя пользователя:</label></dt> <dd><input type="text" tabindex="1" name="username" id="username" size="25" value="" class="inputbox autowidth" /></dd> </dl> <script> var form_name = 'qr_postform'; var text_name = 'message'; var load_draft = false; var upload = false; // Define the bbCode tags var bbcode = new Array(); var bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]','[flash=]', '[/flash]','[size=]','[/size]', '[H2]', '[/H2]', '[H3]', '[/H3]', '[H4]', '[/H4]', '[center]', '[/center]', '[hr]', '[/hr]', '[s]', '[/s]', '[scroll]', '[/scroll]', '[spoiler=]', '', '[youtube]', '[/youtube]'); var imageTag = false; function change_palette() { phpbb.toggleDisplay('colour_palette'); e = document.getElementById('colour_palette'); if (e.style.display == 'block') { document.getElementById('bbpalette').value = 'Скрыть панель цветов'; } else { document.getElementById('bbpalette').value = 'Цвет шрифта'; } } function qr_formatToggle(s) { var t = '', sc = s.length, c; for (i = 0; i < sc; i++) { c = s.charAt(i); if (c.toLowerCase() == c) c = c.toUpperCase(); else if (c.toUpperCase() == c) c = c.toLowerCase(); t += c; } return t; } // param: reg = 0 - lowercase, reg = 1 - uppercase, reg = 2 - inverse function qr_updateCase(reg) { var buf = '', selection = null, start, end; var txtarea = document.forms[form_name].elements[text_name]; if (document.selection) { selection = document.selection.createRange(); buf = selection.text; } else if (typeof (txtarea.selectionStart) == "number") { start = txtarea.selectionStart; end = txtarea.selectionEnd; if (start != end) buf = txtarea.value.substr(start, end - start); else buf = txtarea.value; } else { buf = txtarea.value; } switch (parseInt(reg)) { case 0: buf = buf.toLowerCase(); break; case 1: buf = buf.toUpperCase(); break; case 2: buf = qr_formatToggle(buf); break; } if (selection) { selection.text = buf; } else if (start != end) { txtarea.value = txtarea.value.substr(0, start) + buf + txtarea.value.substr(end); } else { txtarea.value = buf; } txtarea.focus(); } </script> <div id="colour_palette" style="display: none;"> <dl style="clear: left;"> <dt><label>Цвет шрифта:</label></dt> <dd id="color_palette_placeholder" class="color_palette_placeholder" data-color-palette="h" data-height="12" data-width="15" data-bbcode="true"></dd> </dl> </div> <div id="format-buttons" class="format-buttons"> <button type="button" class="button button-icon-only bbcode-b" accesskey="b" name="addbbcode0" value=" B " onclick="bbstyle(0)" title="Жирный текст: [b]текст[/b]"> <i class="icon fa-bold fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-i" accesskey="i" name="addbbcode2" value=" i " onclick="bbstyle(2)" title="Наклонный текст: [i]текст[/i]"> <i class="icon fa-italic fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-u" accesskey="u" name="addbbcode4" value=" u " onclick="bbstyle(4)" title="Подчёркнутый текст: [u]текст[/u]"> <i class="icon fa-underline fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-quote" accesskey="q" name="addbbcode6" value="Quote" onclick="bbstyle(6)" title="Цитата: [quote]текст[/quote]"> <i class="icon fa-quote-left fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-code" accesskey="c" name="addbbcode8" value="Code" onclick="bbstyle(8)" title="Код: [code]code[/code]"> <i class="icon fa-code fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-list" accesskey="l" name="addbbcode10" value="List" onclick="bbstyle(10)" title="Список: [list][*]текст[/list]"> <i class="icon fa-list fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-list-" accesskey="o" name="addbbcode12" value="List=" onclick="bbstyle(12)" title="Упорядоченный список: [list=1][*]Пункт первый[/list] или [list=a][*]Пункт a[/list]"> <i class="icon fa-list-ol fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-asterisk" accesskey="y" name="addlistitem" value="[*]" onclick="bbstyle(-1)" title="Элемент списка: [*]текст"> <i class="icon fa-asterisk fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-url" accesskey="w" name="addbbcode16" value="URL" onclick="bbstyle(16)" title="Вставить ссылку: [url]http://url[/url] или [url=http://url]Текст ссылки[/url]"> <i class="icon fa-link fa-fw" aria-hidden="true"></i> </button> <button type="button" class="button button-icon-only bbcode-color" name="bbpalette" id="bbpalette" value="Цвет шрифта" onclick="change_palette();" title="Цвет шрифта: [color=red]текст[/color] или [color=#FF0000]текст[/color]"> <i class="icon fa-tint fa-fw" aria-hidden="true"></i> </button> <select name="addbbcode20" class="bbcode-size" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="Размер шрифта: [size=85]маленький шрифт[/size]"> <option value="50">Очень маленький</option> <option value="85">Маленький</option> <option value="100" selected="selected">Нормальный</option> <option value="150">Большой</option> <option value="200">Огромный</option> </select> <button type="button" class="button button-secondary bbcode-H2" name="addbbcode22" value="H2" onclick="bbstyle(22)" title="Заголовок второго уровня: [h2]текст[/h2]"> H2 </button> <button type="button" class="button button-secondary bbcode-H3" name="addbbcode24" value="H3" onclick="bbstyle(24)" title="Заголовок третьего уровня: [h3]текст[/h3]"> H3 </button> <button type="button" class="button button-secondary bbcode-H4" name="addbbcode26" value="H4" onclick="bbstyle(26)" title="Заголовок четвёртого уровня: [h4]текст[/h4]"> H4 </button> <button type="button" class="button button-secondary bbcode-center" name="addbbcode28" value="center" onclick="bbstyle(28)" title="По центру: [center]текст[/center]"> center </button> <button type="button" class="button button-secondary bbcode-hr" name="addbbcode30" value="hr" onclick="bbstyle(30)" title=""> hr </button> <button type="button" class="button button-secondary bbcode-s" name="addbbcode32" value="s" onclick="bbstyle(32)" title="Зачёркнутый текст: [s]текст[/s]"> s </button> <button type="button" class="button button-secondary bbcode-scroll" name="addbbcode34" value="scroll" onclick="bbstyle(34)" title="Бегущая строка"> scroll </button> <button type="button" class="button button-secondary bbcode-spoiler-" name="addbbcode36" value="spoiler=" onclick="bbstyle(36)" title="Скрытый текст: [spoiler=заголовок]текст[/spoiler]"> spoiler= </button> <button type="button" class="button button-secondary bbcode-youtube" name="addbbcode38" value="youtube" onclick="bbstyle(38)" title="Вставить видео из Youtube. Между тэгами вставьте ID - символы, которые в ссылке после v=. Например, [youtube]eSdLpdW7re3[/youtube]"> youtube </button> </div> <div id="register-and-translit"> <abbr style="border-bottom:1px dashed #777; cursor:help;" title="Для изменения регистра выделите часть текста и нажмите нужную кнопку">Изменение регистра текста:</abbr>  <input type="button" class="button button-secondary" accesskey="t" name="uppercase" value="▲ АБВ" onclick="qr_updateCase(1)" title="ВЕРХНИЙ РЕГИСТР" /> <input type="button" class="button button-secondary" accesskey="t" name="lowercase" value="▼ абв" onclick="qr_updateCase(0)" title="нижний регистр" /> <input type="button" class="button button-secondary" accesskey="t" name="inverscase" value="▼▲ аБВ" onclick="qr_updateCase(2)" title="иНВЕРСИЯ рЕГИСТРА" /> </div> <div id="smiley-box" class="smiley-box"> <strong>Смайлики</strong><br /> <a href="#" onclick="insert_text(':)', true); return false;"><img src="./images/smilies/smile.gif" width="20" height="24" alt=":)" title="Smile" /></a> <a href="#" onclick="insert_text(':(', true); return false;"><img src="./images/smilies/sad.gif" width="20" height="24" alt=":(" title="Sad" /></a> <a href="#" onclick="insert_text(':oops:', true); return false;"><img src="./images/smilies/blush.gif" width="25" height="25" alt=":oops:" title="Embarassed" /></a> <a href="#" onclick="insert_text(':roll:', true); return false;"><img src="./images/smilies/rolleyes.gif" width="20" height="20" alt=":roll:" title="Rolling Eyes" /></a> <a href="#" onclick="insert_text(':wink:', true); return false;"><img src="./images/smilies/wink.gif" width="20" height="20" alt=":wink:" title="Wink" /></a> <a href="#" onclick="insert_text(':muza:', true); return false;"><img src="./images/smilies/smile34.gif" width="48" height="55" alt=":muza:" title="Muza" /></a> <a href="#" onclick="insert_text(':clever:', true); return false;"><img src="./images/smilies/clever.gif" width="25" height="22" alt=":clever:" title="clever" /></a> <a href="#" onclick="insert_text(':sorry:', true); return false;"><img src="./images/smilies/sorry.gif" width="24" height="22" alt=":sorry:" title="Sorry" /></a> <a href="#" onclick="insert_text(':angel:', true); return false;"><img src="./images/smilies/angel.gif" width="27" height="23" alt=":angel:" title="Angel" /></a> <a href="#" onclick="insert_text(':read:', true); return false;"><img src="./images/smilies/smile235.gif" width="35" height="45" alt=":read:" title="Read" /></a> <a href="#" onclick="insert_text('*x)', true); return false;"><img src="./images/smilies/facepalmm.gif" width="19" height="19" alt="*x)" title="facepalm" /></a> <br /><a href="./posting.php?mode=smilies&f=33" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">Ещё смайлики…</a> </div> <div id="message-box" class="message-box"> <textarea style="height: 9em;" name="message" rows="7" cols="76" tabindex="3" class="inputbox">