In this tutorial you will learn how to configure KTML 4 to load with the default font type and size that you need. This is useful if you need to have a certain font for the content, and you want to relieve the users from having to change it every time before starting to edit content.
Changing the default font for a KTML 4 control is done by adding a few lines to the code that sets its properties. Before modifying it, make sure that you have a fully functional page (e.g. .php, .asp file etc.) with the KTML 4 control applied - you can apply it to the page either in Dreamweaver, Visual Studio or manually, from the standalone package.
To set the default font, follow the next steps:
Open the page file on which the KTML 4 control to change exists, in a text editor (it can even be the Code view in Dreamweaver).
Locate the control definition section. It should look like the following:
script type="text/javascript">
ktml1_config = {
"width": <?php echo $sizex ?>,
"height": <?php echo $sizey ?>,
"show_toolbar": 'load',
"show_pi": true,
"background_color": "#ffffff",
"strip_server_location": false,
"auto_focus": true,
"autolink": true,
"module_props": { },
"buttons": [
[1, "standard", ["cut", "copy", "paste", "undo", "redo", "find_replace", "toggle_visible", "spellcheck", "toggle_editmode", "help", "about"]],
[1, "formatting", ["bold", "italic", "underline", "superscript", "subscript", "align_left", "align_center", "align_right", "align_justify", "numbered_list","bulleted_list", "indent", "outdent", "foreground_color", "background_color"]],
[2, "styles", ["heading_list", "style_list", "fonttype_list", "fontsize_list", "clean_menu"]],
[2, "insert", ["hyperlink_picker", "insert_anchor", "insert_table", "insert_image", "insert_file", "insert_template", "horizontal_rule", "insert_character"]],
[3, "form", ["insert_form", "insert_textfield", "insert_textarea", "insert_button", "insert_checkbox", "insert_radiobutton", "insert_listmenu", "insert_filefield", "insert_hiddenfield", "insert_fieldset", "insert_label"]]
]
};
Note 1: If you have more than one control on page, the name ktml1_config might be different.
Note 2: The configuration options depend on the options you selected when adding the control to the page.
You have to add two new properties and their respective values. These are:
"font_family": "font family value" - this sets the font type to use.
"font_size":"xxpx" - this sets the font size in pixels.
Add the two properties after one of the existing entries - e.g. after the background_color. Do not forget to add a comma after each property value. The configuration section will look like the following:
script type="text/javascript">
ktml1_config = {
"width": <?php echo $sizex ?>,
"height": <?php echo $sizey ?>,
"show_toolbar": 'load',
"show_pi": true,
"background_color": "#ffffff",
"font_family": "Arial, Helvetica, Sans Serif",
"font_size": "20px",
"strip_server_location": false,
"auto_focus": true,
"autolink": true,
"module_props": { },
"buttons": [
[1, "standard", ["cut", "copy", "paste", "undo", "redo", "find_replace", "toggle_visible", "spellcheck", "toggle_editmode", "help", "about"]],
[1, "formatting", ["bold", "italic", "underline", "superscript", "subscript", "align_left", "align_center", "align_right", "align_justify", "numbered_list","bulleted_list", "indent", "outdent", "foreground_color", "background_color"]],
[2, "styles", ["heading_list", "style_list", "fonttype_list", "fontsize_list", "clean_menu"]],
[2, "insert", ["hyperlink_picker", "insert_anchor", "insert_table", "insert_image", "insert_file", "insert_template", "horizontal_rule", "insert_character"]],
[3, "form", ["insert_form", "insert_textfield", "insert_textarea", "insert_button", "insert_checkbox", "insert_radiobutton", "insert_listmenu", "insert_filefield", "insert_hiddenfield", "insert_fieldset", "insert_label"]]
]
};
Save the file and upload it to the server if needed.
To test if the default font has been changed, load the page in a browser. Without selecting anything you should start typing with the specified font properties:
Note that the font is set to the Default option, and so is the size.