New Post: Integration of tinyMCE Bootstrap Plugin?

It's certainly an interesting idea to add another row to the Visual Editor just for BootStrap objects. However, the version of TinyMCE that is used by Composite has been heavily modified to integrate the C1 functions and page/file browser. If you did swap out the VisualEditor, it may make upgrading C1 to a newer version more difficult and time-consuming... something you'll want to carefully weigh-up against the perceived benefits.

This being said, you may be able to get away with adding items to the existing menus by tweaking the ~/Frontend/Config/VisualEditor/cammon.xml file. Start by adding links to the Bootstrap CSS files:

<visualeditor>
  <!-- stylesheets to import (tip: you can also use @import inside the CSS) -->
  <styles>
    <style file="styles/core.css" />
    <!-- Do not remove core.css, as it supplies the Composite C1 functions rendering styles -->
    <style file="/Frontend/bootstrap/css/bootstrap.min.css" />
    <style file="/Frontend/styles/wysiwyg.css" />
    [ETC...]
  </styles>
<visualeditor>

I also added a /Frontend/styles/wysiwyg.css link, which gives me labels on block level elements using this stylesheet:

/* ##### Formatting Marks in WYSIWYG Visual Editor ##### */
BODY {
    line-height: normal;
}

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) "]";
    }

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;
}

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

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

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

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

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

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

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) "]";
}

/* 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;
}

Now you can add the buttons to common.xml file:

<visualeditor>
  <formats>
    <radiogroup>
      <!-- Block selectors: -->
      <format id="div-row" label="DIV.row" image="" notes="" block="div" classes="row" wrapper="1">
        <select />
      </format>
      <format id="div-col-sm-1" label="DIV.col-sm-1" image="" notes="" block="div" classes="col-sm-1" wrapper="1">
        <select />
      </format>
      [ETC...]
    </radiogroup>
  </formats>
</visualeditor>