---
title: Панель инструментов редактора MDN
slug: orphaned/MDN/Editor/Basics/Toolbar
tags:
  - Beginner
  - editor
translation_of: MDN/Editor/Basics/Toolbar
original_slug: MDN/Editor/Basics/Toolbar
---
<div>{{MDNSidebar}}</div>

<p class="summary">Панель инструментов редактора предоставляет вам возможность менять внешний вид и структуру документов во время работы. Эта статья описывает назначение кнопок в панели инструментов.  </p>

<p>На панели расположено три ряда. На первых двух - кнопки, а на третьем HTML контекст, который показывает вам какой элемент вы редактируете в данный момент. На скриншоте ниже, например, редактирование происходит в {{htmlelement("p")}} элементе. </p>

<p><img alt="Screenshot of the toolbar, with labels for the button groups" src="https://mdn.mozillademos.org/files/15269/toolbar-labeled.png" style="border-style: solid; border-width: 2px; float: right; height: 142px; width: 725px;">Кнопки на панели инструментов разделены на девять групп. Давайте взглянем на все. Мы будем изучать кнопки в каждой группе по порядку, слева направо.</p>

<ul>
 <li><a href="#Документ">Документ</a></li>
 <li><a href="#Правка">Правка</a></li>
 <li><a href="#Работа_с_текстом">Работа с текстом</a></li>
 <li><a href="#Вид">Вид</a></li>
 <li><a href="#Строковые_стили">Строковые стили</a></li>
 <li><a href="#Работа_со_ссылками">Работа со ссылками</a></li>
 <li><a href="#Специальные_стили">Специальные стили</a></li>
 <li><a href="#Блоки">Блоки</a></li>
 <li><a href="#Списки_и_поток_текста">Списки и поток текста</a></li>
 <li><a href="#Медиа">Медиа</a></li>
</ul>

<h2 id="Документ">Документ</h2>

<p>Кнопки из этой группы используются для управления на уровне всего документа.</p>

<dl>
 <dt>Source</dt>
 <dd>Кнопка <strong>Source</strong> позволяет переключаться между редактированием в режиме WYSIWYG и редактированием разметки HTML. Мы просим вас избегать редактирования разметки, т.к. в таком случае очень легко неправильно оформить статью или вовсе столкнуться с ошибками. Правда в настоящее время у редактора могут встречаться некоторые причуды в работе, из-за которых сделать некоторые вещи не удастся, не отредактировав разметку напрямую. Смотрите <a href="https://developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Source_mode">Режим разметки в редакторе MDN</a> чтобы более подробно изучить этот режим и понять что в разметке писать можно, а чего писать не следует.</dd>
 <dt>Publish</dt>
 <dd>То же что и кнопка <strong>Опубликовать</strong>.</dd>
</dl>

<div class="note">
<p><strong>Примечание:</strong> Если вы пытаетесь сохранить вашу работу и ваши изменения отклоняются как некорректные, но вы уверены, что ваш контент подходит для MDN, вам следует связаться с <a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&amp;body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">командой редакторов</a> для разрешения проблемы.</p>
</div>

<dl>
 <dt>Preview</dt>
 <dd>Аналог кнопки <strong>Предварительный просмотр</strong>.</dd>
</dl>

<h2 id="Правка">Правка</h2>

<p>Функции этих кнопок очень схожи с соответствующими из меню <strong>Правка </strong>в любом другом редакторе.</p>

<dl>
 <dt>Paste / Вставить</dt>
 <dd>Вставить контент из буфера обмена в поле редактора.</dd>
 <dt>Paste as plain text / Вставить как обычный текст</dt>
 <dd>Открывает диалоговое окно в которое вы можете вставить текст. Этот текст будет отделен от всего лишнего, так что вы не вставите случайно текст с лишними стилями или ссылками. После вставки текста, вы можете его отредактировать, если нужно, а затем, кликнув на кнопку <strong>OK</strong>, вставить на страницу.</dd>
 <dd>
 <div class="note">
 <p><strong>Примечание:</strong> Обратите внимание, что во время вставки контента в редактор, если вы копировали стилизованный контент (например, скопированный с другого сайта  код  с подсветкой синтаксиса),  вы можете случайно вставить вместе с ним стили или посторонние классы. Пожалуйста, будьте внимательны и не допускайте этого. Проверяйте свои изменения в режиме разметки, если требуется, чтобы удалить лишние стили и классы (или позаботьтесь об этом заранее, воспользовавшись кнопкой "Paste as plain text").</p>
 </div>
 </dd>
 <dt>Undo</dt>
 <dd>Отменить последнее изменение.</dd>
 <dt>Redo</dt>
 <dd>Применить последнее отмененное изменение.</dd>
