HTML plaintext editor: how to enrich with "intelligent section headings"?

Question

I'm trying to create a (plain text) editor in a HTML page.

I want the user to be able to create section and subsection headings anywhere inside the editor. These titles have pre-defined css and smart functions such as ability to control section expand/collapse or drag&drop section move.

Thus far, I've created a tree-like structures with groups of section headings, followed by textareas. Each textarea holds the text of the above (sub-)section. Therefore, there are many textareas..

<div id="tree">
    <!-- tree root -->
    <div class="layoutitem"> <!-- a layoutitem groups an item (=tree or leaf) and some tools -->
      <div class="itemgroup">
        <div class="title">
          [<span class="data">My Document Title</span>]
          <a>title functions:</a>
          <a href="#" class="someTool">tools here</a>
        </div>
          <!-- this is a tree itemgroup -->
        <div class="tree">
          <!-- tree root -->
          <div class="layoutitem"> <!-- a layoutitem groups an item (=tree or leaf) and some    tools -->
            <div class="itemgroup">
              <div class="title">
                <span class="titledata">Summary</span>
                <a>title functions:</a>
                <a href="#" class="someTool">tools here</a>
              </div>
               <!-- this is a leaf with a text value -->
              <div class="text">
                <div>
                  <textarea class="textdata">here is some text.</textarea>
                </div>
                <div>
                  <a href="#" class="someTool">tools here</a>
                </div>
              </div>
            </div>
...

Enriching this with JS gives me the functionality I need,

EXCEPT: I can't figure out how to do it such that the user can select text across multiple textareas. This is really important, because like in a "normal" editor, pieces of text should be selectable across section title boundaries.

I'm out of ideas.

• Is there a way to make my collection of headings and textareas selectable across the board?
• Or, am I not seeing the straightforward option here? Should I better do it with a JS based editor and add those sections as "special floating elements" somehow? How difficult would this be?

I'm fine if the solution doesn't work on "older" browsers, requires a framework like jquery or other.. I'm just hoping for any pointers that lead me into a good direction!