Skip to content
This repository was archived by the owner on Jul 24, 2019. It is now read-only.

Commit e1849bd

Browse files
gojkogojko
committed
basic buttons working, saving selection
1 parent a0a2ac2 commit e1849bd

File tree

5 files changed

+214
-59
lines changed

5 files changed

+214
-59
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License
2+
3+
Copyright (c) 2013 Damjan Vujnovic, David de Florinier, Gojko Adzic
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
9+
of the Software, and to permit persons to whom the Software is furnished to do
10+
so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎bootstrap-wysiwyg.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#editor {
2+
max-height:300px;
3+
height: 100px;
4+
background-color: white;
5+
background-color: rgb(255, 255, 255);
6+
border-collapse: separate;
7+
border: 1px solid rgb(204, 204, 204);
8+
padding: 4px;
9+
box-sizing: content-box;
10+
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
11+
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
12+
border-top-right-radius: 3px; border-bottom-right-radius: 3px;
13+
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
14+
overflow:scroll;
15+
}

‎bootstrap-wysiwyg.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*!
2+
* Bootstrap Wysiwyg Rich Text Editor v1.0
3+
* https://github.com/mindmup/bootstrap-wysiwyg
4+
*
5+
* Copyright 2013, Gojko Adzic, Damjan Vujnovic, David de Florinier
6+
* Licensed under the MIT license.
7+
* https://github.com/mindmup/bootstrap-wysiwyg/LICENSE
8+
*
9+
*/
10+
/*global $*/
11+
/*jslint browser:true*/
12+
$.fn.wysiwyg = function (options) {
13+
'use strict';
14+
var editor = this,
15+
selectedRange,
16+
defaultOptions = {
17+
hotKeys: {
18+
'ctrl+b meta+b': 'bold',
19+
'ctrl+i meta+i': 'italic',
20+
'ctrl+u meta+u': 'underline',
21+
'ctrl+z meta+z': 'undo',
22+
'ctrl+y meta+y meta+shift+z': 'redo'
23+
},
24+
toolbarRole: 'editor-toolbar',
25+
commandRole: 'edit'
26+
},
27+
execCommand = function (command) {
28+
document.execCommand(command, 0);
29+
},
30+
bindHotkeys = function (hotKeys) {
31+
$.each(hotKeys, function (hotkey, command) {
32+
editor.keydown(hotkey, function (e) {
33+
e.preventDefault();
34+
e.stopPropagation();
35+
execCommand(command);
36+
}).keyup(hotkey, function (e) {
37+
e.preventDefault();
38+
e.stopPropagation();
39+
});
40+
});
41+
},
42+
saveSelectionRange = function () {
43+
var sel = window.getSelection();
44+
if (sel.getRangeAt && sel.rangeCount) {
45+
selectedRange = sel.getRangeAt(0);
46+
}
47+
},
48+
restoreSelectionRange = function () {
49+
var selection = window.getSelection();
50+
if (selectedRange) {
51+
selection.removeAllRanges();
52+
selection.addRange(selectedRange);
53+
}
54+
},
55+
bindToolbar = function (toolbar, options) {
56+
var target = $(toolbar.data('target'));
57+
toolbar.find('[data-' + options.commandRole + ']').click(function () {
58+
restoreSelectionRange();
59+
execCommand($(this).data(options.commandRole));
60+
saveSelectionRange();
61+
});
62+
};
63+
options = $.extend({}, defaultOptions, options);
64+
bindHotkeys(options.hotKeys);
65+
$.each($.find('[data-role=' + options.toolbarRole + ']'), function () { bindToolbar($(this), options); });
66+
$.each(this, function () {
67+
var before,
68+
element = $(this);
69+
element.attr('contenteditable', true)
70+
.on('focus', function () {
71+
before = element.html();
72+
})
73+
.on('mouseup keyup mouseout', saveSelectionRange)
74+
.on('input blur keyup paste', function () {
75+
if (before !== element.html()) {
76+
before = element.html();
77+
element.trigger('change');
78+
}
79+
});
80+
});
81+
return this;
82+
}

‎bootstrap-wyswyg.js

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎index.html

Lines changed: 96 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,110 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
5-
<script src="http://raw.github.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
6-
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
7-
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
4+
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
5+
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
86
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
7+
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
9+
<script src="http://raw.github.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
10+
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
11+
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
12+
13+
<link href="bootstrap-wysiwyg.css" rel="stylesheet">
914
<script src="bootstrap-wysiwyg.js"></script>
1015
</head>
1116
<body>
1217

