From 9a581033c03868dc621cab04e67430e78a93063b Mon Sep 17 00:00:00 2001 From: Steve King Date: Mon, 28 Apr 2014 16:06:36 +1000 Subject: [PATCH] Adding support for
as per original issue #143 Tested in Safari, FF and Chrome. Not tested on mobile. --- bootstrap-wysiwyg.js | 39 +++++++++++++++++++++++++++++---------- bootstrap-wysiwyg.min.js | 2 +- index.css | 3 +++ index.html | 2 +- 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/bootstrap-wysiwyg.js b/bootstrap-wysiwyg.js index ebb0495..2d3940c 100644 --- 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 index 3b40804..49d3e54 100644 --- a/bootstrap-wysiwyg.min.js +++ b/bootstrap-wysiwyg.min.js @@ -5,4 +5,4 @@ * "Version" = '1.0.1' * "About" = 'Tiny Bootstrap and JQuery Based WISWYG rich text editor.' */ -(function(e){"use strict";var t=function(e,t){var n,r,i,s;var o=0;var u=function(){o=new Date;i=null;s=e.apply(n,r)};return function(){var a=new Date;var f=t-(a-o);n=this;r=arguments;if(f<=0){clearTimeout(i);i=null;o=a;s=e.apply(n,r)}else if(!i){i=setTimeout(u,f)}return s}};var n=function(t){var n=e.Deferred(),r=new FileReader;r.onload=function(e){n.resolve(e.target.result)};r.onerror=n.reject;r.onprogress=n.notify;r.readAsDataURL(t);return n.promise()};e.fn.cleanHtml=function(){var t=e(this).html();return t&&t.replace(/(
|\s|

