This article teaches you how to use bootstrap-wysiwyg text editor to give full play to the advantages of the editor. I hope you can gain something.
Main features:
Super small 5kb
Automatic hotkey support (MAC and windows)
Drag and drop insert pictures, support upload of pictures (supports mobile phone photography)
Support sound input (chrome support)
Allow custom toolbars to use all bootstrap content, fonts
No mandatory styles are used
……………………………………………………………………
In fact, it’s more than that, everyone needs to explore it themselves, come on!
It is actually very simple to use. Pour the JS of bootstrap related CSS, JS, jQuery, and bootstrap-wysiwyg, as follows:
<link href="bootstrap-combined.no-icons.min.css" rel="stylesheet"><link href="bootstrap-responsive.min.css" rel="stylesheet"><link href="http://netdna.bootstrappcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"><link rel="stylesheet" href="index.css" type="text/css"> </link><script src="jquery1.9.1.min.js" type="text/javascript"></script><script src="bootstrap.min.js"></script><script src="bootstrap-wysiwyg.js" type="text/javascript"></script><script src="external/jquery.hotkeys.js" type="text/javascript"></script>
Define related menu item properties and methods:
function initToolbarBootstrapBindings() { var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times', 'Times New Roman', 'Verdana'], fontTarget = $('[title=Font]').siblings('.dropdown-menu'); $.each(fonts, function (idx, fontName) { fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:/''+ fontName +'/'">'+fontName + '</a></li>')); }); $('a[title]').tooltip({container:'body'}); $('.dropdown-menu input').click(function() {return false;}) .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');}) .keydown('esc', function () {this.value='';$(this).change();}); $('[data-role=magic-overlay]').each(function () { var overlay = $(this), target = $(overlay.data('target')); overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight()); }); if ("onwebkitspeechchange" in document.createElement("input")) { var editorOffset = $('#editor').offset(); $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35}); } else { $('#voiceBtn').hide(); } }; function showErrorAlert (reason, detail) { var msg=''; if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; } else { console.log("error uploading file", reason, detail); } $('<div> <button type="button" data-dismiss="alert">×</button>'+ '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts'); }; initToolbarBootstrapBindings(); $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );Finally, the HTML code:
<div data-role="editor-toolbar" data-target="#editor"> <div> <a data-toggle="dropdown"><i></i><b></b></a> <ul> </ul> </div> <div> <a data-toggle="dropdown"><i></i><b></b></a> <ul> <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li> <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li> <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li> <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li> </ul> </div> <div> <a data-edit="bold"><i></i></a> <a data-edit="italic"><i></i></a> <a data-edit="strikethrough"><i></i></a> <a data-edit="underline"><i></i></a> </div> <div> <a data-edit="insertunorderedlist"><i></i></a> <a data-edit="outdent"><i></i></a> <a data-edit="outdent"><i></i></a> <a data-edit="outdent"><i></i></a> <a data-edit="outdent"><i></i></a> <a data-edit="indent"><i></i></a> </div> <div> <a data-edit="justifyleft"><i></i></a> <a data-edit="justifycenter"><i></i></a> <a data-edit="justifyright"><i></i></a> <a data-edit="justifyfull"><i></i></a> </div> <div> <a data-toggle="dropdown"><i></i></a> <div> <input placeholder="URL" type="text" data-edit="createLink"/> <button type="button">Add</button> </div> <a data-edit="unlink"><i></i></a> </div> <div> <a id="pictureBtn"><i></i></a> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" /> </div> <div> <a data-edit="undo"><i></i></a> <a data-edit="redo"><i></i></a> </div> <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech=""> </div> <div id="editor"> Enter content… </div>
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.