bergie / create Goto Github PK

View Code? Open in Web Editor NEW

2.5K 105.0 280.0 10.66 MB

Midgard Create, a generic web editing interface for any CMS

Home Page: https://bergie.github.com/create

License: MIT License

CoffeeScript 1.12% JavaScript 84.50% CSS 12.67% HTML 1.71%

content-management-system rdfa jquery-ui

create's Introduction

Create - On-site web editing interface

Create, from the Midgard Project, is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

Create.js is built on top of VIE, the semantic interaction library powered by Backbone.js. The widgets in Create.js itself are done with the jQuery UI tools.

Features

Making RDFa-annotated content on pages editable
Managing collections of content (add, remove)
Local, in-browser storage and retrieval of unsaved content
Adaptable connector for communicating with the back-end system
Running workflows (approval, etc.) for content items
Browsing and reverting content history
Easy rebranding of the interface with some CSS
Can be used as-is, or as a toolkit for a custom CMS UI

Integrating Create with your CMS

Please refer to the Create.js Integration Guide.

PHP developers should also check out CreatePHP. For easier Node.js integration there is contentblocks.

Future plans

Adopt the Web Intents specification for better image and link handling
Content annotation and auto-tagging with Apache Stanbol
Wrapper for using Create inside Google Web Toolkit via VIE-GWT

Dependencies

Hallo - distraction-free content editor (optionally, Aloha Editor or Redactor)
VIE - editable RDFa library
Backbone.js - client-side management of models, views, and collections
jQuery UI - widget and effect library
Mousetrap - keyboard shortcuts library (optional)

Building Create

Create.js uses a build system running on Node.js, so you'll need that. Install the build dependencies with:

$ npm install

Use the supplied Gruntfile.coffee to generate the merged JavaScript file for Create:

$ grunt build

You can also generate a simplified version that only includes the inline editing features:

$ grunt editonly

Note: the grunt command is part of the Grunt package. You can either run it from ./node_modules/.bin/grunt or install it globally via npm install -g grunt-cli.

Discussion

Create.js Google Groups mailing list
#iks IRC channel on Freenode

Similar projects

Etch

Editor alternatives

The default rich text editor shipping with Create is Hallo, an MIT-licensed editing widget.

You can also use other editor options under their own licensing schemes, or integrate something else.

Using Aloha Editor

By default, Create uses the Hallo Editor. To use Create with Aloha Editor you need to:

Download the latest version of Aloha Editor
Extract the archive file and move the aloha directory into the create/deps folder -- check to have it like this: create/deps/aloha/lib/aloha.js
For more information about using Aloha Editor see the Aloha Editor Guides

Using Aloha Editor with Create is covered by Aloha's FOSS License Exception:

Aloha Editor’s Free and Open Source Software ("FOSS") License Exception allows developers of FOSS applications to include Aloha Editor with their FOSS applications. Aloha Editor is typically licensed pursuant to version 3 of the General Afero Public License ("AGPLv3"), but this exception permits distribution of Aloha Editor with a developer’s FOSS applications licensed under the terms of another FOSS license listed below [MIT license is included], even though such other FOSS license may be incompatible with the AGPLv3.

Using Redactor

You need to acquire a Redactor license and include the editor JavaScript and CSS files into your pages separately. Then you can set Create to use Redactor for particular areas by using the redactorWidget editor option.

Translations

The whole Create.js user interface can be translated to different languages.

To contribute a translation, copy the English localization file and replace the values there with your language. Then send the file via a pull request.

Changes to strings used by Create.js will be announced on the mailing list, so it is a good idea to subscribe to it if you make translations.

Running Unit Tests in browser

Direct your browser to the test/index.html file to run Create's QUnit tests.

Headless unit tests on PhantomJS

PhantomJS test automation is part of the project's build configuration:

$ grunt test

or:

$ npm test

Continuous integration

Create uses Travis for continuous integration. Simply add your fork there and every time you push you'll get the tests run. See our Travis build page for more information.

create's People

Contributors

Stargazers

Watchers

Forkers

