Skip to content

Commit

Permalink
Merge pull request #41 from RandomlyKnighted/master
Browse files Browse the repository at this point in the history
Remove call to library dependencies located in external folder and tagging.
  • Loading branch information
steveathon committed Jul 6, 2015
2 parents 5a1c4f7 + 9d49573 commit fe268ae
Show file tree
Hide file tree
Showing 47 changed files with 230 additions and 366 deletions.
12 changes: 12 additions & 0 deletions CHANGES
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
* Add change event callback

1.0.3 - Bug fixes and updated content
* General bug fixes and improvements
* Added gulpfile.js to streamline
* Created example
- Multiple editors (on a single page)
* Updated content
- Updated jquery.hotkeys
- Updated Bootstrap to version 3.3.4
- Updated Font Awesome to version 4.3.0
- Updated jQuery to version 2.1.4
- Updated Google Code Prettify to version 1.0.4

1.0.2 - Merged some extras

* Added support for placeholder attribute as requested in issue #143 and #136
Expand Down
25 changes: 24 additions & 1 deletion css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

#voiceBtn {
.voiceBtn {
width: 20px;
color: transparent;
background-color: transparent;
Expand All @@ -53,6 +53,29 @@ div[data-role="editor-toolbar"] {
.btn-toolbar {
padding: 10px 0px 10px 0px;
}

[contentEditable=true]:empty:not(:focus):before {
content:attr(data-placeholder)
}

.placeholderText {
color: #777;
}

/*
Font Sizes
fs represents the font-size attribute; therefore,
fs-five would be the equivalent to font-size: 5;
*/

.fs-One {
font-size: x-small;
}

.fs-Three {
font-size: medium;
}

.fs-Five {
font-size: x-large;
}
9 changes: 4 additions & 5 deletions examples/basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,22 @@
<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>

<link href="../external/google-code-prettify/prettify.css" rel="stylesheet" />
<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 rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" />
<link href="../css/style.css" rel="stylesheet" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../external/jquery.hotkeys.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="../external/google-code-prettify/prettify.js"></script>
<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
<script src="../src/bootstrap-wysiwyg.js"></script>
</head>

<body>
<div class="container">
<h1>Basic editor, no fancy bits.</h1>
<div id="editor" class="lead" placeholder="This is a basic example with no toolbars."></div>
<div id="editor" class="lead" data-placeholder="This is a basic example with no toolbars."></div>
<div id="editorPreview"></div>
<p style="text-align: center;">
<a class="btn btn-large btn-default jumbo"
Expand Down
20 changes: 10 additions & 10 deletions examples/clear-formatting.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<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>
<link href="../external/google-code-prettify/prettify.css" rel="stylesheet" />
<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" />
Expand All @@ -20,9 +20,9 @@ <h1>Simple Editor with Toolbar</h1>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<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 1"><font size="1">Small</font></a></li>
<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">
Expand All @@ -46,34 +46,34 @@ <h1>Simple Editor with Toolbar</h1>
<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 class="span2" placeholder="URL" type="text" data-edit="createLink" />
<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>
<a class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i>
<span class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</a>
</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>
<a class="btn btn-default" data-edit="clearformat" title="Clear Formatting" onClick="$('#editor').html($('#editor').text());"><i class='glyphicon glyphicon-fire'></i></a>
</div>
</div>
<div id="editor" class="lead" placeholder="This is a basic example with a simple toolbar."></div>
<div id="editor" class="lead" data-placeholder="This is a basic example with a simple toolbar."></div>
<div id="editorPreview"></div>
<p style="text-align: center;">
<a class="btn btn-large btn-default jumbo" href="#!" onClick="$('#editorPreview').html($('#editor').html());">Submit</a>
</p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../external/jquery.hotkeys.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="../external/google-code-prettify/prettify.js"></script>
<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
<script src="../src/bootstrap-wysiwyg.js"></script>
<script type='text/javascript'>$('#editor').wysiwyg();</script>
</body>
Expand Down
25 changes: 12 additions & 13 deletions examples/events.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<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>
<link href="../external/google-code-prettify/prettify.css" rel="stylesheet" />
<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" />
Expand All @@ -18,11 +18,11 @@ <h1>Type something to see events</h1>
<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 Size"><i class="fa fa-text-height"></i>&nbsp;<bclass="caret"></b></a>
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<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 1"><font size="1">Small</font></a></li>
<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">
Expand All @@ -34,7 +34,7 @@ <h1>Type something to see events</h1>
<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="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">
Expand All @@ -46,33 +46,32 @@ <h1>Type something to see events</h1>
<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 class="col-md-2" placeholder="URL" type="text" data-edit="createLink" />
<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>
<a class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn">
<span class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn">
<i class="fa fa-picture-o"></i> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</a>
</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>
</div>
<div id="editor" class="lead" placeholder="This is a basic example with no toolbars."></div>
<div id="editor" class="lead" data-placeholder="This is a basic example with no toolbars."></div>
<h2>Live Preview</h2>
<div id="editorPreview"></div>
<h2>Events fired:</h2>
<p id="events_log"></p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../external/jquery.hotkeys.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="../external/google-code-prettify/prettify.js"></script>
<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
<script src="../src/bootstrap-wysiwyg.js"></script>
<script type='text/javascript'>
$('#editor').wysiwyg().on('change', function()
Expand Down
29 changes: 13 additions & 16 deletions examples/form-post.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<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>
<link href="../external/google-code-prettify/prettify.css" rel="stylesheet" />
<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" />
Expand All @@ -20,9 +20,9 @@ <h1>Simple HTML Editor</h1>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<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 1"><font size="1">Small</font></a></li>
<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">
Expand All @@ -46,16 +46,16 @@ <h1>Simple HTML Editor</h1>
<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 class="col-md-2" placeholder="URL" type="text" data-edit="createLink" />
<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>
<a class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn">
<i class="fa fa-picture-o"></i> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</a>
<span class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn">
<i class="fa fa-picture-o"></i>
<input 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>
Expand All @@ -66,19 +66,16 @@ <h1>Simple HTML Editor</h1>
<div id="editorPreview"></div>

<form action="php/upload.php" method="post" enctype="multipart/form-data" id='submitForm'>
<p style="text-align: center;">
<div id="editor" class="lead" placeholder="This is a basic example with a simple toolbar."></div>
<a class="btn btn-large btn-default jumbo"
href="#!" onClick="$('#mySubmission').val($('#editor').cleanHtml(true));$('#submitForm').submit();">Submit</a>
</p>
<div id="editor" class="lead" data-placeholder="This is a basic example with a simple toolbar."></div>
<a class="btn btn-large btn-default jumbo" href="#!" onClick="$('#mySubmission').val($('#editor').cleanHtml(true));$('#submitForm').submit();">Submit</a>
<input type='hidden' name='formSubmission' id='mySubmission'/>
</form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../external/jquery.hotkeys.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="../external/google-code-prettify/prettify.js"></script>
<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
<script src="../src/bootstrap-wysiwyg.js"></script>
<script type='text/javascript'>$('#editor').wysiwyg(
{
Expand Down
20 changes: 10 additions & 10 deletions examples/formatblock-example.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<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>
<link href="../external/google-code-prettify/prettify.css" rel="stylesheet" />
<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" />
Expand All @@ -20,9 +20,9 @@ <h1>Simple HTML Editor</h1>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<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 1"><font size="1">Small</font></a></li>
<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">
Expand Down Expand Up @@ -58,33 +58,33 @@ <h1>Simple HTML Editor</h1>
<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 class="col-md-2" placeholder="URL" type="text" data-edit="createLink" />
<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>
<a class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn">
<span class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn">
<i class="fa fa-picture-o"></i> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</a>
</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>
<a class="btn btn-default" data-edit="html" title="Clear Formatting"><i class='glyphicon glyphicon-pencil'></i></a>
</div>
</div>
<div id="editor" class="lead" placeholder="This is a basic example with a simple toolbar."></div>
<div id="editor" class="lead" data-placeholder="This is a basic example with a simple toolbar."></div>
<div id="editorPreview"></div>
<p style="text-align: center;">
<a class="btn btn-large btn-default jumbo" href="#!" onClick="$('#editorPreview').html($('#editor').html());">Submit</a>
</p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../external/jquery.hotkeys.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="../external/google-code-prettify/prettify.js"></script>
<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
<script src="../src/bootstrap-wysiwyg.js"></script>
<script type='text/javascript'>$('#editor').wysiwyg();</script>
</body>
Expand Down
Loading

0 comments on commit fe268ae

Please sign in to comment.