Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I add placeholder text when the editor is empty

Tags:

ace-editor

How can I add placeholder text when the editor is empty?

It should go away as soon as typing starts.

like image 291
Kevin Laslo Avatar asked Nov 02 '14 03:11

Kevin Laslo


1 Answers

You can add a listener for the input event and add a div with text when needed like this:

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>
like image 99
a user Avatar answered Oct 03 '22 11:10

a user