wirta szabyg iks mor1 reyman tkopczuk tilgovi cwarden a5an0 bronfman kfalter farmerbradllc jecons pivaldi maheshbabu aotw bsletten rwaldron bysoft ghosthamlet evo42 payingattention valanz mchorfa noahmuller colinfrei albertomusetti jerryjj jukka igorw-forks irvbriscoe libin lokidg ashe301 craigmartin bartvdb tkdiscoverer markaid prgagarina167 jeanjimbo rayleyva oloed nka11 ilpredo wvwatson maxirom grahamhayes leison rikuvirta tejastank pscheit dydycloud wysiwhat devluis lenada gyanesh-mahana king-tom ryansroberts babsgosgens terminalfour brunschgi woodworker guilhermeblanco b0unc3 lschule chluehr mroderick jayeshbhalodia cordoval chrisalbright skurfuerst ablasco yaninelbi pavelnikolov kusanar jessebeach robert-osborne lucianotonet wimleers paulscott56 frega primaapriansyah svogler vidou chengz levito mediasapiens doortts barnabywalters asanchez75 zuhair-naqvi angun33 rotund columbiagsapp samuelepapa tussion jeetchris cartercole rbarros brunoflores

create's Issues

More accurate button label for leaving edit mode

ATM, if you're in edit mode, you have to click on "Cancel" to leave it, which is a bit confusing, because after clicking Save, you have to click Cancel, which might lead people to beleive that their edit wil be reverted. So from a usability point of view, it would be better to change the button label to "Exit" or something similar if there are no unsaved changes

Possible editable area focus UX improvements

The new Firefox "Inspect Element" dark modal background is very neat and would probably fit the create edition pattern very well (along with the out of area toolbar). Make sure that content outside of the focus area can still be copied and paste into the editable area though.

Cancel doesn't remove newly-added items

When I click the "Add" button in collections a couple of times, the appropriate nodes are added to the DOM. But when I click cancel without saving, they stay there instead of being removed. I have to refresh the page with F5 to make them disappear, which is a bit cumbersome

create doesn't works in xhtml document

When the example.html is served as html firefox renders it in "Quirks mode" and the behaviour is as expected. Changing the document head to

and servig it as application/xhtml+xml result in the document being rendered in "Standards compliance mode" in this case the edit functionality no longer works.

Toolbar height changes

I'm not sure if this is related to hallo or create, but sometimes when clicking into an editable area, the hallo toolbar becomes too wide, so the Save/Cancel buttons are pushed down, so that the height of the toolbar doubles. It should be noted that the hallo toolbar is mostly empty at this point, so all would fit in one line without problems. But it seems that something calculates the width of the hallo toolbar wrongly.

I have a screenshot that shows the problem, but I don't think github allows image upload. Anyways, I can provide it by mail if you need it

Hallo doesn't destroy formatting toolbar after editor deactivates

With latest version if I have multiple editables in single page, each time I click on one I get new Hallo toolbar rendered on top of the previous one.

Make WYSIWYG editor configurable

Create currently has support for two WYSIWYG editors: Hallo (MIT license) and Aloha Editor (AGPL).

We need to make the editor configurable so that it is easy to switch between them by integrator, and to decide what editor plugins to load.

documentation and code out of sync

accoriding to README.md (Tsrating Create) url is just a value

jQuery(document).ready(function() {
jQuery('body').midgardCreate({
url: '/some/backend/url'
});
});

but it seems that it is expected to be a function as in

jQuery(document).ready(function() {
jQuery('body').midgardCreate({
url: function() { return '/some/backend/url'; }
});
});

localStorage gets stale

I work on a site with create as the primary edit interface and I use two different machines. Yesterday I made some changes from machine 1, today from machine 2. Now when I enter the edit mode from machine 1, it doesn't take the current page content (which was saved from machine 2), but it replaces the text with the old version that was last saved from this machine.

I can't remember exactly, but this might have something to do with closing the browser when it has unsaved changes. In any case, if create can't auto-detect that its local cached contents are out of date, it should at least ask the user before replacing the current page content with something else, because this makes it of course very easy to accidentally overwrite contents with old versions.

concept to determine editor for each entity field

an editable entity can have more than one wysiwyg field. for example, many entities have a title attribute and this should probably be plain text. we need a way to determine what editor to use for each individual field. preferrably using the rdfa semantic where available, rather than stupid straightforward mapping (though this could be useful for special cases or non-rdfa content).
types of field that come to mind:
* Title field: Only plain text. Or a hallo with no editing plugins
* Tags field: List of plain text with autocompletion
* Image field: File upload rather than any form of text, with image preview
* Attachment field...

sessionStorage not working on Firefox with Cookies disabled

When acessing http://createjs.org/demo/hallo/, I get the following error in Firefox:

