In this tutorial you will learn how to create a page to preview the content you are editing, without saving it. The preview will be created using JavaScript and you will add a button to one of KTML's toolbars.
Before starting off in this tutorial you must have:
A working KTML control applied on a page - either from Dreamweaver, Visual Studio or manually. The steps to follow in order to create such a page can be found here.
The preview button's image - you can find it inside the downloaded package, in docs/tutorials/Extending KTML/Create preview.
A text editor.
The preview feature will not be integrated as a module, but directly on the page containing the KTML control. You will have to add JavaScript code for the function that creates the preview action and for the button creation. You will then add the button to each KTML control on the page.
To create the preview function, follow the next steps:
Copy the preview.gif file from the downloaded package, in docs/tutorials/Extending KTML/Create preview/img/ to <site_root>\includes\ktm\core\img\. This image will be displayed as the preview button.
Open the page where you have KTML applied onto with a text editor.
Locate the code that creates the KTML control,
after the textarea or hidden field definition. The code should look like
(replace ktml1 with the actual control name):
<script type="text/javascript">
//
KTML4 Object
ktml_ktml1
= new ktml('ktml1');
</script>
Right before it, add the following code block:
<script>
function previewKTML(k) {
k.save(function() {
var value = k.formElement.value;
wnd = utility.window.openWindow("ktml_preview_window", k.iframeSRC2,
window.screen.availWidth-5, window.screen.availHeight - 45);
if (wnd) {
html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
+ "\r\n";
html += '<html><head><link href="' + k.getModuleProperty("css",
"PathToStyle") + '" rel="stylesheet" type="text/css"></head><body>';
html += value;
html += '<input type="button" value="Close"
onclick="window.close()" />';
html += '</body></html>';
wnd.moveTo(-3,-3);
wnd.document.open("text/html; charset=" + k.charset);}
wnd.document.write(html);
wnd.document.close();
}
});
}
The code block above does the following:
The function has as argument the ID of the current KTML instance - the one in which the button has been pressed.
The first two lines save the content inside the KTML control to the form element - not to the database or file - and then assign the entire content into a variable - value.
The utility.window.openwindow method is called to create the browser window for the preview. The method has 4 arguments: the window ID, the file to load - this uses a property of the KTML instance to load a blank page, and the new window's height and width. In this example, the preview window is maximized.
If no errors are encountered - e.g. a pop-up blocker - a new variable is created - html - which stores the actual document to render in the browser preview window. In order for proper formatting, the html variable must contain the correct HTML syntax - a doctype, opening and closing HTML tags, link to the style sheet and the actual content.
The wnd.document.open, .write and .close block actually outputs the document.
Next you have to create a toolbar button. After
the last closing brace in the block above add the following code:
var previewButton = new ToolbarButton({
'name': 'preview',
'button_type': 'img',
'button_icon': KtmlRelativeImagePath + 'preview.gif',
'command_type': $KT_JS_STRING,
'command_string':'previewKTML(this.ktml)'
});
The code above is the standard way of creating an instance of the ToolbarButton class. The properties this call sets are:
the button name - preview - it is used when placing the button into the toolbar.
the button type - img - it will be rendered as an image.
the button icon - the path to the preview.gif file copied earlier must be absolute, and is built using the KtmlRelativeImagePath variable.
The command type - in this case, a JavaScript function.
The actual command - the function to call.
The last thing to do is add the button to the
toolbar. This is done by adding the code:
ktml_ktml1.addCustomButton(previewButton, 'toggle_fullscreen',
0);
You have to replace ktml1 with the actual name of the KTML control you have on the page. If you have more than one control on page, simply add another call as the one above. You do not need to duplicate the entire code.
Add the ending </script> tag.
Save the file and close it.
When you preview the page in the browser, next to the full screen button, the preview will be displayed as well:
Formatting, images and even inserted media will be displayed correctly:
