Placeholder doesn't work

When summernote gets initialized, the contents get initialized to <p><br></p>. The div is therefore not empty and placeholder doesn’t get shown. Am I missing something here?

[daveteu]

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

[eric-mesaros]

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!