title: Insert HTML To Cursor Location To Ace Editor
body: <p>I'm not to insert HTML into ace editor via link onclick with jquery. So far as I have been successful, even when trying this script:</p>
  
  <p>Javascript:</p>
  
  <pre><code>function insertAtCaret(areaId,text) {
      var txtarea = document.getElementById(areaId);
      var scrollPos = txtarea.scrollTop;
      var strPos = 0;
      var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
          "ff" : (document.selection ? "ie" : false ) );
      if (br == "ie") { 
          txtarea.focus();
          var range = document.selection.createRange();
          range.moveStart ('character', -txtarea.value.length);
          strPos = range.text.length;
      }
      else if (br == "ff") strPos = txtarea.selectionStart;
  
      var front = (txtarea.value).substring(0,strPos);  
      var back = (txtarea.value).substring(strPos,txtarea.value.length); 
      txtarea.value=front+text+back;
      strPos = strPos + text.length;
      if (br == "ie") { 
          txtarea.focus();
          var range = document.selection.createRange();
          range.moveStart ('character', -txtarea.value.length);
          range.moveStart ('character', strPos);
          range.moveEnd ('character', 0);
          range.select();
      }
      else if (br == "ff") {
          txtarea.selectionStart = strPos;
          txtarea.selectionEnd = strPos;
          txtarea.focus();
      }
      txtarea.scrollTop = scrollPos;
  }
  </code></pre>
  
  <p>HTML Link: </p>
  
  <pre><code>&lt;a href="#" onclick="insertAtCaret('ace_text-input','&lt;h1&gt;&lt;/h1&gt;');return false;"&gt;Click Here to Insert&lt;/a&gt;
  </code></pre>
  
  <p>Trying to achieve the effect similar to a WYSIWYG editor, only raw HTML is shown in the editor.</p>