Atto Outliner Example

Outliner is a bit different from most of the other Atto components. It's not a widget; rather, it's a convenience function that can take raw text containing outline lists (using any arbitrary bullet characters and indentation you want), and convert it into the equivalent HTML list markup.

Both ordered (ol) and unordered (ul) lists are supported; by default, Outliner produces unordered lists, but if the container DOM node you provide includes a CSS class of "ordered", the output will follow suit.

For best results, the DOM node containing your raw text needs to preserve arbitrary whitespace; to satisfy cross-browser quirks, that essentially means using either pre or textarea.

List 1 (pre input, ordered):

    - Some task
    - Another task
      - here's a subtask
      - and another
        - and this one has a sub-sub task
      - this one doesn't
      - last subtask
        - sub-subtask A
        - sub-subtask B
    - Top-level task III (no subtasks)

List 2 (textarea input, unordered):