In this topic you will learn how to replace a textbox, textarea or hidden field with the KTML 4 editor. The installation process has two steps:
Set up the files and libraries needed by KTML.
Create an instance of the KTML object and define its properties.
The first action to take is to copy the files required by KTML into your site structure, and modify the Web.config file to define the libraries to use:
Unpack the downloaded zip file containing the KTML sources to a folder of choice.
Copy the includes and bin folders and their sub-folders and files into your site root. You will have to upload these folders to the web server with the entire site in order for the editor to work.
Open the <site_root>\Web.Config file in a text editor. You will have to add some new keys to set the library preferences. You will have to add these keys inside a new <appsettings> section. Create this now.
The first key to add defines the preferred image
library to use. KTML can use two libraries: the internal .Net image processing
library (which is the default) and ImageMagick. If you want to use ImageMagick
as image processing library, you have to add this key.
<add key="KT_prefered_image_lib" value="imagemagick"/>
If you have defined a preferred image gallery,
you must also set the path to the executable file:
<add key="KT_prefered_imagemagick_path" value="C:\Program
Files\ImageMagick"/>
Next add a key defining the path to the HTML Tidy
executable file. If it is not specified, XHTML and code cleaning features
will not be available:
<add key="KT_prefered_tidy_path" value="c:\windows"/>
Note: replace c:\windows with the
actual path on your server where HTML Tidy is installed. If you do not
have HTML Tidy installed, you
will not be able to use some of the features. To learn more about the
XHTML supported set of tags check
out the reference manual.
The last key to add defines the path to the aspell
executable. Aspell is used to provide spellchecking fatures to the editor.
If you do not set this path, spellchecking will not be available:
<add key="KT_prefered_aspell_path" value="c:\Program
Files\Aspell\bin"/>
Note: Replace all of the above paths with the actual ones on the server where the application
will reside.
Some KTML operations depend on having a session variable available to store the object ID. If using the IntProc method of storing session variables, upon performing any file operations you will get the error that the Module Security failed. To avid this, in the web.config file set the sessionstate mode to StateServer.
Save the file to apply the changes and close it.
Now that all files are in place, and the library options have been defined, you can move on and edit the page to load the KTML editor instead of a textbox.
To replace one of the existing form elements on page with the KTML 4 editor you must:
First add the Assembly registration statement
for the KTML control. Add the following line on top of the page, after
the one that sets the page language:
<%@ Register Assembly="InterAKT.KTML4" Namespace="InterAKT.WebControls"
TagPrefix="iakt" %>
Next add the tag that adds the KTML control to
the page.
<iakt:ktml id="Ktml1" runat="server"></iakt:ktml>
If you want to use the KTML editor as replacement
for another form element, you have to set the the ControlToBindTo property.
This specifies the ID of the element which will be replaced by the editor.
Inside the tag added above, add a new attribute: ControlToBindTo and for
its value enter the ID of the element (e.g. content). The new tag will
look like:
<iakt:ktml id="Ktml1" runat="server" controltobindto="content"></iakt:ktml>
Save the page. All other properties have default values, and if you are looking for a quick configuration, you are done.
Each KTML control property is defined by adding a new attribute or tag inside the main <wdg:ktml4> tag. The properties that can be set are:
AutoFocus - select if the KTML 4 editor will receive focus when the page loads. This way, when the page loads, the cursor will be placed inside the editor window by default.
BackgroundColor - enter the code of the color to use for the editor window background.
SaveCodeAsXHTML- specify whether the saved code will be XHTML compliant.
ViewCodeAsXHTML- this determines whether code is displayed XHTML - compliant when switching from design to source view. It can be true or false
CSSFile - enter the path to the Cascading Style Sheets file to use within the editor. This is defined relative to the current document, and you can use the ~(tilde) sign to refer to the site root. By default, the styles used in the editor are stored in the includes/ktm/styles/KT_styles.css file.
Height - it is added as an attribute to the tag, and has a value in pixels. This will be the height of the editor, when rendered on the page:
ShowPropertyInspector - decide whether to display property inspectors for some of the HTML tags.
ShowToolbar - When to display the editor toolbars. This property can take the values:
load - the toolbar is displayed when the editor loads.
focus - the toolbar is displayed when the editor receives application focus (the cursor is placed in the editor).
manual - the toolbar is not displayed at all. The user can decide to display the toolbar by clicking on the sliding arrow.
TemplatesFolder - set the path to the folder where template files will be stored after upload.
UploadFolder - set the path to the folder where files will be stored after upload.
UploadFolderUrl - the browser address used to access the root folder where uploaded files are stored. If you are not using any redirect methods that would require a different URL to access the files, you can set this property to the same value as the UploadFolder, or leave it blank (the two are by default set equal)
Width - defined as an attribute to the KTML 4 tag, specifies the width, in pixels, for the editor window.
AllowedDocumentTypes - specify the extensions allowed for upload for document type files.
HideFolders - specify which folders will be hidden from the user when using the Remote File Browser.
MaximumFileSize - the maximum allowed size for a file to be uploaded.
StripServerLocation - select whether to display the full path to uploaded files or not
Aside these properties you can also define the toolbars and their buttons. This property is not set as an attribute, but as a separate set of tags inside the main ktml4 tag. The format is as shown below (for one toolbar with a subset of buttons):
<Toolbars>
<iakt:Toolbar
Name="standard" Position="1">
<Buttons>
<iakt:Button
Name="cut" />
<iakt:Button
Name="copy" />
<iakt:Button
Name="paste" />
<iakt:Button
Name="undo" />
<iakt:Button
Name="redo" />
<iakt:Button
Name="spell_check" />
<iakt:Button
Name="find_replace" />
</Buttons>
</iakt:Toolbar>
</Toolbars>
If you do not add this set of tags to the main ktml4 tag, then all toolbars with all buttons will be visible.