CKEditor replace by class

715 views
Skip to first unread message

Duarte Farrajota Ramos

unread,
Feb 10, 2015, 10:05:55 AM2/10/15
to tiddl...@googlegroups.com
Hello everyone I was hoping some of the experts here could help me with something I wanted to achieve with TiddlyWiki5


So one of the biggest personal barriers stopping me from using TW5 as my main go to note taking application is the lack of a WYSIWYG editor (my guess is this is also probably stopping more widespread adoption by non technical users or less computer savvy people too).
I know there currently isn't one, planed or implemented, except fot the experimental wiki markup helper I've seen around the forums, but for me it becomes kind of cumbersome dealing with and remembering wiki markup when I am in a hurry or just want to jot down something quickly, especially with more complex stuff like tables or if I just want to copy paste some clipping from another webpage.

So I was wondering if there is an easy way to integrate CKEditor into tiddlywiki, intentionally keeping it as external dependency and without the need for complex addons that need maintenance.
I am by no means a coder, but know my way around, and in the past I was able to easily hack CKEditor support into PMWiki using the "replace by class" simple method described here, and adding the following code in the header of the editing page template:

<head>
    ...
    <script src="/ckeditor/ckeditor.js"></script>
</head>

So I was wondering if I could also easily change something in some shadow tiddler, or change the class for the HTML editing textarea, and add something similar to any tiddlywiki without needing a full addon.
I would just point the code to some CKEditor installation somewhere on my HD, update it at will regardless of TW and hopefully loose the need for a complex addon that might break with the future releases.


Thanks




Stephen Kimmel

unread,
Feb 10, 2015, 10:33:18 AM2/10/15
to tiddl...@googlegroups.com
Duarte,

This is a bit off-topic for your question, but I would appreciate it if you would take a look at my editor project and give me some feedback on it. http://tw5editor.tiddlyspot.com/

It's not a WYSIWYG editor but I started working on it to address some of what I saw as shortcomings with the built-in editor.

Duarte Farrajota Ramos

unread,
Feb 10, 2015, 10:53:12 AM2/10/15
to tiddl...@googlegroups.com
Yes, this was the one I mentioned in the original post, I had seen it around before, that looks really really promising, one big step in the right direction, congrats on the great work.
Find and replace sure is a godsend, I hope it becomes an integral part of official releases some day.

It is obviously not a full fledged WYSIWYG editor, but it sure makes life a lot easier. The only improvement I can think of so far is that it would be great if buttons could behave like a "toggle", that is if it could detect existing markup and remove it on second press.
Like for example if I bold some text  in my selection pressing the Bold button again would toggle it off removing the previously applied "bold tags".

Stephen Kimmel

unread,
Feb 10, 2015, 11:16:46 AM2/10/15
to tiddl...@googlegroups.com
The only improvement I can think of so far is that it would be great if buttons could behave like a "toggle", that is if it could detect existing markup and remove it on second press.
Like for example if I bold some text  in my selection pressing the Bold button again would toggle it off removing the previously applied "bold tags".

Now that's an interesting idea that hadn't occurred to me. The same code you would need to do that would also allow you to select an area with the basic marks and then remove the marks.

Hmmm.

Duarte Farrajota Ramos

unread,
Feb 10, 2015, 11:41:06 AM2/10/15
to tiddl...@googlegroups.com
That'd be an useful addition.
Also just remembered, when selecting a chunk of text to convert to a link perhaps automatically assign it to the "display text" part of the link, since that is probably the most common use scenario.
Tiddlywiki converts external links automatically anyway, and handles internal ones with camel case, so if one selects a text string and presses the link button that is most likely the display part of the text and not the URL

Say select "Link text" > press link button would add [[Link text| *cursor here* ]] instead of [[Link text]]

This is a bit subjective though, I don't know what behaviour the majority of other users expects.

Tobias Beer

unread,
Feb 10, 2015, 2:49:47 PM2/10/15
to
So I was wondering if there is an easy way to integrate CKEditor into tiddlywiki, intentionally keeping it as external dependency and without the need for complex addons that need maintenance.


Create a tiddler and set the type to the first option.

