"Text editor bootstrap"
Bootstrap 3.0.0 Snippet by thanhduy

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="VBeditor"> <div class="VBhead"> <div class="bitem"> <ul class="bitem-ul"> <li class="bitem-u-li"><p class="itemred"></p></li> <li class="bitem-u-li"><p class="itemyl"></p></li> <li class="bitem-u-li"><p class="itemgr"></p></li> <li class="bitem-u-li"><p class="itemtext"></p></li> </ul> </div> </div> <div class="VBbody"> <textarea class="textarea" name="code_input" id="code_input"> <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> </textarea> <button class="btn btn-primary" id="btn-view" onClick="preview();">Preview</button> <input class="btn btn-default" type="button" value="bold" onClick="formatText ('b');" /> <input class="btn btn-default" type="button" value="italic" onClick="formatText ('i');" /> <input class="btn btn-default" type="button" value="underline" onClick="formatText ('u');" /> <input class="btn btn-default" type="button" value="span" onClick="formatText ('span');" /> <div id="iframeshow" class="iframeshow"> </div> </div> <div class="VBfooter"> </div> </div> </div> </div>
.tool-ul{list-style:none;} .tool-ul-li{ display: inline-block; } .VBhead{ background: #e1e1e1; width: auto; height:30px; border-top-right-radius: 5px; border-top-left-radius: 5px; } .VBeditor{ background: #1e1e1e; width: auto; height: auto; border-radius: 5px; } .VBfooter{ background: #0075c3; width: auto; height: 30px; margin-top: auto; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .bitem-ul{ list-style: none; } .bitem-u-li{ display: inline-block; } .itemred{ background: #ff5f5c; width: 15px; height: 15px; border-radius: 60px; margin-left: -39px; margin: 9px -36px; } .itemyl{ background: #ffbb4e; width: 15px; height: 15px; border-radius: 60px; margin-left: -39px; margin: 9px -19px; } .itemgr{ background: #00ca58; width: 15px; height: 15px; border-radius: 60px; margin-left: -39px; margin: 9px 0px; } .itemtext{ background: #000; width: 15px; height: 15px; font-family: Arial; margin-left: -39px; margin: 9px 22px; border-radius: 4px; } .VBbody{ color: #fff; } .textarea{ background-color: #272822; font-family: consolas,"courier new",monospace; font-size: 15px; height: 399px; width: 98%; padding: 8px; resize: none; border: none; line-height: normal; color: #fff; overflow: auto; } .textarea:focus{ outline: none; } .iframeshow{ background: #e6e6e6; width: auto; height: 339px; overflow-y: auto; color: #000; font-family: Arial; } #btn-view{ width: auto; }
//VBeditor vesion 1.1.1 Copyright 2017 function formatText(tag) { var myTextArea = document.getElementById('code_input'); var myTextAreaValue = myTextArea.value; var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd); var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart); var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length); myTextArea.value = before_txt + '<' + tag + '>' + selected_txt + '</' + tag + '>' + after_txt; } function preview() { var textbox , view ; textbox = document.getElementById('code_input'); view = document.getElementById("iframeshow"); view.innerHTML = textbox.value } function onload(){ var textarea = document.getElementById("code_input"); textarea.onkeypress = function(e){ if( e.which === 13) { this.value += "<br>"; } } }

Related: See More

Vue Now UI Kit
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
JS Typewriter (Text Animation)

Questions / Comments: