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

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.