I was quite sure I had added it before.
Anyhow, now I have added it here...


Best wishes, Tobias. 

Duarte Farrajota Ramos

unread,
Feb 10, 2015, 7:30:05 PM2/10/15
to tiddl...@googlegroups.com
Yes I found that one earlier here at the forum using the search. That is exactly what I was looking for, almost perfect for me.
Unfortunately, it bumps right into my biggest fear of relying on plugins: it naturally doesn't seem to work with the latest 5.1.7 version :(

Oh well, worth the try, thanks for the help anyway


On Tuesday, 10 February 2015 19:49:47 UTC, Tobias Beer wrote:
So I was wondering if there is an easy way to integrate CKEditor into tiddlywiki, intentionally keeping it as external dependency and without the need for complex addons that need maintenance.

BJ

unread,
Feb 10, 2015, 8:06:46 PM2/10/15
to tiddl...@googlegroups.com

HI Duarte,
could you explain what problems you are seeing with the visualeditor plugin - I have tried to with firefox and it seem to work ok with tw 5.1.7

Cheers BJ (author of visualeditor plugin)

Duarte Farrajota Ramos

unread,
Feb 10, 2015, 8:33:37 PM2/10/15
to tiddl...@googlegroups.com
Ok, never mind, I was midway typing my post when I decided to try again and somehow it started working, It seems I was missing a full refresh.

Just to make sure,
  • I started with an empty tiddlywiki 5.1.7
  • Imported the plugin by dragging the link $:/plugins/bj/visualeditor
  • Accepted import
  • Saved
  • Refreshed
  • Edited $:/plugin/bj/visualeditor/includelib to include the path
  • Saved
  • Refreshed browser
  • Nothing

The CKEditor simply did not load. Apparently I needed to make a full refresh (Shift+reload) of Firefox for it to actually load, a simple refresh didn't cut it. Sorry for wasting your time.

Well I guess this will do wonderfully for now, thank you all for your time and patience, and many thanks to BJ for the wonderful plugin, this is exactly what I was looking for.
I already had my own customized version of CKEditor in place which I can now happily use within tiddlywiki too


Thank you all for the help

BJ

unread,
Feb 10, 2015, 10:26:59 PM2/10/15
to tiddl...@googlegroups.com


On Tuesday, February 10, 2015 at 7:33:37 PM UTC-6, Duarte Farrajota Ramos wrote:
Ok, never mind, I was midway typing my post when I decided to try again and somehow it started working, It seems I was missing a full refresh.

Just to make sure,
  • I started with an empty tiddlywiki 5.1.7
  • Imported the plugin by dragging the link $:/plugins/bj/visualeditor
  • Accepted import
  • Saved
  • Refreshed
  • Edited $:/plugin/bj/visualeditor/includelib to include the path
  • Saved
  • Refreshed browser
  • Nothing

The CKEditor simply did not load. Apparently I needed to make a full refresh (Shift+reload) of Firefox for it to actually load, a simple refresh didn't cut it. Sorry for wasting your time. 

Thanks for the feedback; hmm firefox can be a bit quirky on occasions - I've taken note about that behaviour.
If you want to customise ckeditor there are options in this tiddler:

$:/plugins/bj/visualeditor/config.json


and user styles here

$:/plugins/bj/visualeditor/styles.json

There some issues - its not really WYSIWYG as it does not use the tiddlywiki styles!

enjoy

BJ

Tobias Beer

unread,
Feb 11, 2015, 3:41:03 AM2/11/15
to tiddl...@googlegroups.com

The CKEditor simply did not load. Apparently I needed to make a full refresh (Shift+reload) of Firefox for it to actually load, a simple refresh didn't cut it. Sorry for wasting your time.

Not sure what it is but I believe it needs some extra amount of time initializing (over the web / in TiddlyWiki). First looking at things, it's always either blank or entirely scrambled. After a bit it seems to yield the expected editor.

Best wishes, Tobias.

Duarte Farrajota Ramos

unread,
Feb 11, 2015, 10:58:47 AM2/11/15
to tiddl...@googlegroups.com


