My Blog: Formatting Markers

09 October 2016

When using Bootstrap, or other style-sheets that have similar looking headings, you need an easy way to distinguish between them in the CMS's Visual Editor. This is how I do it.

There are three things that it is useful to see in the Visual Editor:

  1. Heading levels
  2. The locations of hidden elements such as DIV, DL, FORM, and HEADER tags.
  3. Attribute values (without entering Source </> mode)

For the heading levels, we can create a style-sheet and add the following rules:

H1:before {
    content: "[H1] ";
}

H2:before {
    content: "[H2] ";
}

H3:before {
    content: "[H3] ";
}

H4:before {
    content: "[H4] ";
}

H5:before {
    content: "[H5] ";
}

H6:before {
    content: "[H6] ";
}

If you add id attributes to a heading, you can highlight these with:

H1[id]:after {
    content: " [id:#" attr(id) "]";
}

H2[id]:after {
    content: " [id:#" attr(id) "]";
}

H3[id]:after {
    content: " [id:#" attr(id) "]";
}

H4[id]:after {
    content: " [id:#" attr(id) "]";
}

H5[id]:after {
    content: " [id:#" attr(id) "]";
}

H6[id]:after {
    content: " [id:#" attr(id) "]";
}

For DIV and DL tag elements, with id. role, and class attributes, use:

DIV {
    border: 1px dashed red !important;
    margin: 0 !important;
    padding: 10px !important;
}

    DIV:before {
        content: "[DIV]";
    }

    DIV[id]:before {
        content: "[DIV id:#" attr(id) "]";
    }

    DIV[class]:before {
        content: "[DIV class:" attr(class) "]";
    }

    DIV[role]:before {
        content: "[DIV role:" attr(role) "]";
    }

    DIV[id][class]:before {
        content: "[DIV id:#" attr(id) ", class:" attr(class) "]";
    }

    DIV[id][role]:before {
        content: "[DIV id:#" attr(id) ", role:" attr(role)"]";
    }

    DIV[class][role]:before {
        content: "[DIV class:" attr(class) ", role:" attr(role)"]";
    }

    DIV[id][class][role]:before {
        content: "[DIV id:#" attr(id) ", class:" attr(class) ", role:" attr(role)"]";
    }

DL {
    border: 1px dashed blue !important;
    margin: 0 !important;
    padding: 10px !important;
}

    DL:before {
        content: "[DL]";
    }

    DL[id]:before {
        content: "[DL id:#" attr(id) "]";
    }

    DL[class]:before {
        content: "[DL class:" attr(class) "]";
    }

    DL[role]:before {
        content: "[DL role:" attr(role) "]";
    }

    DL[id][class]:before {
        content: "[DL id:#" attr(id) ", class:" attr(class) "]";
    }

    DL[id][role]:before {
        content: "[DL id:#" attr(id) ", role:" attr(role) "]";
    }

    DL[class][role]:before {
        content: "[DL class:" attr(class) ", role:" attr(role) "]";
    }

    DL[id][class][role]:before {
        content: "[DL id:#" attr(id) ", class:" attr(class) ", role:" attr(role) "]";
    }

For HEADER and FORM tag elements, with id, role, and class attributes, use:

HEADER {
    border: 1px dashed pink;
    margin: 0 !important;
    padding: 10px !important;
}

    HEADER:before {
        content: "[HEADER]";
    }

FORM {
    border: 1px dashed green;
    margin: 0 !important;
    padding: 10px !important;
}

    FORM:before {
        content: "[FORM]";
    }

    FORM[id]:before {
        content: "[FORM id:#" attr(id) "]";
    }

    FORM[class]:before {
        content: "[FORM class:" attr(class) "]";
    }

    FORM[role]:before {
        content: "[FORM role:" attr(role) "]";
    }

    FORM[id][class]:before {
        content: "[FORM id:#" attr(id) ", class:" attr(class) "]";
    }

    FORM[id][role]:before {
        content: "[FORM id:#" attr(id) ", role:" attr(role) "]";
    }

    FORM[class][role]:before {
        content: "[FORM class:" attr(class) ", role:" attr(role)"]";
    }

    FORM[id][class][role]:before {
        content: "[FORM id:#" attr(id) ", class:" attr(class) ", role:" attr(role)"]";
    }

INPUT, TEXTAREA, LEGEND, SELECT {
    width: auto !important;
}

Lastly, we can make some tweaks to the Visual Editor's own internal formatting, to make it easier to manipulate images and functions on touch-screen devices:

/* Composite C1 visual editor adjustments */
BODY[id]:after,
BODY[id][class]:after,
BODY[class]:after,
TABLE.mce-item-table:after,
DIV:after,
DIV.mceCompositeResizeHandle:before,
DIV.mceCompositeResizeHandle:after,
DIV.mceResizeToolTip,
DIV.mceResizeToolTip:before,
DIV.mceResizeToolTip:after {
    content: "" !important;
    padding: 0 !important;
}

IMG.compositeHtmlWysiwygRepresentation {
    width: auto;
}

DIV.mceCompositeResizeHandle {
    border: 1px solid black !important;
}

This is all saved as a single file at: ~/Frontend/Styles/wysiwyg.css.

To set this style-sheet in motion, you need to change the Visual Editor settings inside the CMS, so we open ~/Frontend/Config/VisualEditor/common.xml for editing and add a line:

<?xml version="1.0" encoding="UTF-8"?>
<visualeditor>

  <!-- stylesheets to import (tip: you can also use @import inside the CSS) -->
  <styles>
    <style file="Styles/core.css" />
    <style file="../../Libraries/Bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <style file="../../Styles/pink.css" />
    <style file="../../Styles/wysiwyg.css" />
  </styles>

[...]

</visualeditor>

The Result

With this in place, you will now see this when you edit your document:


comments powered by Disqus