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