││ -││ You will never guess what happens ││ -││ when these cats take a bath ││ -││
││ -│└────────────────────────────────────────────────────────────────────────────┘│ -│┌────────────────────────────────────────────────────────────────────────────┐│ -││ ┌──────────────┐ ││ -││ │ EmbedModel │ ││ -││ └──────────────┘ ││ -││
││
-││ ││
-│└────────────────────────────────────────────────────────────────────────────┘│
-│┌────────────────────────────────────────────────────────────────────────────┐│
-││ ┌────────────────────────┐ ││
-││ │ BlockModel (type CARD) │ ││
-││ └────────────────────────┘ ││
-││ node.innerHTML = 'Cards can change content at render time. For example, ││
-││ use an Ember component'; ││
-│└────────────────────────────────────────────────────────────────────────────┘│
-└──────────────────────────────────────────────────────────────────────────────┘
-```
+Content-Kit saves posts to
+**[Mobiledoc](https://github.com/bustlelabs/content-kit-editor/blob/master/MOBILEDOC.md)**.
### Usage
-ContentKit is attached to a DOM node when the `Editor` factory is instantiated.
+The `ContentKit.Editor` class is invoked with an element to render into and
+optionally a Mobiledoc to load. For example:
```js
-var editor = new ContentKit.Editor(this.element, options);
+var simpleMobiledoc = [[], [
+ [1, "p", [
+ [[], 0, "Welcome to Content-Kit"]
+ ]]
+];
+var element = $('#editor')[0];
+var options = { mobiledoc: simpleMobiledoc };
+var editor = new ContentKit.Editor(element, options);
```
`options` is an object which may include the following properties:
@@ -63,59 +43,45 @@ var editor = new ContentKit.Editor(this.element, options);
* `spellcheck` - a boolean option enabling spellcheck. Default is true.
* `autofocus` - a boolean option for grabbing input focus when an editor is
rendered.
-* `serverHost` - a URL prefix for embed and image API request. **[FIXME Remove]**
* `cards` - an object describing available cards.
-### Public Editor API
-
-* `editor.loadPost(post)` - render the editor with a post. **[FIXME Implement]**
-* `editor.serializePost()` - serialize the current post for persistence. **[FIXME Implement]**
-
-### Deploy the demo website
+### Editor API
-The demo website is hosted at github pages.
-To publish a new version do:
-
- * `npm run build-website`. This builds the website into `website/` and commits it
- * `npm run deploy-website`. Pushes the `website/` subtree to the `gh-pages` branch at github
-
-Visit [http://bustlelabs.github.io/content-kit-editor/demo](http://bustlelabs.github.io/content-kit-editor/demo).
+* `editor.serialize()` - serialize the current post for persistence. Returns
+ Mobiledoc.
+* `editor.destroy()` - teardown the editor event listeners, free memory etc.
### Contributing
-Running ContentKit tests and demo server locally requires the following dependencies:
+Fork the repo, write a test, make a change, open a PR.
-* [node.js](http://nodejs.org/) ([install package](http://nodejs.org/download/)) or `brew install node`
-* `broccoli`, via `npm install -g broccoli-cli`
-
-### Tests
+#### Tests
Install npm and bower:
- * `bower i i`
- * `npm i`
+ * [Node.js](http://nodejs.org/) is required
+ * `npm install -g npm && npm install -g bower`
+ * `broccoli`, via `npm install -g broccoli-cli`
+ * `bower install`
+ * `npm install`
Run tests via the built-in broccoli server:
- * `npm run serve`
+ * `broccoli serve`
* `open http://localhost:4200/tests`
-Or run tests via testem:
+Or run headless tests via testem:
* `npm test`
-To view the demo:
+To quickly view the demo:
* `broccoli serve`
* open http://localhost:4200/demo
- * (Note that image uploads and embeds are not currently working)
+ * Image uploads and embeds are not supported running in this manner.
-#### To Do
-
-Bring back image uploads and embed. Notes below:
-
-For uploads and embeds to work, you will have to configure AWS and
-Embedly keys as environment variables:
+To view the full demo with uploads and embed, you will have to configure AWS
+and Embedly keys as environment variables:
```bash
export AWS_ACCESS_KEY_ID=XXXXXX
@@ -123,7 +89,7 @@ export AWS_SECRET_ACCESS_KEY=XXXXXX
export EMBEDLY_KEY=XXXXXX
```
-Also, set the `bucketName` in `server/config.json` with the name of your AWS
+Also set the `bucketName` in `server/config.json` with the name of your AWS
S3 bucket for uploading files.
Then to boot the server:
@@ -132,4 +98,15 @@ Then to boot the server:
node server/index.js
```
-And visit http://localhost:5000/dist/demo/index.html
+And visit [localhost:5000/dist/demo/index.html](http://localhost:5000/dist/demo/index.html)
+
+#### Re-deploy the demo
+
+The demo website is hosted at github pages. To publish a new version:
+
+ * `npm run build-website` - This builds the website into `website/` and commits it
+ * `npm run deploy-website` - Pushes the `website/` subtree to the `gh-pages` branch at github
+
+Visit [bustlelabs.github.io/content-kit-editor/demo](http://bustlelabs.github.io/content-kit-editor/demo).
+
+*Initial development of Content-Kit was generously funded by [Bustle Labs](http://www.bustle.com/labs). Bustle Labs is the tech team behind the editorial staff at [Bustle](http://www.bustle.com), a fantastic and successful feminist and women’s interest site based in NYC.*