How can I add placeholder text when the editor is empty

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>

You can use placeholder: "Your Placeholder Text" option to put placeholder in your Ace Editor.

HTML Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-cobalt.min.js"></script>

<div id="editor"></div>

CSS Code:

#editor { 
  position: relative;
  min-height: 100px;
}

JavaScript Code

var editor = ace.edit("editor");
editor.setOptions({
  mode: 'ace/mode/css',
  theme: 'ace/theme/cobalt',
  placeholder: "Enter CSS Code",
})

Demo On CodePen

Tags:

Ace Editor

Recent Posts