Skip to content

Commit

Permalink
integrated upload/embed server directing into app
Browse files Browse the repository at this point in the history
  • Loading branch information
gpoitch committed Sep 12, 2014
1 parent dd6614d commit 8eeeb50
Show file tree
Hide file tree
Showing 12 changed files with 190 additions and 3,888 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,5 @@ bower_components
.DS_Store

# Builds
dist/
export.sh
31 changes: 15 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,24 @@
A modern, minimalist WYSIWYG editor. (**[Demo](https://rawgit.com/ContentKit/content-kit-editor/master/demo/index.html)**)

![screenshot]
(https://rawgit.com/ContentKit/content-kit-editor/master/demo/screenshot.png)
(https://rawgit.com/ContentKit/content-kit-editor/master/screenshot.png)

*ContentKit-Editor is under active development*
*ContentKit-Editor is currently under heavy active development. API subject to change.*

---

## About ContentKit
## Building
1. Install dependencies: `npm install`
2. Build: `gulp build`

ContentKit is a suite of tools used to create, parse, and render user generated content. ContentKit's core centers around parsing content into its own simple JSON format. By storing a set of simple data, you are no longer bound to the originally generated HTML. By separating the data from the presentation, you can render the same content in various different formats, layouts, and on various different platforms.
## Playing
1. Start the server: `npm start`
2. Navigate to the demo at (http://localhost:5000)
```
#### Use-case example:
You are developing a blogging platform. You allow authors to create posts using a ContentKit's WYSIWYG editor. ContentKit parses the post into its JSON format. Readers then visit the blog on the web and ContentKit renders the post's JSON data back to HTML for display on the page. Next, you decide to build mobile apps for your blogging platform. ContentKit renders the content natively on iOS and Android. Later, your power users want to use Markdown or HTML code to write their blogs posts. ContentKit can parse it while also cleaning up tags you may not want to allow. Later, you redesign the blog. Your original content is intact and is easily able to be rendered into your ambitious new layout.
## Testing
`gulp test`
#### Current Tools:
- An HTML parser/renderer to transform content to and from JSON/HTML [(ContentKit-Compiler)](https://github.com/ContentKit/content-kit-compiler)
- A simple, modern WYSIWYG editor to generate content on the web [(ContentKit-Editor)](https://github.com/ContentKit/content-kit-editor)
## Dev tips
- `gulp watch` to auto build/test as you save files
- Running the server is only necessary if you want image uploads and embeds. You can just open demo/index.html
#### Future Tools:
- A HTML renderer for Ruby, to pre-render HTML server-side
- An iOS renderer to display content natively using `UILabel`/`NSAttributedString` [(reference)](https://developer.apple.com/library/mac/documentation/cocoa/reference/foundation/classes/NSAttributedString_Class/Reference/Reference.html)
- An Android renderer for to display content natively using `TextField`/`Spannable` [(reference)](http://developer.android.com/reference/android/text/Spannable.html)
- A Markdown parser/renderer to transform content to and from JSON/Markdown
---
15 changes: 4 additions & 11 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>ContentKit Editor</title>

<!-- Include ContentKit Editor CSS -->
<link href="../dist/content-kit-editor.css" rel="stylesheet">
<link href="content-kit-editor.css" rel="stylesheet">

<!-- CSS just for the demo page -->
<link href="demo.css" rel="stylesheet">
Expand Down Expand Up @@ -70,20 +70,13 @@ <h3>Keyboard shortcuts:</h3>
</div>

<!-- Include ContentKit JS -->
<script src="../ext/loader.js"></script>
<script src="../dist/content-kit-editor.js"></script>
<script src="loader.js"></script>
<script src="content-kit-editor.js"></script>
<script>window.ContentKit = require('content-kit')['default'];</script>

<script>
// Initialize a new Editor
var editor = new ContentKit.Editor('.editor', {
imageServiceUrl: 'http://localhost:5000/upload',
embedServiceUrl: 'http://localhost:5000/embed'
//embedCommands: [
// new ImageCommand({ serviceUrl: 'http://localhost:5000/images' }),
// new OEmbedCommand({ serviceUrl: 'http://localhost:5000/embed' })
//]
});
var editor = new ContentKit.Editor('.editor');
</script>

<!-- JS just for the demo page -->
Expand Down
Loading

0 comments on commit 8eeeb50

Please sign in to comment.