Integrate KTML 4 into Nukedit (ASP VBScript)

In this tutorial you will learn how to replace the default HTML editor from the Nukeedit Content Management System with the KTML4 online HTML editor. All pages where the default editor appeared will use KTML4 instead.

Prerequisites

In order to follow this tutorial you need:

The Nukedit content management system installed. You can download the Nukedit application here.
The KTML4 zip file with the editor sources. You can download it here [link: download site].
Some knowledge of ASP VBScript and Javascript is recommended, but not mandatory.
A text editor.

Integration

By default, Nukeedit uses the HTMLArea web editor. To replace it with KTML4, you must follow the next steps:

Unzip the three folders -common, ktm and resources - from the downloaded KTML4 archive into the <site_root>\includes\ folder.\
Note: Replace <site_root> with the root folder of the Nukedit CMS installation.
The page that controls the text editor used throughout the content management system is <site_root>\InplaceEditor\InplaceEdit.asp.
Open the <ste_root>\InplaceEditor\InplaceEdit.asp file in a text editor. You have to change this file to use KTML4.
By default, the first line contains only an opening ASP tag <% . Create a new line before this one and enter:



This will include the required KTML4 class file.
Next you will have to remove the code block that loads the HTMLArea editor. Locate the line containing the following code:

<script language="javascript" src="<%=site%>InplaceEditor/toolbar.js"></script>
You must remove all code that starts on the next line and ends before the <form> tag. Select it and press the Delete key.
Next you must add the new code blocks that will load KTML4. The code needed can be divided in 5 distinct blocks, by functionality:
- The first block is composed of Javascript include statements, to load the KTML4 files.
- The second block is made up of Javascript calls to the ktml_init object, to initialize the control
- The third block configures the KTML4 Javascript properties.
- The fourth block creates a new instance of the ASP KTML4 object, in order to set server-side related properties.
- The last block is added separately, as it control the transformation of the original form element (input, hidden or textarea) into the KTML4 control.
The following code contains the first four code blocks. Copy and paste it instead of the code you removed at step 6:

<script language=javascript>
function cancel(){
location.href=location.pathname;
}
function Save()
{
window.status = 'Saving... Please Wait';
var sReturn = "";
sReturn = getObj("idKtmlArea").value;
document.frmSavePage.pagetext.value = sReturn;
document.frmSavePage.submit();
}
</script>

<script src="<%=relPathToRoot%>includes/common/js/base.js" type="text/javascript"></script>
<script src="<%=relPathToRoot%>includes/common/js/utility.js" type="text/javascript"></script>
<script src="<%=relPathToRoot%>includes/ktm/core/ktml.js" type="text/javascript"></script>
<script src="<%=relPathToRoot%>includes/resources/ktml.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
After the form code, an orphaned <%EndIf%> code still exists. You need to remove this line as well. The code is like this (the bit to remove is bolded):

<form name=frmSavePage action="<%=site%>utilities/SaveExistingPage.asp" method="post" ID="Form2">

<input type=hidden name=pagetext ID="Hidden1" size=100>
<input type=hidden name=menuid value="<%=rsPage("menuid")%>" ID="Hidden2">
<input type=hidden name=keywords value="<%=rsPage("keywords")%>" ID="Hidden6">
<input type=hidden name=description value="<%=rsPage("description")%>" ID="Hidden7">
<input type=hidden name=contentid value="<%=rsPage("menuid")%>" ID="Hidden3">
<input type=hidden name=permissions value="<%=rsPage("permissions")%>" ID="Hidden9">
<input type=hidden name=name value="<%=rsPage("data")%>" ID="Hidden4">
<input type=hidden name="skin" value="<%=rsPage("template")%>" ID="Hidden5">
<input type=hidden name="pagetype" value="<%=pagetype%>" ID="Hidden8">
</form>
<% end if %>
Next you must replace the CloseEdit function (to transform the textarea into the KTML4 editor). Select the function code and press the Delete key to remove it. In its place, copy and paste the code below:

function CloseEdit
if(len(request("edit"))>0)then
response.write "</textarea>"
response.write "<script type=""text/javascript"" id=""idKtmlArea_defscript"">" & vbNewLine & _
"ktml_idKtmlArea = new ktml('idKtmlArea');" & vbNewLine & _
"</script>"
else
response.write "</div>"
end if

end function
Save the file, and upload the entire folder structure to a web server.

Testing the changes

After configuring the text editor, you must test it. To do so, open the Nukedit homepage and login with a valid username and password. Click the Edit button on any page, to load it in the KTML4 editor:

The page content will be displayed in the KTML4 editor, and you can change it any way you want:

The files you have created or modified during this tutorial can also be found in the downloaded package, inside the /documentation/CMS-Integration/Nukedit folder. To quickly set up your content management system to use the KTML 4 online HTML editor, simply copy the files in this folder to their respective locations.

Customize the KTML4 control

The code provided above inserts a KTML4 control with the default properties. You can customize it to better suit your pages, by editing the <Nukedit_root>\InplaceEditor\InplaceEdit.asp file:

To change the width and height for the KTML4 area rendered in page, locate the idKtmlArea_config and change “width: 600” and “height: 600” tothe desired values.
To change the default upload folder you must change the line that points to it - content/files - : [ ktml4_obj1.setModuleProperty "filebrowser", "UploadFolder", "content/files/", true ].
Image manipulation: KTML4 ASP VBScript uses either a library written in .NET framework or the Imagemagick free library. To specify which one is the preferred one open: <site_root>\ includes/common/KT_config.inc.asp and change KT_prefered_image_lib to either “.net” or “imagemagick”; for the second one, you must also set KT_prefered_imagemagick_path="[physical path to imagemagick installation folder]".
XHTML: KTML4 relies on tidy to transform the code in xhtml-complient code. You must open the <site_root>\ includes\common\KT_config.inc.asp and set KT_prefered_tidy_path=“[path to tidy.exe folder]”.
Spellchecking: KTML4 uses aspell for spell checking. You must also specify the path to the aspell folder in KT_config.inc.asp file: KT_prefered_aspell_path=”[path to aspell.exe folder]” .

E-mail:
Password:
Remember Me:

Forgot Password