Merge pull request #41 from RandomlyKnighted/master

Remove call to library dependencies located in external folder and tagging.
steveathon · Jul 6, 2015 · fe268ae · fe268ae
2 parents 5a1c4f7 + 9d49573
commit fe268ae
Show file tree

Hide file tree

Showing 47 changed files with 230 additions and 366 deletions.
diff --git a/CHANGES b/CHANGES
@@ -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

diff --git a/css/style.css b/css/style.css
@@ -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;
@@ -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;
 }
diff --git a/examples/basic.html b/examples/basic.html
@@ -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"

diff --git a/examples/clear-formatting.html b/examples/clear-formatting.html
@@ -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" />
@@ -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">
@@ -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>

diff --git a/examples/events.html b/examples/events.html
@@ -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" />
@@ -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">
@@ -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">
@@ -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()

diff --git a/examples/form-post.html b/examples/form-post.html
@@ -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" />	
@@ -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">
@@ -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>
@@ -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(
 			{

diff --git a/examples/formatblock-example.html b/examples/formatblock-example.html
@@ -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" />
@@ -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">
@@ -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>