summernote: Placeholder doesn't work

I came here because i have been trying all ways to make the placeholder show over the past 2 days.

If your placeholder is not showing, it is CRUCIAL to ensure your summer note div looks like this

<div id="summernote"></div>

NOT THIS

<div id="summernote"> </div>

ALSO NOT THIS

<div id="summernote">

</div>

Any space between the div will prevent placeholder from showing, and for Firefox, it cause your cursor to start off position too.

on summernote v0.8.1

I am using the current version of Chrome v8 of summernote and the placeholder option still does not work.

When summernote gets initialized, the contents get initialized to <p><br></p>.

Yes, I see that; however I believe that’s a bit of a gotcha. Also, clicking into the editor and hitting backspace to remove the initial paragraph still does not display the placeholder. When I look in the DOM there is in fact a placeholder element of class=“note-placeholder”; however it never shows up.

This was my fix…

var elem = $(".summernote").summernote({
    placeholder: "Enter Text Here...",
    callbacks: {
        onInit: function () {
            var editor = elem.next(),
                placeholder = editor.find(".note-placeholder");

            function isEditorEmpty() {
                var code = elem.summernote("code");
                return code === "<p><br></p>" || code === "";
            }

            editor.on("focusin focusout", ".note-editable", function (e) {
                if (isEditorEmpty()) {
                    placeholder[e.type === "focusout" ? "show" : "hide"]();
                }
            });
        }
    }
});

Overall I really like this editor!

Placeholder with {airmode: true} does not disappear when starting to write. It gets mixed up with the text. Thanks @eric-mesaros for your workaround.

Just tried 0.7.0, but it doesn’t work correctly. Still places the placeholder as first editor text. It doesn’t remove the placeholder once you start typing