Installing CKEditor with standalone TiddlyWiki

I was recently asked how to use CKEditor with a standalone TiddlyWiki. CKEditor is the replacement for FCKEditor. I’ve been using it for a while in MyDocs (a customisation of TiddlyDocs) but thought I would take this opportunity to document how it can be used in a standalone TiddlyWiki.

First off we need to get all the tiddlers required for CKEditor, the easiest way to do that is to cook the ckeditor vertical recipe.

For your convenience I’ve uploaded the TiddlyWiki file it produces here.

Now we need to download the CKEditor files, You can download them here.

Finally you just need to change the location set in the MarkupPreHead tiddler so it points to the CKEditor folder you just downloaded. In my case:

<script type=”text/javascript” src=”./ckeditor/ckeditor.js“></script>

If you are using cook you will need to save the MarkupPreHead tiddler from within the TiddlyWiki file for it to be set correctly. I have already done so in the example provided.

You may also want to change the values in the “CKEditorSettings” tiddler.

Save your changes, refresh the browser and that should do it.

Update:

As some folks experienced problems getting this setup I have provided a zip file of the output:

http://simonmcmanus.com/stuff/ckeditor/twCKEditor.zip

Advertisements

11 thoughts on “Installing CKEditor with standalone TiddlyWiki

  1. So I downloaded your example wiki, and have the ckeditor folder in the same directory as the wiki (as your example is already programmed for), and I cannot get the WYSIWYG button to show. I even placed editHtml in the toolbar commands (which I had to do with FCKeditor as well).

    1. Hi Steve,

      This CKEditor plugin does not provide a wysiwyg button in the same way that original FCKEditor tiddlywiki plugin did:

      http://visualtw.ouvaton.org/VisualTW.html#FCKeditorPlugin

      This was primarily to make the base CKEditor plugin simple and easy to extend.

      It’s possible to write a plugin that creates a TiddlyWiki wysiwyg command. Its worth taking a look at the FCKEditor example above.

      MyDocs specifies an edit template to use when creating a new section (taken from the PageTemplate tiddler) :

      http://pastebin.com/raw.php?i=rDZnnD0a

      If you look at NewSectionTemplate tiddler you will notice it calls the “editHtml” macro:

      http://svn.tiddlywiki.org/Trunk/verticals/tiddlydocs/themes/MyDocs/NewSectionTemplate.tid

      HTH

  2. Hello, I downloaded both your index.html and ckeditor. index.html is at the root of the directory, ckeditor folder is also in the root directory. The edit button shows the regular tiddlywiki edit screen. What am I missing? Its not working. Thanks!

  3. FYI – Some of your links in this post are down (invalid).

    Also, can you explain the “Cook” process from the recipes? I was able to get your .ZIP working, just trying my hand at doing the build myself.

    Thanks in advance for any help you can provide.

  4. Hello Simon.

    Thanks you for this. I works perfectly.

    But how can I link to other tiddlers?
    How can I have the default link behavior ([[display text|WikiWord]]) to link to a tiddler?

    best regards
    FG

  5. Hello Simon.

    First of all, thanks for putting things together, now we have this up-to-date wysiwyg engine.

    Some notes and questions regarding this:

    * most important: are you going to maintain the plugin(s) here, at http://simonmcmanus.com/stuff/ckeditor/index.html, or it’s just an example for others to use and perhaps persistently store somewhere? There’s no actual link in the “Source” slices of the plugins
    * in CKEditorPluginEditOverride “Name:” slice has “FCKeditorPluginEditOverride” value
    * why keep different parts of plugin in separate tiddlers?
    * is there a way one can change ToolbarCommands (and change not the plugin) so that there are two buttons on the tiddler toolbar: edit (like usual one) and wysiwyg (edit with CKeditor)?

    Since I already asked different people (including at TiddlyWikiDev) about cooking and didn’t get a reasonable answer, any links to it’s description are very much appreciated.

    And one more advanced question. How much of CKeditor’s API do you know? Do you have any idea how this approach can be implemented: http://groups.google.com/group/tiddlywiki/browse_thread/thread/11b17827bcab6995# ?

Comments are closed.