CkEditor integration

Has anybody integrated CkEditor with Vaadin? I’m just now evaluating Vaadin, but we’re pretty sure we’re going with CkEditor for our rich text editing (we need the ability to layout HTML with tables and such, and have it render with CSS styles defined in our app, retrieve images from our datastore, etc.).

Thanks for any comments, concerns, tips or even alternatives that can perform as well as or better than CkEditor when using Vaadin.

TinyMCE has been integrated as a vaadin widget, Henri has a demo running here
http://hezamu.virtuallypreinstalled.com/WidgetTest
, seems to work roughly the same but I havent tested them much.

Hi!

If TinyMCE is not enough I think it should be quite easy to build similar integration for CkEditor using TinyMCE integration code as an example.

http://dev.vaadin.com/svn/incubator/TinyMCEEditor/

If you end up doing the integration, please share the component.

cheers,
matti

Thanks for the tips. I’ll look into TinyMCE to see how it compares to CkEditor, but your suggestion sounds great too.

I’m still evaluating vaadin itself right now, but was impressed by the 60 second tutorial that seemed to do quite a lot in a small amount of code, though I’m sure it will grow as the complexity grows. Still, for us, it’s a lot nicer than pure GWT from what we’ve seen, and we come from a JSP/Servlet background, so server-side code for the UI is much more natural to us, and appears to save us from the dreaded DTOs GWT RPC seemed to involve.

Next, we’ll look at the 60 minute tutorial, and perhaps try to add a simple login page front end to see what it means to swap “pages” in and out. If that works well, we’ll give it a try, though CkEditor integration is still farther down the line of our project roadmap.

Thanks again!

Anyone had an experience comparing TinyMCE and CkEditor ? Would be interesting to listen for pros/cons. We’re planning to refresh our CMS this year and backend will be Vaadin-based, for sure :slight_smile: So, html editor component is the major piece we need to stabilize with. If CkEditor is better, we might take the Vaadin integration process or take over the current TinyMCE sample.

Hello Dmitri,

we have used both in the past and both have (dis)advantages.
Here a incomplete list of differences

Good in CKEditor:

  • Out of the box server side link browsing
  • Link upload possible
  • Out of the box server side image browsing
  • Image upload possible
  • Serverside java support (Taglib, xx browser/uploaders)

Bad in CKEditor:

  • Paste from Word/Outlook (Any MS office products) can be problematic
    (Always was in fckeditor)
  • Coding seems to be less professional than TinyMCE

Good in TinyMCE

  • Good in paste from MS Office apps
  • Development seems to be more professional than in CKEditor
  • Tripple licensed GPL/LGPL/MPL, closed source licenses also available

Bad in TinyMCE

  • Image/Flash browsers/uploaders must be implemented from scratch
    or have to be purchased from the developers (Only for PHP and .net)
  • No link browser/uploader availble at all, but can be written ourself
  • No java support at all
  • “Only” LGPL licensed

Until now we did use fckeditor, and are now reevaluating if we should switch.
The drawback of TinyMCE in our application are the missing browsers/uploaders.

Regarding the “good” item: [quote]
Triple licensed GPL/LGPL/MPL, closed source licenses also available
[/quote]

You show that under TinyMCE, along with the “bad” item also for TinyMCE:[quote]
“Only” LGPL licensed.
[/quote]

Just to clarify that CkEditor has the triple license, allowing you to choose as you see fit.

I’m less familiar with the MPL, but it seems to allow for easy use in commercial apps, especially for those who don’t plan on tweaking any CkEditor code. I’m not really sure what happens if you have Apache 2.0 Vaadin code that is a wrapper to use CkEditor in the vaadin environment, but assume there’s no issue as a user would be obligated to follow both for the independent code written in each, and the vaadin component would be okay because it would just use the CkEditor APIs which are LGPL/MPL. It gets fuzzier under GPL since it would seem that the vaadin wrapper would then have to be GPL too, not Apache 2, though not an issues since CkEditor allows them all.

While I’ve never built a Vaadin widgetset, I am taking your advice and building a ckeditor widget based on the tinymce widget in the incubator.

It’s mostly been mysterious so far, but I’m slowly seeing how it’s put together, though I now need to figure out how to debug the GWT/javascript side more (I’m using 6.3 nightly, but can’t set breakpoints yet outside of the server code). I have been able to get it to display ckeditor with some contents, and even passed in some config to effect small changes like change the toolbar from “full” to “basic”. So TinyMCEEditor has been a very good so far in getting that moving along as I’d never have guessed how to put that all together otherwise.

Yes, I’ll share what I have once I have something usable.

The biggest mystery remaining is how to get changes made back to the server, somehow hooking the ckeditor events to send back.

One more question about these two editors:
Can you insert or get rows programmatically using CKEditor or TinyMCE
and could you get ENTER events?

best regards
Yorgos Tryfon

The ckeditor plugin currently doesn’t support events on ENTER. It does have one for “value change events”. You most likely will have to use those editors more directly to have any detailed interactions with them as they are big JavaScript apps with complex APIs, but those APIs are meant to mostly run in your browser and not with interactions back to a server.

Can you integrate CKEditor anywhere? Yes, you can!
If you will have any incompatibality with styles or scripts you may need to attach some CSS or JS manually, the easiest way to do it - use this plugin: http://doksoft.com/soft/ckeditor-include-css-js/index.html

Or maybe you use Bootstrap in your website? It is more easy: http://doksoft.com/soft/ckeditor-bootstrap/index.html