The operation is insecure.
http://createjs.org/js/create.js
Line 108

I haven't looked at the code yet, but a quick search found this link, maybe this is a related issue:

http://stackoverflow.com/questions/10929337/firefox-13-0-cross-domain-localstorage-access-error-the-operation-is-insecure

Keyboard shortcuts

It would be neat to be able to control the most used function of the create UI using the keyboard.

For instance:

ctrl-e to start the edit mode on the editable area of the page
ctrl-s to save without leaving the edit mode
ESC to leave the edit mode
ctrl-arrow up and arrow down: move the focus to the previous / next editable area.

Hallo and annotate.js features could also be triggered by keyboard. In particular adding a link on the current word under the cursor or text selection uppon pressing ctrl-l.

undo/redo queues seem to leak between properties

Steps to repoduce:

go to edit mode
focus an editable property and enter some characters
focus another editable property
Click "undo"

Expected results:

nothing happens since the currently active property has no modifications

Actual results:

The change made in step two in the previously focused property is reverted
The cursor is moved to the previously focused property, but it doesn't react to keyboard input and the wrong editor toolbar is shown.

Allow specifying more than one editor configuration for a given RDF property name

(this was split out from #62, because it really is a separate concern)

AFAICT, you can only specify one editor configuration per RDF property name, which becomes problematic if there are two different entities that both have a property with the same name, but which should have different editor configurations. F.x. if I want to allow a blog entry's dcterms:title to use Bold/Italics markup, but there is another dcterms:title on the page that belongs f.x. to an editorial, and should be plaintext.

If I read the source code correctly, there might be a way to choose a property editor configuration based on the model's type, but I don't really understand how this is supposed to work, so if there is a way to implement this scenario (and the one from #62), some sample code would be greatly appreciated.

example-aloha.html file is marked as executable

this is a minor issue, but still kind of irritating: When I click on the example-aloha.html file from git, Ubuntu asks me if I want to run this program. This is because the file has 775 permissions

Test with Aloha Editor 0.20

Version 0.20 of Aloha Editor just hit beta. Create's Aloha integration was done with the previous stable release (0.9.3), and should be re-tested on this new version.

Image insertion

inserting images with drag and drop was developped in the cmf sandbox[1], mostly inside the Liip fork of hallo. at Liip we want to work on bringing the changes back into upstream hallo and into create. expect some pull requests.

[1] https://github.com/symfony-cmf/cmf-sandbox/

Add placeholders support

When adding new elements to a collection we should show placeholders for their properties so they get rendered properly. This is somewhat similar to tools like PowerPoint displaying Insert slide title etc.

When user activates the editable the placeholder should get removed.

Global undo/redo buttons

While thinking about #66, I was wondering if the proper to fix this wouldn't rather be for CreateJS to provide a global undo/redo queue and buttons. These could behave like the Save button, i.e. they are greyed-out unless there are changes on the corresponding stack. Clicking undo/redo would then focus the corresponding property and revert it's content. Ideally Add buttons clicks could be reverted as well, i.e. unsaved elements would be removed.

That way, an editor could revert their changes to the entire DOM tree step by step in one place, instead of having to focus one editable after another to try and see if this field has undo information.

Define REST API for all communications with back-end

Now Create uses old Midgard-specific HTTP calls for some of the communications. We need to define standard REST APIs for them, and allow overriding of the communications layer by integrators.

The API would at least need to cover:

Basic CRUD operations on content objects (including getting
collections of objects). This is now covered by Backbone.sync
File attachments and links (I've been thinking of Web Intents here,
but it is probably now too early for that)
Workflows (getting list of workflows applicable to a content object,
running a workflow)
Revision history of an object (history list, fetching older
versions). WebDAV has versioning, but that may be too complicated for CMSs to implement

Some discussion.

Metadata editor

We need an editor popover for the properties of an entity that don't have an editable RDFa representation.

Use case:

I have a "category" field for blog posts, but it's value is not displaed in an HTML tag, but instead is just used in the style code to set a CSS class f.x. on the document body. If create.js is the only edit interface available on the server, it has to provide a method for displaying (arbitrary) edit widgets for nonvisible content.

Mechanism for marking properties as noneditable

ATM, the only way to make property of an entity noneditable is to not render the "property" attribute on the respective DOM node. While this is fine from the editor point of view, it sort of defeats the purpose of using create.js as a mechanism for spreading RDF adoption, so it would be good if there was an integrated way to mark properties as noneditable that still produces complete RDF markup.

BTW, the same applies to entire entities. To make them noneditable, you have to suppress rendering the about attribute, which has the same problem as the one mentioned above

Updating freshly create object creates a second one

Steps to reproduce:

1: go to edit mode
2: click Add on a collection, enter something
3: click Save
4: edit the new item and click Save again

Then, reload the page

Expected result:

One new item with the values from step 4

Actual result:

Two new items, one with the values from step 2, the other with the values from step 4

Edit animation loops

On the http://createjs.org demo, it is possible to get "entering edit state" to loop on Firefox. From HN:

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.

http://news.ycombinator.com/item?id=3344555

Notification when changes are in the local storage

Hello!

We defined a mechanism to tell the user about the local storage status during the hackaton in Zürich. I understand through the commits that it should work but wonder if there is any documentation about it ? how can I enable it on my test environment ?

Thanks a lot in advance :-)
Cheers,
Loic

undo / redo buttons get stuck

If you click the undo/redo buttons for a property that doesn't have any modifications (or simply no more undo/redo steps), the buttons stay highlighted. Ideally, they should be automatically disabled when no undo/redo steps are available for the current property

Link plugin seems broken

I just tried to activate the link plugin in my config, which adds an unlabeled checkbox and some sort of bookmark icon to the toolbar. When I click either of the two, an unstyled div appears iwth an input field for a URL, but I can't click it to give it focus. It has focus when it appears for a couple of miliseconds, but the cursor then immediately reverts to the test field where it was before.

Also, I noticed that I have something like 40 invisible dialog boxes that are added to the DOM ()I have approx. 40 editable items on the page, so maybe it's one for each editable area?

Add support for client-side validation

It would be great if create had builtin support for client-side validation (things like required fields, maximum/minimum input length and so on). Validation has to be done by the REST backend anyways, but the user experience would be better if we could also see input errors before submission

tag editor

in the cmf-sandbox we built the editor for tag lists with standbol integration. for the stanbol integration, see also #33

we should port the tag editor which is currently just some functions https://github.com/liip/LiipVieBundle/blob/iks/Resources/public/js/init-vie-hallo.js#L77 to something that can be instantiated as an editor of a rdf field. it could then be used both on visible tag lists and on non-visible tags (see #32 for editing non-visible information).

highlight effect causes performance issues

If you have more than a few editable areas in a page, clicking the edit button triggers dozens of jquery.ui highlight effects, which are very heavy on the system. F.x. with older laptops or small VMs, Firefox can freeze for almost a minute or crash entirely (Chrome has fewer problems, I didn't even dare to try IE...).

It would be good if this could be optimized, maybe by using css3 transitions, or by only triggereing the effect for visible elements, or maybe by finding an effect that is less demanding to begin with.

Oh, and what would also be nice would be to have CSS classes added to the editable elements, so that there is some sort of access point for building skins. It could f.x. look something like this:

<div contenteditable="true" class="ui-createjs-editable ui-createjs-state-editing" property="xx:content">

content

That way, site builders could style the edit interface from CSS, and wouldn't need the highlight effect to make editable areas visible.

have create provide the semantic information about entities

instead of every plugin and outside thing repeating the costly requests to stanbol, we should have this offered by create and cached for a while so all plugins can use it.

l10n support

ATM, English interface texts like "Edit" or "Cancel" are hardcoded. It would be good if they could be localized

Sporadic exception when clicking Add button in collections

Sometimes when clicking the Add button in a collection, I get the following exception in Firebug:

Can't add the same model to a set twice,_:bnode150
create/deps/backbone-min.js
Line 19

I didn't find out yet what exactly triggers it, but I thought I'd post it here for later reference

Allow specifying an editor config for multiple RDF property names at once

Scenario: There are multiple editable properties on an HTML page. About half of them are supposed to accept only plaintext (like a person's or company's name or a blog entry's title) and the other half can also accept HTML-formatted input and images (like the text of a blog post, or the biography of a person).

In the current createjs configuration format, I will have to provide an editor configuration foreach RDF property name, so f.x. one for dcterms:title, one for foaf:name and so on, which leads to much redundancy. It would be much nicer if there was a way to specify one configuration called "Plaintext" and another one called "Richtext" and assign them to the properties of your choosing.

Placement of notifications is off

Notification dialogs (like the one asking you if you want to restore unsaved edits) are usually shown in the wrong place (f.x. in the middle of the page instead of underneath the toolbar as the arrow indicates).

Also, the notifications have position:absolute, so they scroll with the page. IMHO it would be better if they stayed fixed like the toolbar itself.

Add support for Proper as another editor alternative

Proper seems to be an interesting contentEditable implementation. We should add support for it in midgardEditable just like we now support Hallo and Aloha Editor.

Build script for generating a single CreateJS file

As requested in the mailing list discussion, we should have a script that generates a single, minified CreateJS file that is easy to include to web applications

Micro-optimization for create-ui.css

I just poked around the network monitor a little and noticed that the createJS toolbar loads a 60*1px background PNG of some semitransparent black. It would be nice if we could replace that (for browsers that support RGBA) with

background-color: rgba(0, 0, 0, .6);

(or some opacity value in that general vicinity). It won't make any real performance difference, but it would mean one HTTP request less every time createjs is loaded

JS Exception when adding, saving, adding again

When I add a new element to a collection, click save, and then click the add button again, I get the following exception in Firefox:

uncaught exception: [Exception... "Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.queryCommandValue]" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" location: "JS frame :: http://localhost:81/openpsa2-static/create/deps/hallo.js :: <TOP_LEVEL> :: line 1443" data: no]
http://localhost:81/openpsa2-static/create/deps/jquery-1.7.1.min.js
Line 2

Demo throws JS errors in IE8

on createjs.org, you get lots of errors from hallo.js line 330 (object doesn't support method or property)when editing, and when saving, you get an error from line 12 of create-hallo.js (console is undefined)

review relation to share.js

http://sharejs.org/

Add effects between view, edit, and save

Older Midgard Create had effects when entering edit mode from view state: the editable areas flashed green.
Similarly, it had an effect when content was saved.

These need to be re-added.

Collection Add button should be in main toolbar, too

ATM, the "Add" button for collections seems to be added to the DOM right after the collection holder. This is nice in principle, but can be inconvenient in some situations, f.x. it might break the page layout, and in longer collections, you have to scroll to see it.

So it would be nice if the Add button could appear in the main toolbar as well (maybe as a config setting like add_button_position = [toolbar|inline|both] ?)

Add possibility to remove entries from localStorage

ATM, if you have local modifications in your browser, create.js will ask you whether or not you want to restore them each time you go to edit mode. It would be good to have a third button named "Discard" or something in the dialog that allows you to remove the loca changes completely.

Changing focus while upload image dialog is open causes toolbar to get stuck

To reproduce:

Go to edit mode
Put text cursor into editable area and click the Insert Image icon in the toolbar
while the image dialog is open, click somewhere else on the page

Expected result:

Image dialog closes and the property's toolbar disappears

Actual result:

Image dialog stays open and property's toolbar stays visible. When you focus another editable property, you will get a second row of toolbar items

concept for editing hidden fields in entities

have a concept how hidden fields can be edited. (document meta information that is not visible in the rdf annotations because it is not usually shown in the page). in the cmf-sandbox we have this "Settings" tab that was hidden behind the content and overlays content when you click it.

Add indicator for unsaved changes

ATM, it is impossible to see which properties have unsaved changes, so if you edit for a while and want to save, you have really no way to tell what exactly will get written to the server, and it's often a surprise to see a message like "6 objects saved successfully" when you only remember editing two.

So it would be good if properties with unsaved changes would have a dedicated CSS class (similar to the "inEditMode" class they have when focused) that can be used by UI builders to show indicators.

k.indexOf is not a function

I am receiving the above in vie-min.js error for everytime I hit save. It doesn't cause the PUT Request to fail, but could yield some problem with the integration in Drupal. Is there a matching non-minified version of vie I could test with?

I tried with the latest non-minified VIE version from Github and received a "this.Collection() is not a Constructor", so I doubt I am having the correct version going with create.js.

Login functionality

Authentication is normally a server-side feature. However, Create could potentially provide support for BrowserID with a simple API to verify the login on the server. This shouldn't be pushed as a requirement, but instead as a "sensible default".

https://browserid.org/about

Timeline widget for previewing the page at specific point on time

Show user scrollable timeline and date selector, show one can sroll to specific time and see what content will be available then.
Timeline can be example split to current days hours and then one can select from the datepicker the date which to jump and the hour from the timeline.

This needs atleast proper specification, so different backends know how they should provide this feature.