Wiz CMS Tutorials

Showing What's Editable Right from the Page

Video Tutorial

What is It?

This is a simple JavaScript file that you can import into your page. Once you've imported it you can call a function while passing it some data, defining areas of the page that you've made editable and giving links to their editors that will show when the user presses a specified key-combo. It does not actually make those areas editable, it is an after-the-fact tool for organizational purposes. This way a user can go to a page on their site and press the key-combo and highlighted boxes show up showing them exactly what they can edit, and clicking those boxes takes them to that bit of content's editor. It is a very useful tool for making editing extremely easy for the client! This tutorial will require at least novice JavaScript knowledge to understand.

Security

Keep in mind that this only highlights what areas of the page are editable and links to the editors. You STILL need usernames and passwords to actually edit those things once you get there! This is only a shortcut. So it changes nothing about security of the system aside from telling someone that's snooping through your code that there's a CMS back there somewhere. So in some cases people that want to totally hide the existence of a CMS from a code snooper you might not use this. But for most situations it's perfectly safe.

The Situation

To use this tool you first must have used parts of the Wiz CMS to make part of your site editable. For this example we'll pretend we have a small part of the page where we have 2 editable portions we've created. We'll pretend that the URLs to these editors are http://mysite.com/edit/first.php and http://mysite.com/edit/second.php. And we'll pretend that the places in the web page code where we've set up this dynamic content look like this:

<div id="my-content">
    <p><?php echo file_get_contents('edit/first.txt'); ?></p>
    <hr/>
    <p><?php echo file_get_contents('edit/second.txt'); ?></p>
</div>

Import The File

Obviously you need to import the JavaScript file that does these things into your page. It's in your download's EXTRA/wiz-GUI-edit/ folders and is named show-editable.js. Simply copy that JavaScript file into your site files somewhere and import it into your page. Something like this:

<script src="show-editable.js"></script>

Figure Out Selectors

You're going to use jQuery style selectors to select parts of the page to mark as editable (note, you don't need jQuery to run this file, that's just an easy way of explaining the selector process). Keep in mind that this file is making anything editable, just highlighting a box and linking to the editor. So if we point it to the parent of the editable content instead of the editable content itself that's just fine. In fact, it's usually easier. So I'm going to use the containing paragraph tags from our above example. I could write some sort of complex selector to select them...but it's much easier just to give each an id to use:

<div id="my-content">
    <p id="editable-first"><?php echo file_get_contents('edit/first.txt'); ?></p>
    <hr/>
    <p id="editable-second"><?php echo file_get_contents('edit/second.txt'); ?></p>
</div>

Now I'll be able to use the selectors '#editable-first' and #editable-second to find them.

Call the Function

Now you just need to call a function telling it to set things up. That function name is wizEditShortcuts and it takes is an array where each entry is another array where it gives the selector and URL to the editor for each editable part of the page. That sounds a bit confusing but it's actually pretty simple, here's an example:

<script>
wizEditShortcuts([
    ['#editable-first', 'http://mysite.com/edit/first.php'],
    ['#editable-second', 'http://mysite.com/edit/second.php']
]);
</script>

More Options

Now when you press the predefined key-combo (right now that's alt+ctrl+shift+1+2+3 by default) those areas of the site will get nice red boxes around them that say "edit", and when you click them they will open up the editors for their respective bit of text. A really easy way to edit the site.

But there's more options available than that. The first part of each array is the selector, the second the link to the CMS for that bit, but you can also include a 3rd and 4th for paddingY and paddingX (respectively) which will add (or in the case of negatives, subtract) size from that box in case you want to tweak how it shows up to look better. Similarly 5th and 6th values can be given to include an offsetY and offsetX (respectively) to move the box from it's original position. This allows you to control a lot about the display of these boxes. Doing this would look something like this:

<script>
wizEditShortcuts([
    ['#editable-first', 'http://mysite.com/edit/first.php', 10, 20, 5, 5],
    ['#editable-second', 'http://mysite.com/edit/second.php']
]);
</script>

Right there for the first box I added 10 pixels of vertical padding, 20 pixels of horizontal, and moved the box 5 px down and 5 px right.

Changing the Key-Combo

You can also add another argument to the function call to change the key combination required to turn on the editor. I would highly recommend requiring shift+alt at very least to make accidental turning on of the highlights very difficult (note that the key-combo doesn't work when input or textarea elements are selected anyway, so the person would literally have to be just pressing random keys while on your website anyway, so chances are low. But still, it's best to have a "hard to accidentally turn on" key combination).You would change this like so:

<script>
wizEditShortcuts([
    ['#editable-first', 'http://mysite.com/edit/first.php', 10, 20, 5, 5],
    ['#editable-second', 'http://mysite.com/edit/second.php']
], 'alt+shift+1+2');
</script>

I would also recommend sticking to numbers instead of letters, as you don't trip browser shortcuts as often that way. Basically you'll just have to experiment with combinations and see what works for you and your client. Internally it uses the keymaster.js library (it's packaged right in the .js file you imported) to process these combinations, so feel free to look that up and see more about how to type out key-combos.

That's It

That's all you need to do in order to use this neat feature. You can make all sorts of items on the page highlight an make for some really easy editing. Enjoy!

Tutorial Menu