bootstrap-wysiwyg
Version:
A tiny Bootstrap and jQuery based WYSIWYG rich text editor based on the browser function execCommand.
244 lines (220 loc) • 10.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A tiny, opensource, Bootstrap WYSIWYG rich text editor</title>
<meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5" />
<meta name="description" content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor" />
<link href="bower_components/google-code-prettify/src/prettify.css" rel="stylesheet" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="pull-right"></div>
<h1>
bootstrap-wysiwyg <br /><small>tiny WYSIWYG rich text
editor for Bootstrap</small>
</h1>
<hr />
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown"
title="Font"><i class="fa fa-font"></i><b class="caret"></b>
</a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown"
title="Font Size"><i class="fa fa-text-height"></i> <b
class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5" class="fs-Five">Huge</a></li>
<li><a data-edit="fontSize 3" class="fs-Three">Normal</a></li>
<li><a data-edit="fontSize 1" class="fs-One">Small</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
<a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
<a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<a class="btn btn-default" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
<a class="btn btn-default" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-outdent"></i></a>
<a class="btn btn-default" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
<div class="dropdown-menu input-append">
<input placeholder="URL" type="text" data-edit="createLink" />
<button class="btn" type="button">Add</button>
</div>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-unlink"></i></a>
<span class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"> <i class="fa fa-picture-o"></i>
<input class="imgUpload" type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</span>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn btn-default" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div>
<input class="pull-right" type="text" data-edit="inserttext" id="voiceBtn" />
</div>
<div id="editor" class="lead" data-placeholder="Go ahead…"></div>
</div>
<div class="row">
<div class="col-md-6">
<h2>About</h2>
<p>
This tiny (8KB, < 250 lines) jQuery Bootstrap plugin turns any
DIV into a WYSIWYG rich-content editor, inspired by <a
href="http://premiumsoftware.net/cleditor/">CLEditor</a> and <a
href="http://jhollingworth.github.com/bootstrap-wysihtml5/">bootstrap-wysihtml5</a>.
</p>
<p>This code is a fork which is currently 16+ commits behind.
I've forked it and updated it with the changes that were in the
pull request queue and found a few more around the place too.</p>
<p>This project does not intend to replace the original, but it
is more up to date.</p>
<ul>
<li>Thanks to</li>
<li><a href='https://github.com/jordanh'>@jordanh</a></li>
<li><a href='https://github.com/beatnbite'>@beatnbite</a></li>
<li><a href='https://github.com/brutuscat'>@brutuscat</a></li>
<li><a href='https://github.com/VictorBjelkholm'>@VictorBjelkholm</a></li>
<li><a href='https://github.com/mrmrs'>@mrmrs</a></li>
<li><a href='https://github.com/tilleryd'>@tilleryd</a></li>
<li><a href='https://github.com/pnevels'>@pnevels</a></li>
</ul>
</div>
<div class="col-md-6">
<h2>Usage</h2>
<pre class="prettyprint linenums">$('#editor').wysiwyg();</pre>
<p>Don't forget to style your editor div:</p>
<pre class="prettyprint linenums">#editor {overflow:scroll; max-height:300px}</pre>
<p>
If you want to use this for a mobile web site, make sure to read
about <a href="https://github.com/mindmup/bootstrap-wysiwyg#styling-for-mobile-devices">how
to style it</a> to optimise mobile screen usage and experience (please
note that this demo page isn't optimised for mobile access).
</p>
<p>Optionally, also create a toolbar (see the source of this
page for an example):</p>
<pre class="prettyprint linenums"><div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
...
</div>
</pre>
<p>
In the toolbar, execute simple commands by adding a data-edit attribute to a link.
<p>
<pre class="prettyprint linenums"><a data-edit="bold">...</a></pre>
<p>execute more complex commands by adding an argument after a
blank or providing an input with a data-edit command (the input
value is used as an argument). In case of file inputs, the file
contents are read in using the FileReader API and used as the
command value.
<p>
<pre class="prettyprint linenums"><a data-edit="fontName Arial">...</a>
...
<input type="text" data-edit="createLink"/>
...
<input type="file" data-edit="insertImage" /></pre>
<p>
Use standard jQuery methods to access and set content and focus. You can also ask for cleaned up HTML content:
</p>
<pre class="prettyprint linenums">$('#editor').cleanHtml()</pre>
<p style="text-align: center;">
<a class="btn btn-large btn-default jumbo"
href="https://github.com/steveathon/bootstrap-wysiwyg/">View
project on Github</a>
</p>
<p style="text-align: center; margin-top: 20px"></p>
</div>
</div>
</div>
<a href="https://github.com/steveathon/bootstrap-wysiwyg/">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
alt="Fork me on GitHub">
</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bower_components/jquery.hotkeys/jquery.hotkeys.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="bower_components/google-code-prettify/src/prettify.js"></script>
<script src="src/bootstrap-wysiwyg.js"></script>
<script>
$(function()
{
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 class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
window.prettyPrint && prettyPrint();
});
</script>
</body>
</html>