SCEditor

Theming

HTML Structure

Outline of SCEditors HTML structure.

<!-- 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>

CSS Structure

Note: The contents of the WYSIWYG iframe is styled via an external stylesheet which can be passed via the style option in the editors constructor.

  • div.sceditor-container
    The container for the whole editor. The CSS class .sourceMode will be added when in source mode and the class .wysiwygMode will be added when in WYSIWYG mode.
    • div.sceditor-toolbar
      The container for the toolbar.
    • div.sceditor-group
      Toolbar group.
      • a.sceditor-button
        A toolbar button. The class .disabled will be added if the command is not supported in the current mode.
      • a.sceditor-button-[name]
        Same as the previous class but [name] is replaced with the buttons command name, e.g. .sceditor-button-bold, .sceditor-button-italic
      • div
        div containing the buttons accessibility text and normally has the background image is set to the button's icon too
    • iframe
      iframe used for the WYSIWYG editor. This must be selected with the HTML element tag name
    • textarea
      textarea used for the source mode editor. This must be selected with the HTML element tag name
    • div.sceditor-grip
      Grip used to resize the editor
    • div.sceditor-resize-cover
      div which covers the editor during resizing
    • div.sceditor-dropdown
      div containing the dropdown

Theme Structure

All the default themes in LESS CSS format and are located in the src/themes/ directory.

To build and minify the themes run the command build/build.sh --css from the root SCEditor directory. The output will be placed in the minified/themes directory.