<?xml version="1.0" encoding="UTF-8"?>
<content type="CHA"><lesson_id>926</lesson_id>
<was_chapter_id></was_chapter_id>
<keywords></keywords>
<childs_cnt>1</childs_cnt>
<is_childs>1</is_childs>
<sort>100</sort>
<timestamp_x>1406639803</timestamp_x>
<date_create>1406636853</date_create>
<created_user_name>(admin) Иван Иванов</created_user_name>
<created_by>1</created_by>
<active>Y</active>
<name>Внешний вид редактора</name>
<preview_picture></preview_picture>
<preview_text></preview_text>
<preview_text_type>text</preview_text_type>
<detail_text><![CDATA[<p>Рассмотрим внешний вид редактора и его панели подробнее. Визуальный редактор, открываемый из Публичной части и из Административного раздела несколько различается по функционалу. Будем описывать окно редактора в Административном разделе, т.к. в нем доступен несколько более широкий набор кнопок и возможностей, чем в Публичной части.</p>
 
<p><img src="cid:resources/res56/7zcFl.qS4cO.visual_editor_admin.png" border="0" width="776" height="577"  /></p>
 
<h3>Панель инструментов</h3>
 
<p>Общая панель инструментов визуального редактора состоит из нескольких меньших панелей, в каждой из которых объединены кнопки по своему назначению. Детальное описание панелей приводится на страницах с описанием конкретных видов работ.</p>
 
<ul> 
  <li>Стандартные 
    <p><img src="cid:resources/res56/xXEvS.CWBuC.standard_panel.png" border="0" width="513" height="26"  /></p>
   </li>
 
  <li>Шаблон сайта 
    <p><img src="cid:resources/res56/9pz4I.yRN4l.template_panel.png" border="0" width="173" height="26"  /></p>
   </li>
 
  <li>Управление и настройки 
    <p><img src="cid:resources/res56/2fx6w.Tlj6Y.manage_panel.png" border="0" width="267" height="26"  /></p>
   </li>
 
  <li>Стиль 
    <p><img src="cid:resources/res56/3xbsw.ksAye.style_panel.png" border="0" width="372" height="26"  /></p>
   </li>
 
  <li>Форматирование 
    <br />
   
    <br />
   <img src="cid:resources/res56/oqQkb.ciPOa.format_panel.png" border="0" width="268" height="26"  /> </li>
 </ul>
 
<p>В административном разделе на каждой из этих панелек имеются специальные области для перемещения панели в любое место окна редактора.</p>
 
<p><img src="cid:resources/res56/GujWC.uDp9w.move_panel_area.png" border="0" width="173" height="25"  /></p>
 
<p>При наведении курсора на выделенную область курсор меняет внешний вид. </p>
 
<p><img src="cid:resources/res56/1ozK1.uL39E.move_panel.png" border="0" width="178" height="25"  /> </p>
 
<p>Теперь вы можете перетаскивать панель в любую область редактора. После переноса вы можете ее закрыть, нажав на кнопку <b>Х</b> в правом верхнем углу панели.</p>
 
<p><img src="cid:resources/res56/ofCNV.Ya9aR.template_panel_2.png" height="38" width="174"  /></p>
 
<p>Восстановить отображение панели можно с помощью кнопки <img src="cid:resources/res56/SSpMF.drUPC.settings_button.png" border="0" height="22" width="22"  /> <strong>Настройки</strong>.</p>
 
<div class="hint"><b>Примечание:</b> Подробнее о настройке внешнего вида смотрите в уроке <a href="https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=34&LESSON_ID=1834" >Настройка внешнего вида редактора</a>.</div>

<br> 

<div class="warning"><b>Внимание!</b> Состав и набор кнопок на панели инструментов может отличаться, в зависимости от режима работы редактора и настроек администратора.</div>


<h3 class="hint">Панель задач</h3>
 
<p>Панель задач может состоять из нескольких закладок: <b>Компоненты</b> и <b>Сниппеты</b>. </p>

<p><img src="cid:resources/res56/J6dDE.k3opm.comp_tabs.png" height="46" width="206"  /></p>

<div class="hint"><b>Примечание:</b> В версии продукта до 9.5 присутствует закладка <b>Компоненты 1.0</b>. Она позволяет добавлять на страницу компоненты 1.0, которые устарели и не рекомендуются к использованию.
<p><img src="cid:resources/res56/hb5cU.qiRdD.comp_1.0_tab.png" height="36" width="270"  /></p>
</div>

<a name="cache_update"></a><p>Отображать и скрывать панели <b>Компоненты</b> и <b>Сниппеты</b> можно с помощью соответствующих кнопок панели <b><font size="4" color="#00c0ff">6</font></b>. Доступны следующие действия управления панелью задач:</p>
 
<p><img src="cid:resources/res56/fXLQP.50OND.task_actions.png" height="132" width="274"  /></p>
 
<ul> 
  <li>По кнопке <strong>Свернуть</strong> можно временно скрыть панель. Вернуть ее можно, используя кнопки панели <strong><font size="4" color="#00c0ff">6</font></strong>. </li>
 
  <li>Кнопка <strong>Обновить закешированные данные</strong> позволяет сбросить кеш, например, если были добавлены собственные компоненты. </li>


 
  <li>Кнопка <strong>Настроить</strong> вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке <img src="cid:resources/res56/jTG6n.8bsPh.settings_button.png" border="0" height="22" width="22"  /> <strong>Настройки</strong> панели инструментов. </li>
 
  <li>Кнопка <strong>Закрыть</strong> закрывает отображаемую панель. Восстановить ее отображение можно с помощью формы настройки редактора (кнопка <img src="cid:resources/res56/EIeBy.VClh5.settings_button.png" border="0" height="22" width="22"  />). </li>
 </ul>
 
<p> Ниже вы можете познакомиться с видео-роликом, в котором подробно рассматриваются внешний вид редактора и его панели. (2 минуты 17 секунд, 7.86 Мб.) 
  <br />
 </p>
 
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="bxid_960795" width="800" height="620" ><param name="movie" value="/bitrix/components/bitrix/player/mediaplayer/player"><param name="menu" value="true"><param name="wmode" value="transparent"><param name="width" value="800"><param name="height" value="620"><param name="flashvars" value="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/5-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res56/ZMcDc.U9FFa.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_960795" menu="true" wmode="transparent" width="800" height="620" flashvars="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/5-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object></p>
 
<p><a href="http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/5-1.flv" >Загрузить</a> ролик.</p>
 
<h3>Панель переключения режимов редактирования</h3>
 
<p>Панель переключения режимов редактирования состоит из следующих кнопок: </p>
 
<p><img src="cid:resources/res56/MQcMU.aU5qh.regimes.png" border="0" height="101" width="24"  /> </p>
 
<p>Кнопка <img src="cid:resources/res56/tcb3s.BzkaG.textrej.gif" border="0"  /> служит для перехода от визуального режима к работе с исходным кодом. В режиме работы с исходным кодом не все кнопки панели редактирования доступны. Можно работать только с панелью <strong>Управление и настройки</strong> <img src="cid:resources/res56/OO2VM.lfRLS.manage_panel.png" border="0" height="26" width="267"  />, а также доступными остаются кнопки <img src="cid:resources/res56/X2LKi.AdRLq.fs.png" height="13" width="15"  /> и <img src="cid:resources/res56/woGYZ.9yn56.settings_button.png" border="0" height="22" width="22"  />. Остальные кнопки панели редактирования заблокированы. </p>
 
<p>Кнопка <img src="cid:resources/res56/4LcVw.e5jks.wysiwyg.gif" border="0"  /> служит для перехода обратно к режиму визуального редактирования.</p>
 
<p>Кнопка <img src="cid:resources/res56/4k1AY.0Esgc.split.gif" border="0"  /> служит для перехода в совмещенный режим редактирования, при котором можно работать одновременно и с визуальной частью, и с исходным кодом: </p>
 
<p><img src="cid:resources/res56/xoFFd.GrCva.combined_mode.png" border="0" height="353" width="551"  /></p>
 
<p>При работе с исходным кодом и в совмещенном режиме редактирования становится доступной кнопка <img src="cid:resources/res56/whqNT.ayjoG.wrap.gif" border="0"  />, которая служит для переноса не поместившейся на текущей строке части кода на следующие строки. Заметим, что эта кнопка присутствует и работает только в браузере <strong>Internet Explorer</strong>.</p>
 
<div class="warning"><b>Внимание!</b> Режим работы с исходным кодом рекомендуется использовать только подготовленным пользователям.</div>
 
<h3>Панель отображения свойств объектов (Свойства)</h3>
 
<p>В области <b>Свойства</b> отображаются свойства того объекта, на котором установлен курсор мыши в данный момент. Это может быть визуальный компонент, тогда в области <b>Свойства</b> можно будет настроить параметры этого компонента. Панель <b>Свойства</b> также является скрывающейся, что регулируется кнопкой панели <b><font size="4" color="#00c0ff">6</font></b>. Доступны следующие действия управления панелью <strong>Свойства</strong>:</p>
 
<p><img src="cid:resources/res56/NNlXD.B3PRN.properties_actions.png" height="91" width="136"  /></p>
 
<ul> 
  <li>По кнопке <strong>Свернуть</strong> можно временно скрыть панель. Вернуть ее можно, используя кнопки панели <strong><font size="4" color="#00c0ff">6</font></strong>. </li>
 
  <li>Кнопка <strong>Настроить</strong> вызывает форму настройки внешнего вида редактора, которая также доступна по кнопке <img src="cid:resources/res56/8joHN.ztb3W.settings_button.png" border="0" height="22" width="22"  /> <strong>Настройки</strong> панели инструментов. </li>
 </ul>
 
<p> Ниже вы можете познакомиться с видео-роликом, в котором подробно рассматриваются внешний вид редактора и его панели. (2 минуты 17 секунд, 7.86 Мб.) 
  <br />
 </p>
 
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="bxid_804887" width="800" height="620" ><param name="movie" value="/bitrix/components/bitrix/player/mediaplayer/player"><param name="menu" value="true"><param name="wmode" value="transparent"><param name="width" value="800"><param name="height" value="620"><param name="flashvars" value="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/5-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res56/uoA73.YGBHt.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_804887" menu="true" wmode="transparent" width="800" height="620" flashvars="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/5-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object></p>
 
<p><a href="http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/5-2.flv" >Загрузить</a> ролик.</p>



<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Кнопки панели инструментов визуального HTML-редактора</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><table cellpadding="0" cellspacing="0"> 		 
  <tbody> 
    <tr bgcolor="white"> <td bgcolor="#8c8c8c"> 		 
        <table cellpadding="5" cellspacing="1"> 			 
          <tbody> 

    <tr><td bgcolor="white" width="20%">Кнопка</td> <td  bgcolor="white"width="80%">Описание</td> </tr>
   
    <tr><td bgcolor="silver" colspan="2">Стандартные</td></tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/NHqXr.btTDc.fullscreen_button.png" height="20" width="20"></td> <td>Переключение в полноэкранный режим.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/LPpjH.kiMYY.settings_button.png" height="20" width="20"></td> <td>Изменение настроек визуального редактора.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/6Xpmd.c9w6x.word_button.png" height="20" width="20"></td> <td>Вставить из Word. Позволяет очистить добавляемый текст от дополнительных элементов форматирования (например, стилей).</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/6li8Z.iQ3ud.word_txt_button.png" height="20" width="20"></td> <td>Вставить фрагмент как текст.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/wudf6.18ipp.select_all_button.png" height="20" width="20"></td> <td>Выделить все на странице.</td> </tr>
  			 
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/NcQqS.bX2r8.undo_button.png" height="20" width="20"></td> <td>Отменить выполненное действие.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/LomQQ.8Gqf0.redo_button.png" height="20" width="20"></td> <td>Вернуть отменённое действие.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/IApVU.nNRF3.borders_button.png" height="20" width="20"></td> <td>Отобразить или скрыть границы таблиц.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/Hu7bN.ux2Y1.instable_button.png" height="20" width="20"></td> <td>Создать таблицу.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/HfC1I.0ZQIn.anchor_button.png" height="20" width="20"></td> <td>Добавить якорь.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/yB4xx.v3pOw.link_button.png" height="20" width="20"></td> <td>Вставить гиперссылку.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/2mnSs.FlwRX.delete_link_button.png" height="20" width="20"></td> <td>Удалить гиперссылку.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/9WE5J.mca2C.image_button.png" height="20" width="20"></td> <td>Добавить изображение.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/91oAe.RvkfT.symbol_button.png" height="20" width="20"></td> <td>Вставить специальный символ.</td> </tr>
  	 
    <tr bgcolor="white"> <td><img src="cid:resources/res56/32cte.LWvuX.page_break_button.png" height="20" width="20"></td> <td>Вставить разрыв страницы для печати.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/Eny3W.oc43m.break_button.png" height="20" width="20"></td> <td>Вставить разделитель страниц <i>&lt;BREAK/&gt;</i>.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/FQ7mD.Q6CGe.flash_button.png" height="20" width="20"></td> <td>Вставить Flash-ролик.</td> </tr>
   
    <tr><td bgcolor="silver" colspan="2">Стиль</td></tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/3Kcpv.1VbTa.style_button_1.png" height="20" width="77"></td> <td>Уровень (формат) текста. Например, <b>Normal</b>, <b>Heading1</b>, <b>Heading2</b>, ...		 .</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/V7cTG.ukrix.style_button_2.png" height="20" width="77"></td> <td>Шрифт.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/kienK.A0NyM.style_button_3.png" height="20" width="77"></td> <td>Размер шрифта.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/6A2FX.Kblj7.style_button_4.png" height="20" width="20"></td> <td>Полужирный.</td> </tr>
  	 
    <tr bgcolor="white"> <td><img src="cid:resources/res56/XyuOK.8J7xv.style_button_5.png" height="20" width="20"></td> <td>Курсив.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/s5RmB.3vJgu.style_button_6.png" height="20" width="20"></td> <td>Подчёркнутый.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/ktoOR.5kOZv.style_button_7.png" height="20" width="20"></td> <td>Удалить форматирование.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/7xtYm.II4Qd.style_button_8.png" height="20" width="20"></td> <td>Оптимизировать HTML-код.</td> </tr>
  	 
    <tr><td bgcolor="silver" colspan="2">Форматирование</td></tr>
  		 
    <tr bgcolor="white"> <td><img src="cid:resources/res56/h35ZP.j14bm.format_button_1.png" height="20" width="20"></td> <td>Добавить горизонтальный разделитель.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/0MWVr.qMGSS.format_button_2.png" height="20" width="20"></td> <td>Выравнивание абзаца по левому краю.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/xeQQe.IbFyU.format_button_3.png" height="20" width="20"></td> <td>Выравнивание абзаца по центру.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/XHk5c.d0itQ.format_button_4.png" height="20" width="20"></td> <td>Выравнивание абзаца по правому краю.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/HAcZ4.xgESz.format_button_5.png" height="20" width="20"></td> <td>Выравнивание абзаца по ширине.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/DnajQ.O9UrT.format_button_6.png" height="20" width="20"></td> <td>Нумерованный список.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/uh9jI.P3ual.format_button_7.png" height="20" width="20"></td> <td>Маркированный список.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/ZI4rm.ldIUQ.format_button_8.png" height="20" width="20"></td> <td>Уменьшить отступ.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/Bx0yL.S6hfc.format_button_9.png" height="20" width="20"></td> <td>Увеличить отступ.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/kKB2y.7X0Ai.format_button_10.png" height="20" width="20"></td> <td>Цвет фона.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/Y463O.9s2Qq.format_button_11.png" height="20" width="20"></td> <td>Цвет текста.</td> </tr>
   
    <tr><td bgcolor="silver" colspan="2">Режимы редактирования</td></tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/NGS72.OgYwQ.edit_mode_1.png" height="20" width="20"></td> <td>Переключение в режим визуального редактирования.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/6On1Y.jjrYS.edit_mode_2.png" height="20" width="20"></td> <td>Переключение в режим редактирования исходного кода страницы.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/wp4MM.02FwQ.edit_mode_3.png" height="20" width="20"></td> <td>Переключение в совмещённый режим редактирования.</td> </tr>
  	 
    <tr><td bgcolor="silver" colspan="2">Шаблон сайта</td></tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/KUdVc.kjmPv.template_button.png" height="20" width="152"></td> <td>Шаблон сайта.</td> </tr>
   
    <tr><td bgcolor="silver" colspan="2">Управление и настройки</td></tr>
  		 
    <tr bgcolor="white"> <td><img src="cid:resources/res56/Rk39N.NG1il.manage_button_1.png" height="20" width="137"></td> <td>Сохранение изменений и выход из визуального редактора.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/KIQzA.lIn3h.manage_button_2.png" height="20" width="20"></td> <td>Выход из редактора без сохранения.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/UqsOH.xLWyW.manage_button_3.png" height="20" width="20"></td> <td>Создание новой страницы.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/Yu5HZ.FZ9ys.manage_button_4.png" height="20" width="20"></td> <td>Сохранить и продолжить редактирование.</td> </tr>
   
    <tr bgcolor="white"> <td><img src="cid:resources/res56/0iNaJ.MM82M.manage_button_5.png" height="20" width="20"></td> <td>Сохранить под другим именем.</td> </tr>
   
    <tr bgcolor="#eeeeee"> <td><img src="cid:resources/res56/dBtQY.BaPTO.manage_button_6.png" height="20" width="20"></td> <td>Переход к редактированию параметров страницы.</td> </tr>


           </tbody>
         </table>
       		</td></tr>
   </tbody>
 </table></td></tr>
</tbody>
</table></div>


 

 ]]></detail_text>
<detail_picture></detail_picture>
<detail_text_type>html</detail_text_type>
<launch></launch>
<code></code>
<active_from></active_from>
<active_to></active_to>
<rating></rating>
<rating_type></rating_type>
<scorm></scorm>
<linked_lesson_id></linked_lesson_id>
<course_id></course_id>
<course_sort></course_sort>
<edge_sort>100</edge_sort>
<id>926</id>
</content>