

Create - A new kind of web editing interface - spaetzel
http://createjs.org/

======
lukeholder
Please check out mercury editor. Much nicer and active development.

<http://jejacks0n.github.com/mercury/>

other notable and far more advanced (over create):

Aloha Editor <http://www.aloha-editor.org/>

~~~
Turing_Machine
Thanks for all of these (and to the original poster, too). As it happens, I
just started looking at editors for a mobile application.

Some instant thoughts:

Create seems to work fine on the iPad. Mercury sort of works, but kept
switching out of edit mode for some reason. Aloha didn't seem to work at all.

As with some of the other commenters, I'm not wild about having the editor
tied to a Rails backend (I didn't explore what kind of backend requirements
Create has, though they seem to imply on the front page that it's at least
somewhat portable).

The only other editor I've found that appears to work on the iPad out of the
box is CKEditor. My old standby, TinyMCE, is supposed to support it, but I
didn't have much luck (it may be that this isn't in the release yet -- I'll go
back and explore the source tree later).

Granted, Apple has only had proper support for contenteditble on iOS for a
couple of months, but I urge editor teams to _please_ try to make their stuff
work on the iPad. There's a huge unmet demand for that, and there's a first-
mover advantage here. :-)

If they can do something clever with the UI to make the editor also usable on
a device with a smaller screen (e.g. the iPhone), they'll really be cooking
with gas.

~~~
bergie
Create only requires two things:

* Your web system has to publish content with RDFa annotations * You need to have some API you can connect to Backbone.sync

