laobubu / HyperMD

A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
MIT License
1.47k stars 137 forks source link

Support Markdown rendering on placeholder. #55

Closed hifall closed 5 years ago

hifall commented 5 years ago

If I use CM's placeholder addon to display a placeholder inside HyperMD, it appears as raw Markdown, like "# This title rocks!". However, it would be nicer to have HyperMD render it.

Can we support rendering placeholder as well?

Thanks!

laobubu commented 5 years ago

Hello. The placeholder in CodeMirror is a pure DOM Text node, which is created and managed by placeholder addon rather than CodeMirror or HyperMD. It's impossible to highlight or add styles to it, unless you use another placeholder addon.

If you want to use other cool stuff, instead of plain text, as the placeholder, you can modify the original placeholder addon, like this:

-if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
+if (typeof placeHolder == "string") {
+   var placeHolderHTML = placeHolder;
+   placeHolder = document.createElement("div");
+   placeHolder.innerHTML = placeHolderHTML;
+}

Use this modified placeholder addon, and the editor option placeholder will accept HTML like this: <b>Hello</b> <span style="color:red">World</span>

hifall commented 5 years ago

Thanks a lot for your timely reply. Happy new year!