Adding support for <div placeholder=""> as per original issue #143

Tested in Safari, FF and Chrome. Not tested on mobile.
steveathon · Apr 28, 2014 · 9a58103 · 9a58103
1 parent 9b253aa
commit 9a58103
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/bootstrap-wysiwyg.js b/bootstrap-wysiwyg.js
@@ -206,6 +206,25 @@
 		options = $.extend(true, {}, $.fn.wysiwyg.defaults, userOptions);
 		toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
 		bindHotkeys(options.hotKeys);
+
+		// Support placeholder attribute on the DIV
+		if ($(this).attr('placeholder') != '') {
+			$(this).addClass('placeholderText');
+			$(this).html($(this).attr('placeholder'));
+			$(this).bind('focus',function(e) {
+				if ( $(this).attr('placeholder') != '' && $(this).text() == $(this).attr('placeholder') ) {
+					$(this).removeClass('placeholderText');
+					$(this).html('');
+				}
+			});
+			$(this).bind('blur',function(e) {
+				if ( $(this).attr('placeholder') != '' && $(this).text() == '' ) {
+					$(this).addClass('placeholderText');
+					$(this).html($(this).attr('placeholder'));
+				}
+			})
+		}
+
 		if (options.dragAndDropImages) {
 			initFileDrops();
 		}
@@ -228,16 +247,16 @@
 	};
 	$.fn.wysiwyg.defaults = {
 		hotKeys: {
-			'ctrl+b meta+b': 'bold',
-			'ctrl+i meta+i': 'italic',
-			'ctrl+u meta+u': 'underline',
-			'ctrl+z meta+z': 'undo',
-			'ctrl+y meta+y meta+shift+z': 'redo',
-			'ctrl+l meta+l': 'justifyleft',
-			'ctrl+r meta+r': 'justifyright',
-			'ctrl+e meta+e': 'justifycenter',
-			'ctrl+j meta+j': 'justifyfull',
-			'shift+tab': 'outdent',
+			'Ctrl+b meta+b': 'bold',
+			'Ctrl+i meta+i': 'italic',
+			'Ctrl+u meta+u': 'underline',
+			'Ctrl+z': 'undo',
+			'Ctrl+y meta+y meta+shift+z': 'redo',
+			'Ctrl+l meta+l': 'justifyleft',
+			'Ctrl+r meta+r': 'justifyright',
+			'Ctrl+e meta+e': 'justifycenter',
+			'Ctrl+j meta+j': 'justifyfull',
+			'Shift+tab': 'outdent',
 			'tab': 'indent'
 		},
 		toolbarSelector: '[data-role=editor-toolbar]',

diff --git a/bootstrap-wysiwyg.min.js b/bootstrap-wysiwyg.min.js
diff --git a/index.css b/index.css
@@ -42,4 +42,7 @@ div[data-role="editor-toolbar"] {
 }
 .btn-toolbar {
 	padding: 10px 0px 10px 0px;
+}
+.placeholderText {
+	color: #777;
 }
diff --git a/index.html b/index.html
@@ -130,7 +130,7 @@ <h1>
 					id="voiceBtn" x-webkit-speech="" />
 			</div>
 
-			<div id="editor" class="lead">Go ahead&hellip;</div>
+			<div id="editor" class="lead" placeholder="Go ahead&hellip;"></div>
 		</div>
 
 		<div class="row">