Placeholder not working in NicEdit
I am using NicEdit Inline WYSIWYG and am trying to figure out how to make it work.
I created a div with a placeholder attribute, but when NicEdit activates it, show an empty textbox with no placeholder.
Maybe there is a way to make it work. As I understand it, it writes text directly to the div.
In code it looks like. (I am commenting the non display for textarea) http://i.imgur.com/D384B5C.png
source to share
You can manually add / remove a placeholder using nicEditor events. focus
Submit when editor gets focus (IE someone clicks on it). blur
Dispatched when an editor instance loses focus.
var editor = new nicEditor();
var $placeholder = '<p>Click here to add content...</p>';
$('[id^="textArea"]').each(function() {
var textAreaId = $(this).attr("id");
editor.addInstance( textAreaId );
var editorInstance = editor.instanceById(textAreaId)
// Add the initial Placeholder
var content = editorInstance.getContent();
if(content == "" || content == "<br>"){
editor.instanceById(textAreaId).setContent($placeholder);
}
// onFocus - Remove the placeholder
editor.addEvent('focus', function()
{
if (editorInstance.getContent() == $placeholder){
editor.instanceById(textAreaId).setContent("<br>");
}
});
// onBlur - Re-add the placeholder
editor.addEvent('blur', function()
{
var newText = editorInstance.getContent();
if(newText == "" || newText == "<br>") {
editor.instanceById(textAreaId).setContent($placeholder);
}
});
});
Check initially if there is no content or there is one <br>
(this is the nicEditor placeholder). If so, replace with your own placeholder.
Then, checking for focus on the placeholder and changing the content back to "<br>"
.
Then, when blurring, check if the content is left and replace it blank.
source to share