On Wednesday, 11 February 2015 03:26:59 UTC, BJ wrote:

There some issues - its not really WYSIWYG as it does not use the tiddlywiki styles!

I am ok with that, it is close enough to the final result. Thanks for the tips.

This is most likely totally unrelated to the visual editor plugin itself and probably more to do with tiddlywiki in general, but one thing I noticed is that images inserted with html markup that use relative paths don't seem to display well in tiddlers.
I have my tiddlywiki html file and an image jpg file on the same folder, if I link to it inside CKEditor with something like <img src=".\image.jpg" /> or <img src="image.jpg" /> it displays correctly while I am editing inside CKEditor, but once I save the tiddler the image is not found, then if I edit it again it displays correctly while inside CKEditor text area.
Using a complete file:/// uri seems to work fine but that is not very portable, wiki markup [img[image.jpg]]displays correctly too

Does tiddlywiki not support support this with HTML markup or am I doing something wrong?

BJ

unread,
Feb 11, 2015, 10:58:53 AM2/11/15
to tiddl...@googlegroups.com
ckeditor lazy loads its files, so the first time the editor is used there is a delay while these files are retrieved. Also ckeditor (as a default) loads the editor instances into iframes. My working assumption is that the (first use) iframe is taking longer to become ready because of this, and, for some (unknown) reason, the parent window is not waiting for it to be ready. - this would explain why sometimes there is a 'unknow' script error thrown. - the error comes from the iframe and for security the browser strip the error message (hence it is 'unknow') - probably the parent is sending a message to the iframe which causes it to reference some object that has yet to be loaded/ready.

I can think of a few ways to avoid this behavior (simplest is to use a local copy of the lib as you hint at) but not how to solve it (I cannot find a bug report for this on the net - so maybe it is tw5 specific)

Debugging this involves loading a dev version of the ckeditor and putting in some debug. Ckeditor is on the same level of complexity as tw5, so it may take me a lot of effort to track down the cause.

The issue is annoying but not serious, so it is on hold at the moment.

BJ

unread,
Feb 11, 2015, 1:44:12 PM2/11/15
to tiddl...@googlegroups.com
it works for me with the type text/x-htmlp (created as per the installation instructions) but not with text/html (which is in an iframe), you can test with a tiddler with type text/vnd.tiddlywiki and insert the html <image src="myimagepath"/>.
you can also look at the html that is produced from ckeditor by changing the type to text/plain.

Duarte Farrajota Ramos

unread,
Feb 11, 2015, 2:08:56 PM2/11/15
to tiddl...@googlegroups.com
Yes that is it, it's working fine now. Should have read the whole instructions.
Took me a while to figure out I had to manually type the content type into the text field because in won't show up on the list automatically

Thanks for the help.

BJ

unread,
Feb 11, 2015, 8:26:53 PM2/11/15
to tiddl...@googlegroups.com
I have now updated the plugin to automatically create the type for the editor. If you update to the new version on http://bjtools.tiddlyspot.com you will find the type on the dropdown list of types.
cheers
BJ

Duarte Farrajota Ramos

unread,
Feb 11, 2015, 8:57:07 PM2/11/15
to tiddl...@googlegroups.com
Much better now, installation is a breeze.
Also just copied my personal config.js into $:/plugins/bj/visualeditor/config.json so I got my own fully customized version

Thanks for the update, great addon

Tobias Beer

unread,
Feb 12, 2015, 2:16:23 AM2/12/15
to
Hi BJ,

I just noticed that — while you can't put any macros — you can actually put widgets alongside html (in source mode). What you don't see is some placeholder in CKEditor that hints at you that it's there.

Now I am wondering whether CKEditor does allow for something like "widgets"... so we could at least see a placeholder with the widget code and upon clicking we'd be editing that core widget.

Perhaps a CKEditor plugin could be written that allows to insert and edit a number of TiddlyWiki widgets, even with placeholders for the corresponding attributes?

Ok, maybe not. Looking at the CKEditor widgets and plugins architecture, I don't see how it would cater for a generic TiddlyWiki-widget type of plugin that would let you dynamically select from a number of possible TiddlyWiki-widgets and then dynamic fields depending on which one you selected.

