7 ms·
Create - A new kind of web editing interface
- JairusKhan 15y agoIf you make this into a Wordpress plugin it would be on every install in a week.
- csomar 15y agoCheck this out (http://artsyeditor.com http://artsyeditor.com). It's not free, though.
- 8ig8 15y agoHere is a plugin for front end editing using Aloha: http://scribu.net/wordpress/front-end-editor http://scribu.net/wordpress/front-end-editor
- bergie 15y agoCreate can actually use Aloha if you just tell it to. jQuery('something').create({editor: 'aloha'});
- secure 15y agoIt'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 15y agoI'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_challenge http://www.decalcms.com/page/Take_the_Decal_4_minute_challen...
- secure 15y agoIt 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 15y agoThanks 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.
- jordanlev 15y agoIt is obvious once you start using something like this (and especially when you see how happy non-technical users are about how much more in control they feel with their website because they actually understand what they're doing). I've had a lot of success over the past year or so using Concrete5 (an open source PHP CMS), which works in this way.
- asolove 15y agoInline 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/ http://grabaperch.com/
- veb 15y agoDoes 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 15y agoI 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.
- jsavimbi 15y agoI've seen Thoughtbot do this with Copycopter (https://copycopter.com/ 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 15y agoI 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 15y agoThat'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 15y agoGreat idea, the style pop-up doesn't always close in FF. But there you have it.
- gosub 15y agoOne 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 15y agoThere'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 15y agoYep, I've seen this bug. I'll look at it tomorrow. https://github.com/bergie/create/issues/13 https://github.com/bergie/create/issues/13
- tommyvyo 15y agoConcrete5 (a CMS) has a main feature lot like this. Worth checking out for those not looking to reinvent the wheel. http://www.concrete5.org http://www.concrete5.org
- jeffcapeshop 15y agodidn'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 15y agoAre you talking about Contribute?
- jeffcapeshop 15y agofound it - was "inContext" which seems to have been scrapped, or at least bundled into something else. http://incontextediting.adobe.com/ http://incontextediting.adobe.com/ which shows the problem of managing something like this through a third party anyway!
- lukeholder 15y agoPlease check out mercury editor. Much nicer and active development. http://jejacks0n.github.com/mercury/ http://jejacks0n.github.com/mercury/ other notable and far more advanced (over create): Aloha Editor http://www.aloha-editor.org/ http://www.aloha-editor.org/
- InclinedPlane 15y agoYou should provide a link (even though google is easy).
- sunahsuh 15y agoFrom a cursory look: Mercury seems to be tied to Ruby and I'm not exactly enamored with the UI Aloha uses jquery-based selectors to identify editable content areas as opposed to Create's more standardized and semantically accurate RDFa. (This is based on all of 3 minutes of poking around so I don't claim complete accuracy.)
- Turing_Machine 15y agoThanks 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.
- 15y ago
- swlkr 15y agothis looks a lot like http://jejacks0n.github.com/mercury/ http://jejacks0n.github.com/mercury/. Are they both from the midgard project?
- wmat 15y agoInteresting! I'd love to see this integrated into MediaWiki once it's more feature complete.
- mbq 15y agoWYSIWYG in HTML with JS? I doubt there is a more painful way to obtain even marginally consistent formatting...
- asjustas 15y agohttp://vimeo.com/19366427 http://vimeo.com/19366427
- arnorhs 15y agoThere 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 15y agoIt 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 15y agoWould be nice to have a list of RDFa compatible backends.
- bergie 15y agoBackends don't need to be RDFa-compatible in any other sense than being able to contain the RDFa attributes in their HTML templates.
- jsilence 15y agoRewording: 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.
- tbranyen 15y agoBackbone.js huh =) We should get you on the homepage. Submit a pull req or contact me on GitHub.
- sambeau 15y agoIndeed. I created a system that worked like this in 2003. (it looks well done and it's interesting, but it's not a 'new kind of editing interface')
- nvictor 15y agomany 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 15y agoYes - 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_challenge http://www.decalcms.com/page/Take_the_Decal_4_minute_challen... 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.
- bergie 15y agoStructure is not in the demo, but Create does support relations. So if you for example have a collection of resources (say, an event list or list of blog entries), it knows how to add/remove them. As for linking, there is a group within the project working on that. I hope we'll have something to show on that in Jan.
- moocow01 15y agoCan 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.
- username3 15y agohow do you cancel?
- bergie 15y agoThe 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.
- joshontheweb 15y agoSimilar project: http://etchjs.com http://etchjs.com - An inline content editor *disclosure: I released this project
- bergie 15y agoNice! Seems indeed very similar. Linked to the Create README: https://github.com/bergie/create/commit/75eb91919423471eb6e7908f3c176c30f13d9eed https://github.com/bergie/create/commit/75eb91919423471eb6e7... Maybe Etch you also run with VIE's Backbone models? http://viejs.org/ http://viejs.org/ Then you could basically swap between Etch and Create with the same mark-up and server-side implementation.
- skid 15y agoI 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 https://github.com/skid/wimp/blob/master/js/jq-extensions.js
- deleted 15y ago[deleted]
- jsilence 15y agoTo 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 15y agoThat is exactly the plan: http://bergie.iki.fi/blog/decoupling_content_management/ 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.
- gren 15y agoI 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.
- lsmith77 15y agoScenario: 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!