How to make WysiHat use the element it's initialized with for editing?

Question

JavaScript

Have a nice day.
I'm trying to implement the WysiHat editor into the project github.com/swilliams/jq-wysihat
When you pass an element to it for initialization, it simply hides it and creates the editor in an empty div.
If I want to edit h1 with all its styles and content, then I don't want to end up with an empty div at all.
Is it possible to somehow slip the necessary element with content to the editor?
JS:

function onDOMReady(){
    var editableElements = $('.editable'),
        index = editableElements.length;

    while(index--){
      var element = editableElements[index];
      var editor = WysiHat.Editor.attach($(element));
    }

  }

  $(document).ready(onDOMReady);

HTML

<article>
  <h1 class="editable">Some title</h1>
  <div class="editable">
    <p>Some content</p>
  </div>
</article>

And another question:
I had to manually add all the js in the wysihat folder in order for the script to work. But I feel like I'm doing something wrong. Shouldn't it connect them? What should I have done to make it work as intended?

<script src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>  
<script src="wysihat.js"></script>
<script src="wysihat/dom/ierange.js"></script>
<script src="wysihat/dom/range.js"></script>
<script src="wysihat/dom/selection.js"></script>
<script src="wysihat/dom/bookmark.js"></script>

<script src="wysihat/element/sanitize_contents.js"></script>

<script src="wysihat/events/field_change.js"></script>
<script src="wysihat/events/frame_loaded.js"></script>
<script src="wysihat/events/selection_change.js"></script>

<script src="wysihat/toolbar.js"></script>
<script src="wysihat/features.js"></script>
<script src="wysihat/editor.js"></script>
<script src="wysihat/commands.js"></script>
<script src="wysihat/formatting.js"></script>
<script src="editor.js"></script>

Answer 1

Sat down and rewrote the insides. They expect the replacement to be a textarea for that block.