That's possibly much more easily created as a button in edit-mode without any CKEditor... for both, widgets and macros, not just widgets.

Best wishes, Tobias.

BJ

unread,
Feb 12, 2015, 7:39:38 AM2/12/15
to tiddl...@googlegroups.com
Hi Tobias,
if you look in the widget's source you will see that an 'x-perimental' type can be enabled - I cannot decide if it is a good thing or not - I don't plan to support it at the moment
cheers

BJ

On 12 February 2015 at 01:16, Tobias Beer <beert...@gmail.com> wrote:
Hi BJ,

I just noticed that — while you can't put any macros — you can actually put widgets alongside html (in source mode). What you don't see is some placeholder in CKEditor that hints at you that it's there.

Now I am wondering whether CKEditor does allow for something like "widgets"... so we could at least see a placeholder with the widget code and upon clicking we'd be editing that core widget.

Perhaps a CKEditor plugin could be written that allows to insert and edit a number of TiddlyWiki widgets, even with placeholders for the corresponding attributes?

Best wishes, Tobias.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/nMLwo2eRRqE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Duarte Farrajota Ramos

unread,
Jul 13, 2015, 12:11:41 PM7/13/15
to tiddl...@googlegroups.com
Hey BJ
Sorry to bother you and dig up this old post, there a few major releases in the meantime, and I was excited to try the new CKEditor 4.5.1 with the fresh new TiddlyWiki 5.1.9
Turns out there must have been some deeper changes on both sides that seem to be preventing it from working correctly. I mean CKEditor seems load inside tiddlywiki but it appears all greyed out, I can't type or press any of the buttons.
Did I do something wrong along installation, or did the deeper changes really break the fragile compatibility?
Do you think you could be bothered to update for the latest versions, would it be worth your while?? Very few people seem to be using this, so I totally understand if you don't.

Thanks, Duarte

BJ

unread,
Jul 13, 2015, 4:23:37 PM7/13/15
to tiddl...@googlegroups.com
Hi Duarte,
well I like to please my customers,( and as far as I know that means just you!) and so have downloaded  4.5.1 and have tried it with 5.1.9 - and it seems to work ok. If you can put you tiddlywiki online somewhere that I can see it I will try and workout why it doesn't work for you.

Cheers

BJ

Duarte Farrajota Ramos

unread,
Jul 13, 2015, 9:49:29 PM7/13/15
to tiddl...@googlegroups.com
Haha that's very kind of you thanks for the wonderful support. The problem once again seems to be between the seat and the keyboard luckily for you.

Some wacky combination of CKEditor plugins (built from CK builder website) seems to be the culprit of the malfunction, it works fine in the provided samples page but fails to load inside tiddlywiki
It is simply solved by downloading a standard CKeditor build, I'll try adding plugins one by one and see if I can find which ones are causing trouble.
If you are interested I can still provide a broken CKEditor build, but that's probably just a waste of time.

Anyway thanks for your availability, much appreciated :)

BJ

unread,
Jul 14, 2015, 12:52:18 AM7/14/15
to tiddl...@googlegroups.com
I have not finished the work for the ckeditor, I plan on adding support for the divarea plugin to enable styles (I have this working on twclassic), but I have a lot of projects and am only one. Let me know what was causing your problems - I might fix it !
cheers
BJ

Duarte Farrajota Ramos

unread,
Jul 14, 2015, 6:21:05 AM7/14/15
to tiddl...@googlegroups.com
Styles will be a welcome addition certainly. For now I managed to get it working with the plugins I needed, nothing too fancy.
Only real complaint I have at the moment is that small glitch while loading CKEditor which temporarily messes up the layout until you start typing and it all falls back into place, but I can live with that.

What I don't really understand well how to use is the styles.json tiddler at $:/plugins/bj/visualeditor/styles.json and what notation must be used there
I know you add styles there, but I can't tell how to set them apart for the "Paragraph Format" and "Formatting Styles" menus, or how to add a few simple "H1" and "H2" elements without additional "styles" for example, or "Block quotes" or "<Code>".
Playing around with it is a bit cumbersome, because any wrong combination or mistake will generate a javascript error and prevent tiddlywiki from booting properly.