</dl>

<h2 id="Работа_с_текстом">Работа с текстом</h2>

<dl>
 <dt>Find / Найти</dt>
 <dd>Открывает диалоговое окно <strong>Find and Replace</strong> в режиме "Find", который позволяет найти в вашем документе определенную строку.</dd>
 <dt>Replace / Заменить</dt>
 <dd>Открывает диалоговое окно <strong>Find and Replace</strong> в режиме "Replace", с помощью которого можно найти нужную строку и заменить на новую.</dd>
</dl>

<p>Кнопки <strong>Find</strong> и <strong>Replace</strong> открывают одно и то же диалоговое окно, которое имеет несколько опций для поиска и, опционально, замены текста.</p>

<dl>
 <dt>Spell Checker / Проверка правописания</dt>
 <dd>Эта кнопка открывает меню с несколькими пунктами:
 <dl>
  <dt>Enable SCAYT/Disable SCAYT</dt>
  <dd>Включает или отключает Spell Check As You Type (SCAYT)</dd>
  <dt>Options</dt>
  <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке с опциями для настройки SCAYT.</dd>
  <dt>Languages</dt>
  <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "Languages", где вы можете выбрать язык для проверки правописания.</dd>
  <dt>Dictionaries</dt>
  <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "Dictionaries", где вы можете сами выбрать словарь, который SCAYT будет использовать.</dd>
  <dt>About SCAYT</dt>
  <dd>Если SCAYT включен, этот пункт открывает диалоговое окно SCAYT во вкладке "About", в которой написано о SCAYT.</dd>
  <dt>Check Spelling</dt>
  <dd>Этот пункт открывает диалоговое окно Spell Checker, в котором вы можете проверить правописание в пакетном режиме (batch mode) для всего документа. Вы можете воспользоваться вкладкой Grammar для проверки грамматических ошибок, или воспользоваться вкладкой Thesaurus для поиска синонимов для слов в документе.</dd>
 </dl>
 </dd>
</dl>

<h2 id="Вид">Вид</h2>

<p>Эта группа позволяет настроить вид отображения интерфейса редактора. </p>

<dl>
 <dt>Maximize</dt>
 <dd>Эта кнопка разворачивает интерфейс редактора (то есть панель инструментов и поле редактирования) во всё окно браузера, предоставляя вам как можно больше места для работы.</dd>
 <dt>Show blocks</dt>
 <dd>Эта кнопка отображает контуры вокруг блочных элементов в вашем документе. Это может быть удобным для проверки структуры документа без необходимости заглядывать в разметку.</dd>
</dl>

<h2 id="Строковые_стили">Строковые стили</h2>

<p>Строковые стили содержат распространенные стили, которые могут вам пригодиться при оформлении текста.</p>

<dl>
 <dt>Bold</dt>
 <dd>Переключает <strong>жирный</strong> стиль текста, создавая при этом в разметке элемент {{htmlelement("strong")}}.</dd>
 <dt>Italic</dt>
 <dd>Переключает <em>курсив</em>. Создает {{htmlelement("em")}} элемент.</dd>
 <dt>Underline</dt>
 <dd>Переключает <u>нижнее подчеркивание</u>. Создает {{htmlelement("u")}} элемент.</dd>
 <dt>Strike through</dt>
 <dd>Переключает <s>перечеркивание</s>. Создает {{htmlelement("s")}} элемент.</dd>
 <dt>Subscript</dt>
 <dd>Переключает <sub>нижний индекс</sub>. Создает {{htmlelement("sub")}} элемент.</dd>
 <dt>Superscript</dt>
 <dd>Переключает <sup>верхний индекс</sup>. Создает {{htmlelement("sup")}} элемент. Заметьте, что такой строковый стиль не используется на MDN, так что вам вряд ли когда-нибудь пригодится эта кнопка.</dd>
 <dt>Remove format</dt>
 <dd>Удаляет текущий строковый стиль в выделенном тексте.</dd>
 <dt>Code</dt>
 <dd>Переключает стиль для <code>кода</code>. Создает {{htmlelement("code")}} элемент. Это используется для представления в тексте имен переменных, функций, объектов, файлов и т.п.</dd>
</dl>

<h2 id="Работа_со_ссылками">Работа со ссылками</h2>

<p>Данная группа предоставляет инструменты для работы со ссылками.</p>

