This repository has been archived by the owner. It is now read-only.
A tree view plugin for draft.js
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
.eslintrc.json
.gitattributes
.gitignore
LICENSE
README.md
bower.json
draft-treeview.js
gulpfile.js
main.css
package.json

README.md

draft-treeview

draft-treeview is a plugin for draft.js that renders document trees in the DOM. Mainly meant for development.

draft-treeview is licensed under the terms of the MIT License.

Installation

Prebuilt distributions can be found on the releases page.

You can also use Bower or npm:

# Install via Bower
bower install draft-treeview

# Install via npm
npm install draft-treeview

Getting Started

Include the plugin after draft.js in your html file:

<head>
  ...
  <script src="draft.js/dist/draft.min.js"></script>

  <link rel="stylesheet" href="draft-treeview/main.css">
  <script src="draft-treeview/dist/draft-treeview.min.js"></script>
</head>
<body>
  <div id="body" style="width: 100%; height: 100%"></div>
</body>

Write a new script and include it after your html content:

// Create a new draft document and add a group to it
var doc = draft('my_document');
var group = doc.group();

// Add some shapes to the group
var rect = group.rect(200, 150).fill('#18f');
var circle = group.circle(50).fill('#f1c');

// Use the draft-treeview plugin to render a tree
var body = document.getElementById('body');
body.appendChild(group.tree());