...and even the latter isn't so bad, as Backbone.sync can be overridden in
your local implementation. For example, we use the same stuff with Socket.IO
instead of REST:
[https://github.com/IKS/ViePalsu/blob/master/js/contentmanage...](https://github.com/IKS/ViePalsu/blob/master/js/contentmanager.js#L114)

------
asolove
Inline editing is quite nice. I wonder if I am missing something about this:
it seems to only offer italic/bold/underline/strike-through and no structural
options?

Plug-and-play inline editing for various CMSs would be nice. If this had more
features, I could see using it with a structured, lightweight CMS like Perch
[1] to edit structured content inline with the published pages.

[1] <http://grabaperch.com/>

~~~
veb
Does it _need_ structural options?

At work, I'm supposed to change a lot of our existing websites over to
"Wordpress CMS" because it'll make it easier for the admin staff to modify the
website, for updates and such.

The problem is, they need to locate the login then they need to remember their
account info, then they need to find the right page they want to modify, then
they have to do a bunch of other clicks to get what they want.

Unfortunately, this tends to go woosh right over a lot of heads, and therefore
stuff simply doesn't get updated - they send the 'update' via email to IT.

The cool thing about this createjs thing, is that you design the website, you
put up the content and you have a simple login form. Everything is editable by
clicking and typing directly from the site you're looking at.

I'm sure it'll help in situations like mine, for sure.

~~~
andyking
I have similar issues - our website is in WordPress and despite the ease-of-
use of this particular package, a lot of people just don't seem to get it.

Some staff and volunteers pick it up quite easily, if they haven't already
seen or used it before, but several people just don't do it, and instead I get
a phone call or email saying "can you put this on the website?".

Incidentally, do you find a lot of people simply can't be arsed? One of our
presenters (we're a radio station) is tech-savvy, has an iPhone, a Macbook,
uses Facebook daily and so on. She's also one of the worst offenders for
emailing me stuff to put on the website. I wonder if some people just plead
ignorance to avoid having to do it themselves...

Anyway, back to the topic at hand, it would be one less excuse if we went to a
solution like this - where it's simply a case of navigating to the page,
clicking a button and editing it.

~~~
bobfunk
We're also aiming to solve this with Webpop (<http://www.webpop.com>).

we dont do inline editing, but on-site editing where you navigate to the page
you want to update and click edit, we then highlight all dynamic content on
the page and bring up the relevant form when clicked.

In our first prototypes we were playing around with inline editing, but ended
up concluding that it causes more problems than it solves when you're dealing
with a real website with dynamic content.

One example: you have a news section, and on the homepage the last 3 stories
are pulled in, but with the body text truncated to 100 characters since more
would break the design. Inline editing here will be problematic. There are
plenty of other cases (just think text-overflow: ellipsis;) and there's also
the contextual problem of how to communicate to the end user that he is
editing structured content that might be reused in different places on the
site, with an interface that pretends to be completely WYSIWYG.

We think our way of on-site editing is the best compromise between making
updates easy and making the conceptual model clear.

~~~
ishi
The text in the black area of your homepage is ridiculously dark. Everything
looks "disabled", including the top navigation bar.

------
arnorhs
There is precisely nothing new about this idea, even though this code might be
fresher.

It would be interesting to hear how this thing addresses some of the
shortcomings of the other inline editing components out there and how this is
better.

~~~
bergie
It is certainly not a new idea, even we did our first implementation years
ago. The main new thing here is that Create is completely backend-agnostic,
only using RDFa to communicate content structure from server to editing
interface, and Backbone.sync to communicate changes back to the server.

But apart from that, what sort of shortcomings are you particularly concerned
about?

~~~
jsilence
Would be nice to have a list of RDFa compatible backends.

~~~
bergie
Backends don't need to be RDFa-compatible in any other sense than being able
to contain the RDFa attributes in their HTML templates.

~~~
jsilence
Rewording: Would be nice to have a list of CMSes or content stores which
already provide plugins, themes, gizmos to insert RDFa attributes into the
content.

------
JairusKhan
If you make this into a Wordpress plugin it would be on every install in a
week.

~~~
8ig8
Here is a plugin for front end editing using Aloha:
<http://scribu.net/wordpress/front-end-editor>

~~~
bergie
Create can actually use Aloha if you just tell it to.

jQuery('something').create({editor: 'aloha'});

------
secure
It's obviously in its early stages, but I like the idea. Seems obvious that
editing websites _in the website itself_ is much more straight-forward than
using some kind of backend (for small-scale CMS).

~~~
dools
I've already posted this link in reply to others' comments but I'd love to
hear your feedback on our fledgling project "designer platform" which allows
you to deploy structured editing interfaces from your HTML:
[http://www.decalcms.com/page/Take_the_Decal_4_minute_challen...](http://www.decalcms.com/page/Take_the_Decal_4_minute_challenge)

~~~
secure
It requires Firefox (I don't want to go back to FF), but I would consider
starting it just for your site.

It requires signing up. I'm out. I have more than enough accounts already. If
you want me to have a look at something, make it easily accessible. Sorry. :)

~~~
dools
Thanks for taking a look anyway! If you'd like to email
team@workingsoftware.com.au I'll configure a demo for you with a dummy email
that doesn't require you to create an account.

------
lsmith77
Scenario: A single backend, providing content for an ever growing set of front
ends (desktop, tablet, mobile in various permutations). Content editors need
to ensure things look good in all output formats.

Solution: Content editors get a button to preview draft content in all front
ends. This opens up a tab for each front end. Front end uses the backend
session to get permission to retrieve the draft content and loads up create.js
during the rendering.

Using CORS the frontend is configured to send back any changes to the backend
directly. Title width optimization can be done inline, all related pages can
be updated right away.

All the front ends need to be able to do is identify an admin and to be able
to pull the draft content and then include create.js. That is it. Booom, the
front end supports inline editing. All your front ends support inline editing
this way!

------
skid
I was working on something similar to this (sorry, no showcase). There's a
jQuery extension included for working with contentEditable text selections and
formatting text with tags. I think it does a better job with overlapping tags
and it merges anchor tags with same hrefs correctly. It does not work on IE <
9 (I think IE9 supports the gecko contentEditable api). You might find the
code useful .

Link to jQuery extensions: <https://github.com/skid/wimp/blob/master/js/jq-
extensions.js>

------
joshontheweb
Similar project: <http://etchjs.com> \- An inline content editor

*disclosure: I released this project

~~~
bergie
Nice! Seems indeed very similar. Linked to the Create README:
[https://github.com/bergie/create/commit/75eb91919423471eb6e7...](https://github.com/bergie/create/commit/75eb91919423471eb6e7908f3c176c30f13d9eed)

Maybe Etch you also run with VIE's Backbone models? <http://viejs.org/>

Then you could basically swap between Etch and Create with the same mark-up
and server-side implementation.

------
jsilence
To me the novelty appears to be the backend agnostic RDFa communication with
the content server rather than the inline editing.

Would be nice if more CMS backends would support this, followed by more and
more editing frontends and tools. Thereby everyone could pick the component of
their choice. Even different editing frontends for different unsers on the
same system would be possible.

~~~
bergie
That is exactly the plan:
<http://bergie.iki.fi/blog/decoupling_content_management/>

But first you have to have one nice editing interface as a carrot so CMSs
start supporting the needed features.

------
gosub
One bug I've found: selecting more than a line and applying bold or italics is
not reversible. (Win7 x32, Chrome 15.0.874.121)

~~~
jamesgeck0
There's another bug where if you click edit repeatedly in rapid succession,
the green flash animation is queued and plays repeatedly.

I think this can be altered by calling stop() before animate()? But it's been
a bit since I worked with jQuery.

~~~
bergie
Yep, I've seen this bug. I'll look at it tomorrow.

<https://github.com/bergie/create/issues/13>

------
nvictor
many people already suggested that the idea is not novel. this implementation
doesn't add what i wish we had in a modern inline content editing framework:
structure.

wikis had it for a while now. [[newpage]] anyone? i am wondering how difficult
it would be to take wikis out of their textareas.

the other concern is naturally security.

~~~
dools
Yes - the problem of structure! That's the problem we're trying to solve with
Decal. I've posted this link above but I'll stick it here as well so you see
the reply:
[http://www.decalcms.com/page/Take_the_Decal_4_minute_challen...](http://www.decalcms.com/page/Take_the_Decal_4_minute_challenge)
it's a pretty early prototype of how our "designer platform" will allow you to
deploy structured, editable websites. I'd love to hear your feedback.

------
gren
I would love to have this system for documentations and articles. Imagine if
you let people easily improve texts, fix spelling mistakes, or translate
pages, for documentation you wrote.

More generally, this would be awesome to use on a wiki.

This makes editing even more accessible.

------
moocow01
Can you explain what this is besides setting contenteditable to true on an
HTML element container? I see some other dotted lines around certain sections
when you focus on them but I'm not sure how this is really powerful past just
setting contenteditable.

------
wmat
Interesting! I'd love to see this integrated into MediaWiki once it's more
feature complete.

------
swlkr
this looks a lot like <http://jejacks0n.github.com/mercury/>. Are they both
from the midgard project?

------
mbq
WYSIWYG in HTML with JS? I doubt there is a more painful way to obtain even
marginally consistent formatting...

------
asjustas
<http://vimeo.com/19366427>

------
jeffcapeshop
didn't adobe do this? i can't remember what it was called though.. but it was
similar - set up in browser editable areas on existing html

~~~
evlapix
Are you talking about Contribute?

~~~
jeffcapeshop
found it - was "inContext" which seems to have been scrapped, or at least
bundled into something else. <http://incontextediting.adobe.com/>

which shows the problem of managing something like this through a third party
anyway!

------
username3
how do you cancel?

~~~
bergie
The idea is to use versioning for this. Our backend-integrated version pulls
version history of each item into a menu in the top bar, and there should be
ability to switch between "Your version" and "Server version" there.

------
jsavimbi
I've seen Thoughtbot do this with Copycopter (<https://copycopter.com/>) as
well as Plone and others. It's a great way to sell user-editing features to
your clientele, but I would always start with actual copy prior to enabling it
as real copy is just as important as functionality for product design.

Yes, the marketing folks will just send you a bunch of disjointed word docs
and expect you to assume that they'll fill in the blanks at a later date.
Something that never happens.

~~~
michaelbuckbee
I was really excited about Copycopter but found that their "search for the
text you want to edit" interface was too confusing for my clients.

~~~
jsavimbi
That's too bad. I too found Plone's in-page editing to be a little too far
beyond the reach of the average client, but then again, I used to send static
website "versions" of a website on zip disks to a client in the mail. They
knew not of FTP.

------
nixxle
Great idea, the style pop-up doesn't always close in FF. But there you have
it.