<dl>
 <dt>Link</dt>
 <dd>Создает новую ссылку. При нажатии вызывается окно создания ссылки, работа с которым подробна описана в <a href="/ru/docs/MDN/Contribute/Editor/Links#Using_the_toolbar">Ссылки с помощью панели инструментов</a>.</dd>
 <dt>Unlink</dt>
 <dd>Удаляет ссылку в месте, где расположен курсор.</dd>
 <dt>Anchor</dt>
 <dd>Создает якорь в месте, где расположен курсор. Заметьте, что вам не нужно создавать якорь для заголовков, редактор автоматически создает <code>{{htmlattrxref("id")}}</code> для каждого заголовка, заменяя пробелы в названии на нижние подчеркивания. Например, заголовок этой секции имеет <code>id</code>, значение которого <code>Работа_со_ссылками</code>.</dd>
 <dt>Create a redirect</dt>
 <dd>Встраивает переадресацию на другую страницу. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Redirects#Creating_redirects">Создание переадресаций</a> для подробной информации.</dd>
</dl>

<h2 id="Специальные_стили">Специальные стили</h2>

<p>Кнопка <strong>Styles</strong> - это выпадающее меню, предлагающее на выбор специальные стили форматирования текста.</p>

<h3 id="Блочные_стили">Блочные стили</h3>

<dl>
 <dt>None</dt>
 <dd>Удаляет стиль с выбранного блока.</dd>
 <dt>Note box</dt>
 <dd>Создает блок с примечание, как показано ниже. Вы должны всегда начинать примечание со слова <strong>"Примечание:"</strong> жирными буквами.</dd>
</dl>

<div class="note">
<p><strong>Примечание:</strong> Это поле с примечанием.</p>
</div>

<dl>
 <dt>Warning box</dt>
 <dd>Создает блок с предупреждением, как показано ниже. Блок должен всегда начинаться со слова <strong>"Внимание:"</strong> жирными буквами.</dd>
</dl>

<div class="warning">
<p><strong>Внимание:</strong> Это поле с предупреждением.</p>
</div>

<dl>
 <dt>Two columns</dt>
 <dd>Делает выделенный текст или блок двухколоночным на браузерах, которые это поддерживают.</dd>
 <dt>Three columns</dt>
 <dd>Делает выделенный текст или блок трехколоночным на браузерах, которые это поддерживают.</dd>
 <dt>Syntax box</dt>
 <dd>Создает поле для синтаксиса, как показано ниже. Это создает {{htmlelement("pre")}}. Вы можете также использовать кнопку "PRE".</dd>
 <dt>
 <pre class="syntaxbox notranslate">Это поле для синтаксиса</pre>
 </dt>
 <dt>Hidden when reading</dt>
 <dd>Создает блок, который видно только в режиме редактирования. Это не то же, что и HTML-комментарий, который виден только в режиме разметки.</dd>
</dl>

<h3 id="Строковые_стили_2">Строковые стили</h3>

<dl>
 <dt>SEO summary</dt>
 <dd>Этот специальный стиль используется чтобы выделить предложение или два, которые будут использованы как краткое описание для поисковой оптимизации. Он также используется макросами для автоматического создания посадочных страниц. Если вы не воспользуетесь этим стилем, MDN автоматически использует первый абзац вашей статьи. Но иногда это не самый лучший вариант и лучше воспользоваться предложенным стилем.</dd>
</dl>

<h2 id="Блоки">Блоки</h2>

<p>Эта группа включает опции для прочих стилей блоков. Некоторые из них относятся к стандартному HTML, а другие - уникальны, т.к. относятся к Kuma.</p>

<dl>
 <dt>Blockquote</dt>
 <dd>Вставляет блок для цитаты. <strong>Пожалуйста, не используйте это</strong>. Блоки с цитатами не являются частью нашего стайлгайда, и эта кнопка будет удалена в ближайшем будущем.</dd>
 <dt>Preformatted Text</dt>
 <dd>Вставляет {{htmlelement("pre")}} блок, или превращает в него текущий. Все примеры кода должны быть оформлены в такой блок.</dd>
 <dt>Headings</dt>
 <dd>Кнопки заголовков позволяют вам вставить нужный заголовок. Нажмите на одну из этих кнопок для создания нового заголовка соответственной глубины. По умолчанию заголовки с H2 по H4 включаются в оглавление, но вы можете изменить это, как описано в разделе <a href="/ru/docs/MDN/Contribute/Editor/Basics/Page_info">Информация о странице</a>.</dd>
 <dt>Syntax highlighter</dt>
 <dd>Подсветка синтаксиса позволяет вам выбрать язык, синтаксис которого будет подсвечиваться в {{htmlelement("pre")}} блоке. Если такой блок не был выбран изначально, он будет создан. Выберите язык используемый в блоке, и блок будет подсвечен соответствующим образом.</dd>
 <dt>Insert Code Sample Template</dt>
 <dd>Эта кнопка используется системой живых примеров (the live sample system), чтобы помочь вам быстро вставить новый живой пример (live sample). Смотрите <a href="/ru/docs/MDN/Contribute/Structures/Live_samples#Using_the_live_sample_system">Пользование системой живых примеров</a> чтобы узнать подробнее.</dd>
 <dt>Insert Code Sample iFrame</dt>
 <dd>Вставляет в документ подходящий макрос для отображения нужного живого примера. Смотрите <a href="/ru/docs/MDN/Contribute/Structures/Live_samples#Using_the_live_sample_system">Пользование системой живых примеров</a> для деталей использования и информации о других функциях живых примеров.</dd>