<\/div>| )*$/,"")};e.fn.wysiwyg=function(r){var i=this,s=e(i).parent(),o,u,a,f=function(){if(u.activeToolbarClass){e(u.toolbarSelector,s).find(a).each(t(function(){var t=e(this).data(u.commandRole).split(" "),n=t[0];if(t.length>1&&document.queryCommandEnabled(n)&&document.queryCommandValue(n)==t[1]){e(this).addClass(u.activeToolbarClass)}else if(t.length===1&&document.queryCommandEnabled(n)&&document.queryCommandState(n)){e(this).addClass(u.activeToolbarClass)}else{e(this).removeClass(u.activeToolbarClass)}},u.keypressTimeout))}},l=function(e,t){var n=e.split(" "),r=n.shift(),i=n.join(" ")+(t||"");document.execCommand(r,0,i);f()},c=function(t){e.each(t,function(e,t){i.keydown(e,function(e){if(i.attr("contenteditable")&&i.is(":visible")){e.preventDefault();e.stopPropagation();l(t)}}).keyup(e,function(e){if(i.attr("contenteditable")&&i.is(":visible")){e.preventDefault();e.stopPropagation()}})})},h=function(){var e,t;if(window.getSelection){e=window.getSelection();if(e.getRangeAt&&e.rangeCount){t=e.getRangeAt(0)}}else if(document.selection){t=document.selection.createRange()}return t},p=function(){o=h()},d=function(){var e;if(window.getSelection||document.createRange){e=window.getSelection();if(o){try{e.removeAllRanges()}catch(t){document.body.createTextRange().select();document.selection.empty()}e.addRange(o)}}else if(document.selection&&o){o.select()}},v=function(t){i.focus();e.each(t,function(t,r){if(/^image\//.test(r.type)){e.when(n(r)).done(function(e){l("insertimage",e);i.trigger("image-inserted")}).fail(function(e){u.fileUploadError("file-reader",e)})}else{u.fileUploadError("unsupported-file-type",r.type)}})},m=function(e,t){d();if(document.queryCommandSupported("hiliteColor")){document.execCommand("hiliteColor",0,t||"transparent")}p();e.data(u.selectionMarker,t)},g=function(t,n){t.find(a,s).click(function(){d();i.focus();l(e(this).data(n.commandRole));p()});t.find("[data-toggle=dropdown]").click(d);t.find("input[type=text][data-"+n.commandRole+"]").on("webkitspeechchange change",function(){var t=this.value;this.value="";d();if(t){i.focus();l(e(this).data(n.commandRole),t)}p()}).on("focus",function(){var t=e(this);if(!t.data(n.selectionMarker)){m(t,n.selectionColor);t.focus()}}).on("blur",function(){var t=e(this);if(t.data(n.selectionMarker)){m(t,false)}});t.find("input[type=file][data-"+n.commandRole+"]").change(function(){d();if(this.type==="file"&&this.files&&this.files.length>0){v(this.files)}p();this.value=""})},y=function(){i.on("dragenter dragover",false).on("drop",function(e){var t=e.originalEvent.dataTransfer;e.stopPropagation();e.preventDefault();if(t&&t.files&&t.files.length>0){v(t.files)}})};u=e.extend(true,{},e.fn.wysiwyg.defaults,r);a="a[data-"+u.commandRole+"],button[data-"+u.commandRole+"],input[type=button][data-"+u.commandRole+"]";c(u.hotKeys);if(u.dragAndDropImages){y()}g(e(u.toolbarSelector),u);i.attr("contenteditable",true).on("mouseup keyup mouseout",function(){p();f()});e(window).bind("touchend",function(e){var t=i.is(e.target)||i.has(e.target).length>0,n=h(),r=n&&n.startContainer===n.endContainer&&n.startOffset===n.endOffset;if(!r||t){p();f()}});return this};e.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",tab:"indent"},toolbarSelector:"[data-role=editor-toolbar]",commandRole:"edit",activeToolbarClass:"btn-info",selectionMarker:"edit-focus-marker",selectionColor:"darkgrey",dragAndDropImages:true,keypressTimeout:200,fileUploadError:function(e,t){console.log("File upload error",e,t)}}})(window.jQuery) \ No newline at end of file +(function(e){"use strict";var t=function(e,t){var n,r,i,s;var o=0;var u=function(){o=new Date;i=null;s=e.apply(n,r)};return function(){var a=new Date;var f=t-(a-o);n=this;r=arguments;if(f<=0){clearTimeout(i);i=null;o=a;s=e.apply(n,r)}else if(!i){i=setTimeout(u,f)}return s}};var n=function(t){var n=e.Deferred(),r=new FileReader;r.onload=function(e){n.resolve(e.target.result)};r.onerror=n.reject;r.onprogress=n.notify;r.readAsDataURL(t);return n.promise()};e.fn.cleanHtml=function(){var t=e(this).html();return t&&t.replace(/(
|\s|

<\/div>| )*$/,"")};e.fn.wysiwyg=function(r){var i=this,s=e(i).parent(),o,u,a,f=function(){if(u.activeToolbarClass){e(u.toolbarSelector,s).find(a).each(t(function(){var t=e(this).data(u.commandRole).split(" "),n=t[0];if(t.length>1&&document.queryCommandEnabled(n)&&document.queryCommandValue(n)==t[1]){e(this).addClass(u.activeToolbarClass)}else if(t.length===1&&document.queryCommandEnabled(n)&&document.queryCommandState(n)){e(this).addClass(u.activeToolbarClass)}else{e(this).removeClass(u.activeToolbarClass)}},u.keypressTimeout))}},l=function(e,t){var n=e.split(" "),r=n.shift(),i=n.join(" ")+(t||"");document.execCommand(r,0,i);f()},c=function(t){e.each(t,function(e,t){i.keydown(e,function(e){if(i.attr("contenteditable")&&i.is(":visible")){e.preventDefault();e.stopPropagation();l(t)}}).keyup(e,function(e){if(i.attr("contenteditable")&&i.is(":visible")){e.preventDefault();e.stopPropagation()}})})},h=function(){var e,t;if(window.getSelection){e=window.getSelection();if(e.getRangeAt&&e.rangeCount){t=e.getRangeAt(0)}}else if(document.selection){t=document.selection.createRange()}return t},p=function(){o=h()},d=function(){var e;if(window.getSelection||document.createRange){e=window.getSelection();if(o){try{e.removeAllRanges()}catch(t){document.body.createTextRange().select();document.selection.empty()}e.addRange(o)}}else if(document.selection&&o){o.select()}},v=function(t){i.focus();e.each(t,function(t,r){if(/^image\//.test(r.type)){e.when(n(r)).done(function(e){l("insertimage",e);i.trigger("image-inserted")}).fail(function(e){u.fileUploadError("file-reader",e)})}else{u.fileUploadError("unsupported-file-type",r.type)}})},m=function(e,t){d();if(document.queryCommandSupported("hiliteColor")){document.execCommand("hiliteColor",0,t||"transparent")}p();e.data(u.selectionMarker,t)},g=function(t,n){t.find(a,s).click(function(){d();i.focus();l(e(this).data(n.commandRole));p()});t.find("[data-toggle=dropdown]").click(d);t.find("input[type=text][data-"+n.commandRole+"]").on("webkitspeechchange change",function(){var t=this.value;this.value="";d();if(t){i.focus();l(e(this).data(n.commandRole),t)}p()}).on("focus",function(){var t=e(this);if(!t.data(n.selectionMarker)){m(t,n.selectionColor);t.focus()}}).on("blur",function(){var t=e(this);if(t.data(n.selectionMarker)){m(t,false)}});t.find("input[type=file][data-"+n.commandRole+"]").change(function(){d();if(this.type==="file"&&this.files&&this.files.length>0){v(this.files)}p();this.value=""})},y=function(){i.on("dragenter dragover",false).on("drop",function(e){var t=e.originalEvent.dataTransfer;e.stopPropagation();e.preventDefault();if(t&&t.files&&t.files.length>0){v(t.files)}})};u=e.extend(true,{},e.fn.wysiwyg.defaults,r);a="a[data-"+u.commandRole+"],button[data-"+u.commandRole+"],input[type=button][data-"+u.commandRole+"]";c(u.hotKeys);if(e(this).attr("placeholder")!=""){e(this).addClass("placeholderText");e(this).html(e(this).attr("placeholder"));e(this).bind("focus",function(t){if(e(this).attr("placeholder")!=""&&e(this).text()==e(this).attr("placeholder")){e(this).removeClass("placeholderText");e(this).html("")}});e(this).bind("blur",function(t){if(e(this).attr("placeholder")!=""&&e(this).text()==""){e(this).addClass("placeholderText");e(this).html(e(this).attr("placeholder"))}})}if(u.dragAndDropImages){y()}g(e(u.toolbarSelector),u);i.attr("contenteditable",true).on("mouseup keyup mouseout",function(){p();f()});e(window).bind("touchend",function(e){var t=i.is(e.target)||i.has(e.target).length>0,n=h(),r=n&&n.startContainer===n.endContainer&&n.startOffset===n.endOffset;if(!r||t){p();f()}});return this};e.fn.wysiwyg.defaults={hotKeys:{"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]",commandRole:"edit",activeToolbarClass:"btn-info",selectionMarker:"edit-focus-marker",selectionColor:"darkgrey",dragAndDropImages:true,keypressTimeout:200,fileUploadError:function(e,t){console.log("File upload error",e,t)}}})(window.jQuery) \ No newline at end of file diff --git a/index.css b/index.css index 048e2e5..f1f6663 100644 --- 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; } \ No newline at end of file diff --git a/index.html b/index.html index ab1dfaf..394d094 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,7 @@

id="voiceBtn" x-webkit-speech="" />

-
Go ahead…
+