How can I add placeholder text when editor is empty
1 answer
You can add a listener for the event input
and add a div with text when needed:
var editor = ace.edit("editor", {
theme: "ace/theme/chaos"
})
function update() {
var shouldShow = !editor.session.getValue().length;
var node = editor.renderer.emptyMessageNode;
if (!shouldShow && node) {
editor.renderer.scroller.removeChild(editor.renderer.emptyMessageNode);
editor.renderer.emptyMessageNode = null;
} else if (shouldShow && !node) {
node = editor.renderer.emptyMessageNode = document.createElement("div");
node.textContent = "placeholder"
node.className = "ace_emptyMessage"
node.style.padding = "0 9px"
node.style.position = "absolute"
node.style.zIndex = 9
node.style.opacity = 0.5
editor.renderer.scroller.appendChild(node);
}
}
editor.on("input", update);
setTimeout(update, 100);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<style>
#editor { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
</style>
</head>
<body>
<div id="editor"></div>
</body>
</html>
+16
source to share