</dl>

<h2 id="Списки_и_поток_текста">Списки и поток текста</h2>

<p>Эта группа предоставляет инструменты для создания списков и изменения поведения текста в блоках.</p>

<dl>
 <dt>Insert/remove numbered list</dt>
 <dd>Создает или удаляет нумерованный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> может быть использована для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd>, соответсвенно, для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Numbered list properties, в которой можно выбрать стиль маркера.</dd>
 <dt>Insert/remove bulleted list</dt>
 <dd>Создает или удаляет маркированный список. Когда вы работаете над списком, при каждом нажатии <kbd>Enter</kbd> будет создаваться новый элемент списка. Клавиша <kbd>Tab</kbd> используется для увеличения вложенности, а <kbd>Shift</kbd> + <kbd>Tab</kbd> для уменьшения. При нажатии на <kbd>Enter</kbd> в пустом элементе список будет закончен. Нажатие ПКМ на списке открывает контекстное меню с опцией Bulleted list properties, в которой можно выбрать стиль нумерации (числа, буквы, римские цифры и пр., а также с какой цифры начинать).</dd>
 <dt>Definition List</dt>
 <dd>Создает новый список с определениями (definition list). Этот список состоит из серии терминов и определений (именно такой список вы сейчас читаете).</dd>
 <dt>Definition Term</dt>
 <dd>Создает новый блок с термином в списке. Если в данный момент вы не редактируете список, он будет создан. Нажатие на <kbd>Enter</kbd> автоматически переключается на редактирование нового определения.</dd>
 <dt>Definition Value</dt>
 <dd>Создает новый блок с определением в списке. Нажатие на <kbd>Enter</kbd> создает новый термин. Нажав дважды, вы покинете список.</dd>
 <dt>Decrease indent</dt>
 <dd>Уменьшает вложенность. Того же эффекта можно добиться нажав <kbd>Shift</kbd> + <kbd>Tab</kbd> в списке.</dd>
 <dt>Increase indent</dt>
 <dd>Увеличивает вложенность. То же самое, что и нажатие <kbd>Tab</kbd> в списке.</dd>
 <dt>Text direction left-to-right</dt>
 <dd>Переключает текущее направление текста на слева направо. Используется при работе с другими языками. Например, при работе с английским текстом в арабском.</dd>
 <dt>Text direction right-to-left</dt>
 <dd>Переключает текущее направление текста на справа налево. Используется при работе с другими языками. Например, при работе с арабским текстом в английском.</dd>
</dl>

<h2 id="Медиа">Медиа</h2>

<p>Данная группа предоставляет инструменты для работы с медиафайлами.</p>

<dl>
 <dt>Image</dt>
 <dd>Вставляет новое изображение в статью. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Images">Изображения</a> для подробностей.</dd>
 <dt>Table</dt>
 <dd>Вставляет таблицу в статью. Смотрите <a href="/ru/docs/MDN/Contribute/Editor/Tables">Таблицы</a> для подробной информации о таблицах в статьях.</dd>
 <dt>Embed YouTube Video</dt>
 <dd>Открывает диалоговое окно, в котором вы можете ввести URL для видео YouTube. С этой информацией создается вызов макроса EmbedYouTube. Это безопасный способ встроить видеоконтент.</dd>
 <dt>Insert MathML based on (La)TeX</dt>
 <dd>Открывает диалоговое окно, в которое вы можете вставить свой код TeX или LaTeX. Этот код будет конвертирован в <a href="/ru/docs/Web/MathML">MathML</a> вставлен в документ в {{htmlelement("math")}} блоке.</dd>
</dl>

<p> </p>