search

mindmup / bootstrap-wysiwyg

Tiny bootstrap-compatible WISWYG rich text editor
MIT License
5.56k stars 841 forks source link

placeholder text #143

Open KaitaniLabs opened 10 years ago

KaitaniLabs commented 10 years ago

Just wondering if there is anyway to hook in HTML5's placeholder text system with this plugin. Would be a nice feature.

steveathon commented 10 years ago

I've added support for this and checked it - seems to work pretty ok. Not suggesting it's the best way to approach it, but it works. Code is in the above commit.

KaitaniLabs commented 10 years ago

@steveathon looks good. I can't think of a better way to do it other than a bit of JS. Thanks

steveathon commented 10 years ago

The examples all have the placeholder in there now - seems to work on all the browsers I've tested on so far. Let me know if it fails and I'll fiddle with it.

blue2blond commented 7 years ago

Placeholder-solution didn't work for me as I had multiple editors on a page and the placeholder was replacing the initial value as well as saving the placeholder after submit. I changed it to the following, user CSS before pseudo-class to show the placeholder and toggling the visibility using JS.

JS: if ( editor.attr('placeholder') != '' ) { if ( editor.text() == '' ) editor.addClass('show-placeholder'); editor.bind('focus',function(e) { editor.removeClass('show-placeholder'); }).bind('blur',function(e) { if ( editor.text() == '' ) editor.addClass('show-placeholder'); }) }

CSS: .editor[placeholder]:before { content: attr(placeholder); color: #777; position: absolute; display: none; } .show-placeholder[placeholder]:before { display: block; }