Please note that CJTe Developer is now CSS & JavaScript Toolbox PLUS

 
 

CJTe Developer – Perfect Companion for CJT

You may be wondering what benefits does the Developer version give you over the free version on WordPress.org. Fair question! Read on below.
 


Features only in CJTe Developer

Editor Themes

This feature enhances CJT to include 32 professionally designed editor themes, which you can use in your editing environment. Watch the video below to get a feel for this premium feature.


Editor Toolbox

This feature gives you two very useful tool sections, from adjusting things like the editor window and font size to performing Find and Replace functions.

These two editor tool sections include:

  • Vertical Editor Toolbar
  • Editor Menu Tools

Vertical Editor Toolbar

The vertical editor toolbar allows you to do things like: change editor themes, increase the editor window size for Full-screen editing, increase or decrease the editor font size, reset the font-size, clear the editor and save the editor settings.

vertical-editor-toolbar

Editor Themes

This tool will add 32 professionally designed editor themes for you to use.
vertical-toolbar-icons

This action maximises (opens and expands) the code block to fit the browser window to allow for fullscreen editing. The icon will then change to the minimise icon, which will revert the code editor to the default mode.

Font-size Adjustment

(Maximise, Minimise, Reset)
These tools allow you to: increase the font size; decrease the font size; or reset the font-size in the code editor. Resetting the font size returns it to the default size.

Clear Editor

This tool clears everything in the editor window. It behaves the same as selecting all of the code and pressing the delete key. You would need to click the Update File button in order for the changes to be made permanently.

Save Settings

This allows you to save any value changes you have made to the main settings for the Horizontal Menu Tools (see Edit => Settings).

Editor Menu Tools

The editor menu tools allow you to do things like: Save the code as a text file, Load the text file to a code block, perform functions on the code such as Find, Find Next, Replace, Go To Line, Go To Next Error, etc. You will also find a Settings function where you can further refine the default functions and behaviours.

editor-menu-tools

There are many powerful editor tools in this menu, which you will find extremely useful. There is a great feature that allows you to Save the code inside your editor window as a text file. Whilst another allows you to Load the code from a text file into the editor window.

save-load-code-from-textfile


Code Auto Completion (CAC)

The Code Auto Completion (also known as CAC) is a feature for CJT that provides a syntax dictionary for CSS, JavaScript, PHP, and HTML allowing you to embed code automatically into the editor.
code-auto-completion

Simply click the hot key combination on your keyboard and your CAC dialog box will popup allowing you to choose from an extensive list of code syntax depending on the code editor you are currently using. In other words if you are using the CSS code editor, then the CAC will use the CSS code dictionary.

You can even start typing a few letters and launching the CAC will filter down the list based on the letters typed. Clicking the back and forward arrow keys on the letters typed will either increase or decrease the list of results respectively. We have also included a short description of code syntax where applicable.

Stacks of code snippets

No need to remember all of those script or style declarations, just start typing and let the CAC output the snippet for you. Contains hundreds of useful code snippets that will make your coding life a breeze.

new-cac2

Local variable support

Have you created your own variables but need a quick way to show them?
The CAC will output all of your local variables so you don’t need to search throughout the entire code block to figure out what you called them.

Using the CAC – How to Launch

If you are using either a Mac or a PC, the hot-key combination is Control + Space (i.e. Ctrl + Space bar). This can be achieved by holding down the Control (i.e. Ctrl) button with your little finger and then click the Space bar with your thumb.


Import Export Tool

This feature allows you to export all of your data into another website running CJT. You can export all of your code blocks, code files, script templates, and script packages with a click of a button. And with another click of a button, import them all into another website, saving you much time and effort.

export-feature

import-feature

Although the new export/import feature has been thoroughly tested, it is always a good idea to back up your database before testing any new features.


Block Widget Linker

This feature provides a solution to link code blocks to widgets that can be used in places such as sidebars and footers. Plus, it is powerful enough to include a parameters form if the code block supports it.

The best way to explain what this CJT feature does is to run through an example.

I have a script that adds a nice black and white effect on images that changes to colour once you hover over the image. I have installed and activated a CJT script plugin called CJTe Black & White Image Effect that basically creates the code block and templates needed for the script to work.

Clicking into the CJT dashboard, we can see a code block created.
block-widget-linker-codeblock

We then go into Widgets, drag a CJT Block Widget Linker across to the sidebar, and select the Black and White Effect code block shortcode.
block-widget-linker-select

The great thing about this script plugin, is that it creates a special code block, which when the shortcode is loaded, a parameters form appears, allowing you to tweak values and upload images.

block-widget-linker-photo

Once we are done, we see that the shortcode text-area is pre-populated with the selected values and an image from the parameters form.
block-widget-linker-loaded

We keep the Lock Global Assignment checkbox ticked, so it prevents the code block from executing in the normal request channel such as the header/footer of the page. This allows you to use the Assignment Panel (for the Black and White Effects code block) to specify which page/post/category the widget will appear in.

We now sit back and check out the results.

block-widget-linker-results