Gmail like configuration in CK Editor 4 Toolbar

Demo

See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen.

First we need to include full version script of CK Editor 4 in our page and then add the following toolbar configuration. The configuration is very near to that of a Gmail. i.e. toolbar at the bottom with the most used function stacked from left to right and top to bottom.

<div class="ckEditor__section">
  <textarea class="form-control" name="msg" rows="3" id="editor1" placeholder="Type Your Message"></textarea>
</div>
<script src="//cdn.ckeditor.com/4.19.0/full/ckeditor.js"></script>
<script>
CKEDITOR.replace("editor1", {
  uiColor: "#dadada",
  height: 250,
  toolbarLocation: "bottom",

  toolbar: [
    {
      name: "clipboard",
      groups: ["clipboard", "undo"],
      items: ["Undo", "Redo"]
    },
    { name: "styles", items: ["Format", "Styles"] },
    {
      name: "basicstyles",
      groups: ["basicstyles", "cleanup"],
      items: ["Bold", "Italic", "Underline", "Strike", "-", "RemoveFormat"]
    },
    { name: "colors", items: ["TextColor", "BGColor"] },
    {
      name: "editing",
      groups: ["find", "selection", "spellchecker"],
      items: ["Scayt"]
    },
    {
      name: "paragraph",
      items: [
        "NumberedList",
        "BulletedList",
        "-",
        "JustifyLeft",
        "JustifyCenter",
        "JustifyRight",
        "JustifyBlock",
        "-",
        "Outdent",
        "Indent",
        "-",
        "BidiLtr",
        "BidiRtl",
        "-",
        "Blockquote"
      ]
    },
    {
      name: "basicstyles",
      groups: ["basicstyles", "cleanup"],
      items: ["Strike", "-", "RemoveFormat"]
    },
    "/",
    { name: "links", items: ["Link", "Unlink"] },
    { name: "insert", items: ["Smiley", "Image", "Table", "HorizontalRule"] },
    { name: "tools", items: ["Maximize"] },
    {
      name: "document",
      groups: ["mode", "document", "doctools"],
      items: ["Source"]
    },
    { name: "others", items: ["-"] }
  ]
});
</script>

You can use this configurator for more functions – http://cdn.ckeditor.com/4.13.0/full-all/samples/toolbarconfigurator/index.html#advanced