My Blog: Bootstrap the Visual Editor

23 November 2016

If you're using Bootstrap for your website, you'll need to edit the formatting options in the Visual Editor. This article explains how to do this.

The Bootstrap framework provides some great formatting rules to speed up designing your website. To take advantage of them, you can add the files to your website and display the formatting in your Visual Editor's WYSIWYG area. However, unless you configure the Visual Editor to use Bootstrap classes, you'll be going into Source </> mode quite a lot.

Orckestra provides some guidance on how to configure the Visual Editor that you can follow, but they don't include many suggestions. If you're going to use Bootstrap, the first place you'll want to head to is the CSS page of Bootstrap's documentation website. Make a note of the formatting features you are going to be using. In my case:

  • Typography (Headings 2-6, paragraphs, inline text elements, alignments, transformations, abbreviations, addresses, blockquotes and lists)
  • Code (<code>, <kbd>, <var>, <samp>, although not <pre> as the TinyMCE editor that Orckestra uses doesn't support it very well)
  • Tables (all formats and the <div class="table-responsive"> wrapper)
  • Images (all formats)
  • Helper classes (contextual colours and contextual backgrounds only)

I can safely ignore the grid system, forms and buttons, as they relate to things outside the editable areas. Heading 1 <h1> is also going to be outside the editable area of my page, and will be populated with website name and page name.

As you'll see below, I've grouped all of my inline elements, inline classes, block selectors and block classes into groups. This allows for logical grouping of item in the menu-bar. I've also added some image icons for some of these buttons, but not all of them yet.

You'll also note that I have a few items commented out for now. These will introduce column layouts and custom formats for my own hyperlink classes.

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

  <!-- 
    These format-id's will overwrite or overload TinyMCE built-in formats:
    alignleft, aligncenter, alignright, alignfull, bold, italic, underline, 
    strikethrough, forecolor, hilitecolor, fontname, fontsize, blockquote, 
    removeformat, p, h1, h2, h3, h4, h5, h6, div, address, pre, div, code, 
    dt, dd, samp. 
  -->
  <formats>
    <group>
      <format id="bold" label="Strong" image="" notes="Strong text" inline="strong">
        <button image="Images/bold.png" label="" />
      </format>
      <format id="italic" label="Emphasis" image="" notes="Emphasized text" inline="em">
        <button image="Images/italic.png" label="" />
      </format>
      <format id="span" label="Span" image="" notes="Span" inline="span">
        <button image="Images/span.png" label="" />
      </format>
      <format id="code" label="Code" image="" notes="Code" inline="code">
        <button image="Images/code.png" label="" />
      </format>
      <format id="kbd" label="Keyboard" image="" notes="Keyboard entry characters" inline="kbd">
        <button image="Images/kbd.png" label="" />
      </format>
      <format id="sup" label="Superscript" image="" notes="Superscript" inline="sup">
        <button image="Images/sup.png" label="" />
      </format>
      <format id="sub" label="Subscript" image="" notes="Subscript" inline="sub">
        <button image="Images/sub.png" label="" />
      </format>
      <format id="del" label="Deleted" image="" notes="Deleted text - Shown with a strike-through" inline="del">
        <button image="Images/del.png" label="" />
      </format>
    </group>

    <group>
      <format id="small" label="Small" image="" notes="Small" inline="small">
        <button label="SMALL" />
      </format>
      <format id="mark" label="Mark" image="" notes="Mark" inline="mark">
        <button label="MARK" />
      </format>
      <format id="s" label="Strike" image="" notes="Strike-through" inline="s">
        <button label="S" />
      </format>
      <format id="samp" label="Sample" image="" notes="Sample of output" inline="samp">
        <button label="SAMP" />
      </format>
      <format id="var" label="Variable" image="" notes="Variable for entry" inline="var">
        <button label="VAR" />
      </format>
      <format id="cite" label="Citation" image="" notes="Citation for quoted text" inline="cite">
        <button label="CITE" />
      </format>
      <format id="ins" label="Insert" image="" notes="Inserted text" inline="ins">
        <button label="INS" />
      </format>
      <format id="dfn" label="Definition" image="" notes="Definition - Remember to set a title attribute in HTML Source mode" inline="dfn">
        <button label="DFN" />
      </format>
      <format id="abbr" label="Abbreviation" image="" notes="Abbreviation - Remember to set a title attribute in HTML Source mode" inline="abbr">
        <button label="ABBR" />
      </format>
    </group>

    <radiogroup>
      <format id="text-left" label="Left align text" image="" notes="" classes="text-left" selector="p, h1, h2, h3, h4, h5, h6">
        <button label="" image="${icon:text-align-left}" />
      </format>
      <format id="text-center" label="Center text" image="" notes="" classes="text-center" selector="p, h1, h2, h3, h4, h5, h6">
        <button label="" image="${icon:text-align-center}" />
      </format>
      <format id="text-right" label="Right align text" image="" notes="" classes="text-right" selector="p, h1, h2, h3, h4, h5, h6">
        <button label="" image="${icon:text-align-right}" />
      </format>
      <format id="text-justify" label="Justify text" image="" notes="" classes="text-justify" selector="p, h1, h2, h3, h4, h5, h6">
        <button label="JUSTIFY" />
      </format>
      <format id="text-nowrap" label="No wrap text" image="" notes="" classes="text-nowrap" selector="p, h1, h2, h3, h4, h5, h6">
        <button label="NOWRAP" />
      </format>
    </radiogroup>

    <radiogroup>
      <format id="blockquote" label="Blockquote" image="" notes="" block="blockquote" wrapper="1">
        <select />
      </format>
      <format id="div" label="Divider" image="" notes="" block="div" wrapper="1">
        <select />
      </format>
    </radiogroup>

    <radiogroup>
      <format id="h2" label="Heading H2" image="" notes="Heading" block="h2">
        <select />
      </format>
      <format id="h3" label="Heading H3" image="" notes="Small heading" block="h3">
        <select />
      </format>
      <format id="h4" label="Heading H4" image="" notes="Title" block="h4">
        <select />
      </format>
      <format id="h5" label="Heading H5" image="" notes="Small title" block="h5">
        <select />
      </format>
      <format id="h6" label="Heading H6" image="" notes="Very Small title" block="h6">
        <select />
      </format>
      <format id="p" label="Paragraph" image="" notes="Paragraph" block="p">
        <select />
      </format>
      <format id="address" label="Address" image="" notes="Address" block="address">
        <select />
      </format>
      <format id="blockquote" label="Blockquote" image="" notes="Blockquote" block="blockquote">
        <select />
      </format>
      <format id="blockquote-footer" label="Blockquote footer" image="" notes="Blockquote footer" block="footer">
        <select />
      </format>
    </radiogroup>

    <radiogroup>
      <format id="p-lead" label="p.lead" image="" notes="" classes="lead" selector="p">
        <select />
      </format>
      <format id="p-text-lowercase" label="p.text-lowercase" image="" notes="" classes="text-lowercase" selector="p">
        <select />
      </format>
      <format id="p-text-uppercase" label="p.text-uppercase" image="" notes="" classes="text-uppercase" selector="p">
        <select />
      </format>
      <format id="p-text-capitalize" label="p.text-capitalize" image="" notes="" classes="text-capitalize" selector="p">
        <select />
      </format>
      <format id="p-text-muted" label="p.text-muted" image="" notes="" classes="text-muted" selector="p">
        <select />
      </format>
      <format id="p-text-primary" label="p.text-primary" image="" notes="" classes="text-primary" selector="p">
        <select />
      </format>
      <format id="p-text-success" label="p.text-success" image="" notes="" classes="text-success" selector="p">
        <select />
      </format>
      <format id="p-text-info" label="p.text-info" image="" notes="" classes="text-info" selector="p">
        <select />
      </format>
      <format id="p-text-warning" label="p.text-warning" image="" notes="" classes="text-warning" selector="p">
        <select />
      </format>
      <format id="p-text-danger" label="p.text-danger" image="" notes="" classes="text-danger" selector="p">
        <select />
      </format>
      <format id="p-bg-primary" label="p.bg-primary" image="" notes="" classes="bg-primary" selector="p">
        <select />
      </format>
      <format id="p-bg-success" label="p.bg-background" image="" notes="" classes="bg-success" selector="p">
        <select />
      </format>
      <format id="p-bg-info" label="p.bg-background" image="" notes="" classes="bg-info" selector="p">
        <select />
      </format>
      <format id="p-bg-warning" label="p.bg-background" image="" notes="" classes="bg-warning" selector="p">
        <select />
      </format>
      <format id="p-bg-danger" label="p.bg-background" image="" notes="" classes="bg-danger" selector="p">
        <select />
      </format>
      <format id="span-label-default" label="span.label-default" image="" notes="" classes="label label-default" selector="span">
        <select />
      </format>
      <format id="span-label-primary" label="span.label-primary" image="" notes="" classes="label label-primary" selector="span">
        <select />
      </format>
      <format id="span-label-success" label="span.label-success" image="" notes="" classes="label label-success" selector="span">
        <select />
      </format>
      <format id="span-label-info" label="span.label-info" image="" notes="" classes="label label-info" selector="span">
        <select />
      </format>
      <format id="span-label-warning" label="span.label-warning" image="" notes="" classes="label label-warning" selector="span">
        <select />
      </format>
      <format id="span-label-danger" label="span.label-danger" image="" notes="" classes="label label-danger" selector="span">
        <select />
      </format>
      <!--
      <format id="a-locked" label="a.locked" image="" notes="" classes="locked" selector="a">
        <select />
      </format>
      -->
      <format id="a-alert-link" label="a.alert-link" image="" notes="" classes="alert-link" selector="a">
        <select />
      </format>
      <format id="abbr-initialism" label="abbr.initialism" image="" notes="" classes="initialism" selector="abbr">
        <select />
      </format>
      <format id="blockquote-blockquote-reverse" label="blockquote.blockquote-reverse" image="" notes="" classes="blockquote-reverse" selector="blockquote">
        <select />
      </format>
      <format id="ul-list-unstyled" label="ul.list-unstyled" image="" notes="" classes="list-unstyled" selector="ul">
        <select />
      </format>
      <format id="ul-list-inline" label="ul.list-inline" image="" notes="" classes="list-inline" selector="ul">
        <select />
      </format>
      <format id="ul-list-group" label="ul.list-group" image="" notes="" classes="list-group" selector="ul">
        <select />
      </format>
      <format id="li-list-group-item" label="li.list-group-item" image="" notes="" classes="list-group-item" selector="ul">
        <select />
      </format>
      <format id="img-responsive" label="img.img-responsive" image="" notes="" classes="img-responsive" selector="img">
        <select />
      </format>
      <format id="img-rounded" label="img.img-rounded" image="" notes="" classes="img-rounded" selector="img">
        <select />
      </format>
      <format id="img-circle" label="img.img-circle" image="" notes="" classes="img-circle" selector="img">
        <select />
      </format>
      <format id="img-thumbnail" label="img.img-thumbnail" image="" notes="" classes="img-thumbnail" selector="img">
        <select />
      </format>
      <format id="table-table" label="table.table" image="" notes="" classes="table" selector="table">
        <select />
      </format>
      <format id="table-table-striped" label="table.table-striped" image="" notes="" classes="table table-striped" selector="table">
        <select />
      </format>
      <format id="table-table-bordered" label="table.table-bordered" image="" notes="" classes="table table-bordered" selector="table">
        <select />
      </format>
      <format id="table-table-hover" label="table.table-hover" image="" notes="" classes="table table-hover" selector="table">
        <select />
      </format>
      <format id="table-table-condensed" label="table.table-condensed" image="" notes="" classes="table table-condensed" selector="table">
        <select />
      </format>
      <format id="tr-th-td-active" label="tr, th, td.active" image="" notes="" classes="active" selector="tr, th, td">
        <select />
      </format>
      <format id="tr-th-td-success" label="tr, th, td.success" image="" notes="" classes="success" selector="tr, th, td">
        <select />
      </format>
      <format id="tr-th-td-info" label="tr, th, td.info" image="" notes="" classes="info" selector="tr, th, td">
        <select />
      </format>
      <format id="tr-th-td-warning" label="tr, th, td.warning" image="" notes="" classes="warning" selector="tr, th, td">
        <select />
      </format>
      <format id="tr-th-td-danger" label="tr, th, td.danger" image="" notes="" classes="danger" selector="tr, th, td">
        <select />
      </format>
      <format id="div-well" label="div.well" image="" notes="" classes="well" selector="div">
        <select />
      </format>
      <format id="div-jumbotron" label="div.jumbotron" image="" notes="" classes="jumbotron" selector="div">
        <select />
      </format>
      <format id="div-page-header" label="div.page-header" image="" notes="" classes="page-header" selector="div">
        <select />
      </format>
      <format id="div-table-responsive" label="div.table-responsive" image="" notes="" classes="table-responsive" selector="div">
        <select />
      </format>
      <format id="div-pull-left" label="div.pull-left" image="" notes="" classes="pull-left" selector="div">
        <select />
      </format>
      <format id="div-pull-right" label="div.pull-right" image="" notes="" classes="pull-right" selector="div">
        <select />
      </format>
      <format id="div-alert-success" label="div.alert-success" image="" notes="" classes="alert alert-success" selector="div">
        <select />
      </format>
      <format id="div-alert-info" label="div.alert-info" image="" notes="" classes="alert alert-info" selector="div">
        <select />
      </format>
      <format id="div-alert-warning" label="div.alert-warning" image="" notes="" classes="alert alert-warning" selector="div">
        <select />
      </format>
      <format id="div-alert-danger" label="div.alert-danger" image="" notes="" classes="alert alert-danger" selector="div">
        <select />
      </format>
      <!--
      <format id="div-columns-2" label="div.columns-2" image="" notes="" classes="columns-2" selector="div">
        <select />
      </format>
      <format id="div-columns-3" label="div.columns-3" image="" notes="" classes="columns-3" selector="div">
        <select />
      </format>
      -->
      <format id="div-panel-primary" label="div.panel-primary" image="" notes="" classes="panel panel-primary" selector="div">
        <select />
      </format>
      <format id="div-panel-success" label="div.panel-success" image="" notes="" classes="panel panel-success" selector="div">
        <select />
      </format>
      <format id="div-panel-info" label="div.panel-info" image="" notes="" classes="panel panel-info" selector="div">
        <select />
      </format>
      <format id="div-panel-warning" label="div.panel-warning" image="" notes="" classes="panel panel-warning" selector="div">
        <select />
      </format>
      <format id="div-panel-danger" label="div.panel-danger" image="" notes="" classes="panel panel-danger" selector="div">
        <select />
      </format>
      <format id="div-panel-heading" label="div.panel-heading" image="" notes="" classes="panel-heading" selector="div">
        <select />
      </format>
      <format id="div-panel-body" label="div.panel-body" image="" notes="" classes="panel-body" selector="div">
        <select />
      </format>
      <format id="div-panel-footer" label="div.panel-footer" image="" notes="" classes="panel-footer" selector="div">
        <select />
      </format>
      <format id="div-embed-responsive-16by9" label="div.embed-responsive-16by9" image="" notes="" classes="embed-responsive embed-responsive-16by9" selector="div">
        <select />
      </format>
      <format id="div-embed-responsive-4by3" label="div.embed-responsive-4by3" image="" notes="" classes="embed-responsive embed-responsive-4by3" selector="div">
        <select />
      </format>
      <format id="iframe-embed-responsive-item" label="iframe.embed-responsive-item" image="" notes="" classes="embed-responsive-item" selector="iframe">
        <select />
      </format>
    </radiogroup>

  </formats>
</visualeditor>

The Result

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


comments powered by Disqus