1318
<div class="container">
14-
<div class="hero-unit">
15-
<h1>bootstrap-wyswyg <small>very small wyswyg for boostrap</small></h1>
16-
<hr/>
17-
<div class="nav" data-role="toolbar" data-target="#editor">
18-
</div>
19-
<div id="#editor">
20-
</div>
21-
</div>
22-
23-
<div class="row">
24-
<div class="span6">
25-
<h2>About</h2>
26-
<p>
27-
Tiny (5K) JQuery Bootstrap plugin to turn 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>. Here are the key features:
28-
<ul>
29-
<li>Bootstrap compatible and consistent with declarative data configuration</li>
30-
<li>Automatically binds standard hotkeys</li>
31-
<li>Uses standard browser features, no magic</li>
32-
<li>Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV</li>
33-
<li>Requires a modern browser (HTML5 contenteditable)</li>
34-
</ul>
35-
</p>
36-
</div>
37-
<div class="span6" >
38-
<h2>Usage</h2>
39-
<pre>$('#editor').wyswyg();</pre>
40-
<p style="text-align:center; margin-top:20px">
19+
<div class="hero-unit">
20+
<h1>bootstrap-wyswyg <small>tiny wyswyg rich text editor for boostrap</small></h1>
21+
<hr/>
22+
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
23+
<div class="btn-group">
24+
<a class="btn btn-large"><i class="icon-font"></i></a>
25+
<a class="btn btn-large"><i class="icon-text-height"></i></a>
26+
</div>
27+
<div class="btn-group">
28+
<a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a>
29+
<a class="btn btn-large" data-edit="italic"><i class="icon-italic"></i></a>
30+
<a class="btn btn-large" data-edit="strikethrough"><i class="icon-strikethrough"></i></a>
31+
<a class="btn btn-large" data-edit="underline"><i class="icon-underline"></i></a>
32+
</div>
33+
<div class="btn-group">
34+
<a class="btn btn-large" data-edit="insertunorderedlist"><i class="icon-list-ol"></i></a>
35+
<a class="btn btn-large" data-edit="insertorderedlist"><i class="icon-list-ul"></i></a>
36+
<a class="btn btn-large" data-edit="outdent"><i class="icon-indent-left"></i></a>
37+
<a class="btn btn-large" data-edit="indent"><i class="icon-indent-right"></i></a>
38+
</div>
39+
<div class="btn-group">
40+
<a class="btn btn-large" data-edit="undo"><i class="icon-undo"></i></a>
41+
<a class="btn btn-large" data-edit="redo"><i class="icon-repeat"></i></a>
42+
</div>
43+
</div>
44+
<div id="editor">
45+
Go ahead...
46+
</div>
47+
</div>
48+
49+
<div class="row">
50+
<div class="span6">
51+
<h2>About</h2>
52+
<p>
53+
Tiny (5K) JQuery Bootstrap plugin turns any DIV into a WYSIWYG
54+
rich-content editor, inspired by <a href="http://premiumsoftware.net/cleditor/">CLEditor</a> and
55+
<a href="http://jhollingworth.github.com/bootstrap-wysihtml5/">bootstrap-wysihtml5</a>.
56+
Here are the key features:
57+
</p>
58+
<ul>
59+
<li>Bootstrap compatible and consistent with declarative data configuration</li>
60+
<li>Allows a custom built toolbar, no magic markup generators, enabling you to use all the goodness of bootstrap, FortAwesome and so on...</li>
61+
<li>Uses standard browser features, no magic non-standard code</li>
62+
<li>Automatically binds standard hotkeys, you can customise it</li>
63+
<li>Does not force any styling - it's all up to you</li>
64+
<li>(Optionally) cleans up trailing whitespace and empty divs and spans to prevent fake updates</li>
65+
<li>Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV</li>
66+
<li>Requires a modern browser, and adjusts to browser capabilties</li>
67+
</ul>
68+
<h2>Why?</h2>
69+
<p>
70+
While building a content editor for <a href="http://www.mindmup.com">MindMup</a> we found plenty of good HTML5 WYSWYG editors online, but most were duplicating
71+
functionality that already exists in JQuery and Bootstrap, was meanwhile added to HTML5 and supported in major btowsers, or doing too much magic, inserting IFrames with separate
72+
document context and mirroring textareas. This is required to work around quirks in older browsers (which we didn't need) and
73+
caused focus problems on touch devices (which was an issue for us). Too much magic caused problems with
74+
bootstrap modals (a must for us). Most good editors also build their own toolbars which turn out to be much worse than standard bootstrap buttons. So
75+
we built this tiny tiny editor that does everything we need.
76+
</p>
77+
</div>
78+
<div class="span6" >
79+
<h2>Usage</h2>
80+
<pre class="prettyprint linenums">$('#editor').wyswyg();</pre>
81+
<p>Don't forget to style your editor div:</p>
82+
<pre class="prettyprint linenums">
83+
#editor {overflow:scroll; max-height:300px}
84+
</pre>
85+
<p>Optionally, also create a toolbar:</p>
86+
<pre class="prettyprint linenums">
87+
&lt;div class="btn-toolbar" data-role="editor-toolbar"
88+
data-target="#editor"&gt;
89+
&lt;a data-edit="..."&gt;...&lt;/a&gt;
90+
...
91+
&lt;/div&gt;
92+
</pre>
93+
94+
<p>Use standard JQuery methods to access and set content and focus. You can also ask for cleaned up HTML content:</p>
95+
<pre class="prettyprint linenums">
96+
$('#editor').cleanHtml()
97+
</pre>
98+
<p style="text-align:center; margin-top:20px">
4199
<a class="btn btn-large btn-primary jumbo" href="https://github.com/mindmup/bootstrap-wysiwyg/">View project on Github</a>
42-
</p>
100+
</p>
43101
</div>
44102
</div>
45103
</div>
104+
<script>
105+
$(function(){
106+
window.prettyPrint && prettyPrint();
107+
$('#editor').wysiwyg();
108+
});
109+
</script>
46110
</html>

0 commit comments

Comments
 (0)