BJ

unread,
Jul 14, 2015, 7:57:08 AM7/14/15
to tiddl...@googlegroups.com
The styles are explained here:

http://docs.ckeditor.com/#!/guide/dev_styles

For editing json tiddlers there is the json editor plugin at bjtools, it is at present a bit clunky, you have to click buttons to save elements and then save the tiddler which is not intuitive, but it save you from having to pretend you are a json parser!

all the best

BJ

BJ

unread,
Jul 14, 2015, 8:28:11 AM7/14/15
to tiddl...@googlegroups.com
It looks like the 'div area editor' is working. When you build your version of ckeditor online, you can select the 'div area editor' plugin and remove the 'iframe area editor' plugin. The will allow the editor to use the correct styles in tiddlywiki whilst editing.

cheers

BJ

Duarte Farrajota Ramos

unread,
Jul 14, 2015, 10:46:04 AM7/14/15
to tiddl...@googlegroups.com
Gave it a try and it did work, however I didn't see much difference in the editing area, it was still styled differently from the rest of tiddlywiki, althought I am quite ok with that.
It did break some other functionality, like the floating bar always appearing out of place outside the editing text area, and the menus stopped staying open, they close immediately uppon clicking.

I tried copy pasting from the provided default CKEditor styles.js into the styles tiddler and I can't seem to get it to work. the styles menu either just gets greyed out and won't open or gives a javascript error.

BJ

unread,
Jul 14, 2015, 12:35:24 PM7/14/15
to tiddl...@googlegroups.com

I only tried the div plugin with a basic setup, maybe it does not play well with other plugins.

The styles need to be a json:

[{"name":"Italic Title","element":"h2","styles":{"font-style":"italic"}},{"name":"Subtitle","element":"h3","styles":{"color":"#aaa","font-style":"italic"}},{"name":"Special Container","element":"div","styles":{"padding":"5px 10px","background":"#eee","border":"1px solid #ccc"}},{"name":"Strong","element":"strong","overrides":"b"},{"name":"Emphasis","element":"em","overrides":"i"},{"name":"Underline","element":"u"},{"name":"Strikethrough","element":"strike"},{"name":"Subscript","element":"sub"},{"name":"Superscript","element":"sup"},{"name":"Marker","element":"span","attributes":{"class":"marker"}},{"name":"Big","element":"big"},{"name":"Small","element":"small"},{"name":"Typewriter","element":"tt"},{"name":"Computer Code","element":"code"},{"name":"Keyboard Phrase","element":"kbd"},{"name":"Sample Text","element":"samp"},{"name":"Variable","element":"var"},{"name":"Deleted Text","element":"del"},{"name":"Inserted Text","element":"ins"},{"name":"Cited Work","element":"cite"},{"name":"Inline Quotation","element":"q"},{"name":"Language: RTL","element":"span","attributes":{"dir":"rtl"}},{"name":"Language: LTR","element":"span","attributes":{"dir":"ltr"}},{"name":"Styled image (left)","element":"img","attributes":{"class":"left"}},{"name":"Styled image (right)","element":"img","attributes":{"class":"right"}},{"name":"Compact table","element":"table","attributes":{"cellpadding":"5","cellspacing":"0","border":"1","bordercolor":"#ccc"},"styles":{"border-collapse":"collapse"}},{"name":"Borderless Table","element":"table","styles":{"border-style":"hidden","background-color":"#E6E6FA"}},{"name":"Square Bulleted List","element":"ul","styles":{"list-style-type":"square"}}]

Duarte Farrajota Ramos

unread,
Jul 14, 2015, 1:02:08 PM7/14/15
to tiddl...@googlegroups.com
Well that worked like a charm, I guess I pretty much hit my limitations at copy pasting stuff around.
Additionally I did notice that this new version of CKEditor seems to alleviate the spacing issues at launch with Tiddlywiki, more often then not it opens and sizes correctly, which is a plus :D

Once again many thank you for your time and patience, and for the wonderful support!
Reply all
Reply to author
Forward
0 new messages