| |
| |
In this tutorial you will learn how to integrate the KTML 4 online HTML editor into the FarCry content management system, running on ColdFusion servers.
The files you will create or modify during this tutorial can also be found in the downloaded package, inside the /documentation/CMS-Integration/FarCry/ 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.
In order to follow this tutorial you need:
The FarCry content management system files. You can download a free copy here.
The KTML 4 zip file with the editor sources. You can download it here [link: download site].
Some knowledge of ColdFusion and Javascript is recommended, but not mandatory.
A text editor.
In order to install KTML 4 as a rich text editor for the content management system, you must add the required files to the FarCry folder structure, and then define a new entry for it in the configuration files. Follow the instructions below to do so:
Open the <site_root>\farcry_core\admin\includes\lib folder.
Note: Replace <site_root> with the root folder of the FarCry CMS installation.
Create a new folder named ktml. Unzip the downloaded KTML 4 files into this folder.
The rich text editor code is loaded based on the name entered in the FarCry administrative section. The code to load is selected based on the name inside the <site_root>\farcry_core\tags\widgets\richTextEditor.cfm file. You will have to edit this file and add a new entry for the KTML 4 editor. Open the file in a text editor.
Locate the block where an WYSIWYG (What You See Is What You Get) editor is selected for use (<cfswitch expression="#application.config.general.richTextEditor#">) and add this code inside it:
<cfcase value="ktml">
<cfsavecontent variable="ktml_content">
<cfoutput>
<script src="#application.url.farcry#/includes/lib/ktml/includes/common/js/base.js" type="text/javascript"></script>
<script src="#application.url.farcry#/includes/lib/ktml/includes/common/js/utility.js" type="text/javascript"></script>
<script src="#application.url.farcry#/includes/lib/ktml/includes/ktm/core/ktml.js" type="text/javascript"></script>
<script src="#application.url.farcry#/includes/lib/ktml/includes/resources/ktml.js" type="text/javascript"></script>
<script src="#application.url.farcry#/includes/lib/ktml/includes/ktm/core/modules.js" type="text/javascript"></script>
<link href="#application.url.farcry#/includes/lib/ktml/includes/ktm/core/styles/ktml.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
ktml_init_object = {
'debugger_params': false,
'path': "../includes/lib/ktml/includes/ktm/",
'server': "cfm"
};
</script>
<script type="text/javascript">
#attributes.textareaname#_config = {
width: 700,
height: 500,
show_toolbar: "load",
show_pi: true,
background_color: '##ffffff',
strip_server_location: false,
auto_focus: true,
module_props: { },
buttons: [
[1, "standard", ["cut", "copy", "paste", "undo", "redo", "find_replace", "toggle_visible", "spellcheck", "toggle_editmode", "toggle_fullscreen", "help"]],
[1, "formatting", ["bold", "italic", "underline", "align_left", "align_center", "align_right", "align_justify", "numbered_list", "bulleted_list", "outdent", "indent", "clean_menu", "foreground_color", "background_color", "superscript", "subscript"]],
[2, "styles", ["heading_list", "style_list", "fonttype_list", "fontsize_list"]],
[2, "insert", ["insert_link", "insert_anchor", "insert_table", "insert_image", "insert_file", "insert_template", "horizontal_rule", "insert_character"]],
[3, "form", ["insert_form", "insert_textfield", "insert_hiddenfield", "insert_textarea", "insert_checkbox", "insert_radiobutton", "insert_listmenu", "insert_filefield", "insert_button", "insert_label", "insert_fieldset"]]
]
}
<cfinclude template="/farcry/farcry_core/admin/includes/lib/ktml/includes/ktm/ktml4.cfm">
<cfscript>
ktml4_obj1 = Request.KTML4_CreateObject("ktml4");
ktml4_obj1.init("ktml1");
ktml4_obj1.setModuleProperty("filebrowser", "AllowedModule", "true", false);
ktml4_obj1.setModuleProperty("filebrowser", "MaxFileSize", "2000", true);
ktml4_obj1.setModuleProperty("filebrowser", "RejectedFolders", ".svn,.thumbnails", false);
ktml4_obj1.setModuleProperty("file", "UploadFolder", "uploads/files/", false);
ktml4_obj1.setModuleProperty("file", "UploadFolderUrl", "uploads/files/", true);
ktml4_obj1.setModuleProperty("file", "AllowedFileTypes", "doc, pdf, txt", true);
ktml4_obj1.setModuleProperty("media", "UploadFolder", "uploads/media/", false);
ktml4_obj1.setModuleProperty("media", "UploadFolderUrl", "uploads/media/", true);
ktml4_obj1.setModuleProperty("media", "AllowedFileTypes", "bmp,mov,mpg,avi,mpeg,swf,wmv,jpg,jpeg,gif,png", true);
ktml4_obj1.setModuleProperty("templates", "AllowedModule", "true", false);
ktml4_obj1.setModuleProperty("templates", "UploadFolder", "uploads/templates/", false);
ktml4_obj1.setModuleProperty("xhtml", "AllowedModule", "true", false);
ktml4_obj1.setModuleProperty("xhtml", "xhtml_view_source", "true", true);
ktml4_obj1.setModuleProperty("xhtml", "xhtml_save", "true", true);
ktml4_obj1.setModuleProperty("spellchecker", "AllowedModule", "true", false);
ktml4_obj1.setModuleProperty("css", "PathToStyle", "includes/ktm/styles/KT_styles.css", true);
ktml4_obj1.setModuleProperty("hyperlink_browser", "ServiceProvider", "includes/ktm/hyperlink_service.cfm", true);
ktml4_obj1.Execute();
</cfscript>
</script>
</cfoutput>
</cfsavecontent>
<cfhtmlhead text="#ktml_content#">
<cfoutput>
<input type="hidden" id="#attributes.textareaname#" name="#attributes.textareaname#" value="#attributes.value#" />
<script>
ktml_#attributes.textareaname# = new ktml('#attributes.textareaname#');
</script>
</cfoutput>
</cfcase>
The code above includes all the required Cascading Style Sheet files and Javscript files, creates a new instance of the KTML 4 editor and sets the default properties for it (width, height, allowed file types, etc). You can change these values by modifying their values in the code.
Save the file.
Next you have to enable the editor in FarCry. To do so, follow the next steps:
Open the FarCry administration page. It will contain the login form where you have to enter the administrator credentials:
After the page loads, you have to open the Admin section. Click on its tab to load it:
From the left pane menu select the Config Files category:
From the list of links that are displayed, click on the general link to define a new editor:
In the form that loads replace the existing value in the RICHTEXTEDITOR text field with ktml:
Click the Update config button at the page button to apply the changes:
Now, if you try and edit some content (News, events, links, etc), the default textarea will be replaced with the KTML editor.