Firepad text editor - text area not showing
<p>I'm following the instruction from <a href="https://github.com/firebase/firepad/blob/master/examples/richtext-simple.html" rel="nofollow noreferrer">here</a> to create a firepad editor. </p>

<p>my code is:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    function init() {
      var firepadRef = getExampleRef();
      var codeMirror = CodeMirror(document.getElementById('firepad-container'), {
        lineWrapping: true
      });
      var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
        richTextToolbar: true,
        richTextShortcuts: true
      });
      firepad.on('ready', function() {
        if (firepad.isHistoryEmpty()) {
          firepad.setHtml('&lt;span style="font-size: 24px;"&gt;Rich-text editing with &lt;span style="color: red"&gt;Firepad!&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;Collaborative-editing made easy.\n');
        }
      });
    }

    function getExampleRef() {
      var ref = new Firebase('https://firepad.firebaseio-demo.com');
      var hash = window.location.hash.replace(/#/g, '');
      if (hash) {
        ref = ref.child(hash);
      } else {
        ref = ref.push();
        window.location = window.location + '#' + ref.key(); // add it as a hash to the URL.
      }
      return ref;
    }
    init();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"&gt;&lt;/script&gt;

  &lt;!-- CodeMirror --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css" /&gt;

  &lt;!-- Firepad --&gt;
  &lt;link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.2.0/firepad.css" /&gt;
  &lt;script src="https://cdn.firebase.com/libs/firepad/1.2.0/firepad.min.js"&gt;&lt;/script&gt;

&lt;div class="page-content"&gt;
  &lt;div id="firepad-container"&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The problem is i got the button for option as shown in the figure.</p>

<p><a href="https://i.stack.imgur.com/i6hn4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i6hn4.png" alt="enter image description here"></a></p>

<p>but the text field is not coming, even i mention the correct <code>id</code>. The original will be like this.</p>

<p><a href="https://i.stack.imgur.com/PmC8n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PmC8n.png" alt="enter image description here"></a></p>

<p>what i'm doing wrong. is there any other text editor available to work with?</p>