View on generated code for ColdFusion

In this topic you can get a look at the code that is generated for ColdFusion when using KTML 4 to replace a text field inside a form. The textfield name is left at its default value - textfield. The code added to the page by the extension is as follows:

  1. First, the KTML 4 server-side class is included in the current page:

    <cfinclude template="includes/ktm/ktml4.cfm">
     

  2. Next lines to load the JavaScript files that make up the editor, as well as the style sheet are added in the <head> section of the page:

    <script src="includes/common/js/base.js" type="text/javascript"></script>
    <script src="includes/common/js/utility.js" type="text/javascript"></script>
    <script src="includes/ktm/core/ktml.js" type="text/javascript"></script>
    <script src="includes/resources/ktml.js" type="text/javascript"></script>
    <link href="includes/ktm/core/styles/ktml.css" rel="stylesheet" type="text/css" media="all" />
     

  3. Another script sets the basic initial editor parameters:

    <script type="text/javascript">
    ktml_init_object = {
    "debugger_params": false,
    "path": "includes/ktm/",
    "server": "cfm"
    };
    </script>
     

  4. The particular editor configuration is set within another script tag, inside the <head> section:

    <script type="text/javascript">
    textfield_config = {
    "width": 450,
    "height": 350,
    "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", "help"]],
    [1, "formatting", ["bold", "italic", "underline", "superscript", "subscript", "align_left", "align_center", "align_right", "align_justify", "numbered_list", "bulleted_list", "outdent", "indent", "foreground_color", "background_color"]],
    [2, "styles", ["heading_list", "style_list", "fonttype_list", "fontsize_list", "clean_menu"]],
    [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"]]
    ]
    };
    <cfscript>
    ktml_textfield = Request.KTML4_CreateObject("ktml4");
    ktml_textfield.init("textfield");
    ktml_textfield.setModuleProperty("filebrowser", "AllowedModule", "true", false);
    ktml_textfield.setModuleProperty("file", "UploadFolder", "uploads/files/", false);
    ktml_textfield.setModuleProperty("file", "UploadFolderUrl", "uploads/files/", true);
    ktml_textfield.setModuleProperty("media", "UploadFolder", "uploads/media/", false);
    ktml_textfield.setModuleProperty("media", "UploadFolderUrl", "uploads/media/", true);
    ktml_textfield.setModuleProperty("file", "AllowedFileTypes", "doc, pdf, csv, xls, rtf, sxw, odt", true);
    ktml_textfield.setModuleProperty("media", "AllowedFileTypes", "bmp, mov, mpg, mp3, avi, mpeg, swf, wmv, jpg, jpeg, gif, png", true);
    ktml_textfield.setModuleProperty("filebrowser", "MaxFileSize", "1024", true);
    ktml_textfield.setModuleProperty("filebrowser", "RejectedFolders", "", false);
    ktml_textfield.setModuleProperty("templates", "AllowedModule", "true", false);
    ktml_textfield.setModuleProperty("templates", "UploadFolder", "uploads/templates/", false);
    ktml_textfield.setModuleProperty("xhtml", "AllowedModule", "true", false);
    ktml_textfield.setModuleProperty("xhtml", "xhtml_view_source", "true", true);
    ktml_textfield.setModuleProperty("xhtml", "xhtml_save", "true", true);
    ktml_textfield.setModuleProperty("spellchecker", "AllowedModule", "true", false);
    ktml_textfield.setModuleProperty("css", "PathToStyle", "includes/ktm/styles/KT_styles.css", true);
    ktml_textfield.setModuleProperty("hyperlink_browser", "ServiceProvider", "includes/ktm/hyperlink_service.cfm", true);
    ktml_textfield.Execute();
    </cfscript>
    </script>
     

  5. The last lines of code added to the page are palced right after the element to replace and create a new instance of the KTML control:

    <script type="text/javascript">
    // KTML4 Object
    ktml_textfield = new ktml("textfield");
    </script>
     

For more details on what each property set by these scripts represents, see the Manual installation on ColdFusion topic.