Тематическое оформление

Схема структуры HTML-кода SCEditors.

index.html

<!-- Main container -->
<div class="sceditor-container">
  <!-- Toolbar container -->
  <div class="sceditor-toolbar">
    <!-- Toolbar group container -->
    <div class="sceditor-group">
      <!-- Toolbar button -->
      <a class="sceditor-button sceditor-button-[name]"
        data-sceditor-command="[name]"
        unselectable="on" title="[name]">
 
        <!-- Toolbar button text container -->
        <div unselectable="on">[tooltip or name]</div>
      </a>
    </div>
  </div>
 
  <!-- Contains the WYSIWYG editor -->
  <iframe></iframe>
 
  <!-- Contains the source mode editor -->
  <textarea></textarea>
 
  <!-- Grip used to resize the editor -->
  <div class="sceditor-grip"></div>
 
  <!-- Used to cover the WYSIWYG editor so mousemove events are still handled -->
  <div class="sceditor-resize-cover"></div>
 
  <!-- This is hidden and only used so that blur() can work -->
  <input>
</div>

• div.sceditor-container — контейнер для всего редактора. CSS-класс .sourceModeбудет добавлен в режиме исходного кода, а класс .wysiwygMode— в режиме WYSIWYG .
• div.sceditor-toolbar - контейнер для панели инструментов.
• div.sceditor-group - группа панелей инструментов.
  • a.sceditor-button - кнопка панели инструментов. Класс .disabledбудет добавлен, если команда не поддерживается в текущем режиме.
  • a.sceditor-button-[name] - аналогичен предыдущему классу, но [name] заменено на имя команды кнопки, например .sceditor-button-bold, ,.sceditor-button-italic
  • div-элемент - div содержащем текст, отвечающий за доступность кнопок, и обычно имеющем фоновое изображение, также устанавливается значок кнопки.
• iframe - используется для WYSIWYG -редактора. Его необходимо выбрать с помощью имени тега HTML-элемента.
• textarea - текстовое поле, используемое для редактора в режиме исходного кода. Его необходимо выделить с помощью имени тега HTML-элемента.
• div.sceditor-grip — элемент управления, используемый для изменения размера редактора.
• div.sceditor-resize-cover — div это компонент, который закрывает редактор во время изменения его размера.
• div.sceditor-dropdown, div содержащий выпадающий список

Все темы по умолчанию в формате LESS CSS находятся в соответствующей src/themes/ директории.

Для сборки и минификации тем выполните команду build/build.sh –css из корневого каталога SCEditor. Результат будет помещен в этот minified/themesкаталог.

Ссылка на оригинальную статью