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)


source to share

1 answer

You can manually add / remove a placeholder using nicEditor events.

Submit when editor gets focus (IE someone clicks on it).

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>"){

    // onFocus - Remove the placeholder
    editor.addEvent('focus', function() 
        if (editorInstance.getContent() == $placeholder){

    // onBlur - Re-add the placeholder
    editor.addEvent('blur', function() 
        var newText = editorInstance.getContent();
        if(newText == "" || newText == "<br>") {


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.



All Articles