The jsFiddle module for ContentBox is a simple, but handy way to easily embed â€œfiddlesâ€� from http://jsfiddle.net in your posts and pages. It also provides for some nice configuration of defaults so that you concentrate more on your content and less on tweaking the fiddles that you include in your posts.
Another really handy feature of the jsFiddle module is that you can save any number of usernames from http://jsfiddle.net. Once saved, you will be able to browse the userâ€™s public fiddles when inserting a fiddle into your posts and pages.
NOTE: If you want to force a refresh of all usersâ€™ fiddles regardless of expiration, simply use the â€œUpdate Cached Fiddlesâ€� option.
A new icon is added to the CKEditor toolbar when creating and editing pages and posts.
Also, you can right-click in the editing area and choose â€œEmbed jsFiddleâ€�.
After acting via the toolbar icon OR the context menu, youâ€™ll see a simple wizard for inserting fiddles. This wizard provides two options.
In this wizard, you can select a user from the selection list (assuming youâ€™ve saved some users in the config). Once youâ€™ve selected a user, their available public fiddles will displayed.
To insert a fiddle, click the â€œConfigureâ€� link. Youâ€™ll see a variety of options (all of which should reflect the defaults youâ€™ve set in the module configuration). You can override any defaults you like. Once you have the fiddle configured the way youâ€™d like it, simply click â€œInsert FIddleâ€�, and your configured fiddle will be inserted into the content area.
###Fiddle By URL
Perhaps youâ€™ve come across a fiddle you want to embed, but havenâ€™t set up the user yet. No problem. With the FIddle By URL option, you can insert a fiddle simply by providing the URL.
Whether you need to increase the height of the iFrame, or tweak the â€œtabsâ€� that are included in the fiddle, there are a lot of reasons you might want to edit the properties of a fiddle that youâ€™ve already embedded. Fortunately, this is very simple to do. In the content editor, simply right-click on the fiddle youâ€™d like to edit. In the context menu that appears, you should see a â€œEdit Fiddleâ€� option at the top. Once you click this option, a configuration window will be displayed, allowing you easily modify the properties of the fiddle.
$ box install contentbox-jsFiddle