| |
| |
In this tutorial you will learn how to replace the default text editor for WordPress with the KTML4 online HTML editor. WordPress is a free Blog tool and Weblog platform. It allows users create content to publish online using a basic textarea and some HTML tags.
In order to follow this tutorial you need:
The WordPress package. You can download a free copy here.
The KTML4 zip file with the editor sources. You can download it here [link: download site].
Some knowledge of PHP and Javascript is recommended, but not mandatory. All code is provided.
A text editor.
The files you will create or modify during this tutorial can also be found in the downloaded package, inside the /documentation/CMS-Integration/Wordpress/ 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.
WordPress uses a plugin system to enable the use of 3rd party bits of code. A plugin is made up of a php file, which has a well-defined structure, and optionally, one or more folders to accommodate any required files. After such a plugin has been created, you can enable or disable it from the WordPress administration section.
To create a new plugin for WordPress which replaces the default textarea with the KTML4 online editor, follow the next steps:
Open the <site_root>\wp-content\plugins\ folder with a file explorer.
Note: Replace <site_root> with the root folder of the Wordpress installation.
Create a new folder named ktml. Unzip the includes folder and its contents from the downloaded package in the newly created folder.
In the <site_root>\wp-content\plugins\ folder create a new file named ktml.php. This file will contain the code that registers KTML4 to the particular actions.
Each plugin must define a header which identifies the name, URL, author and description. This block must be the first in the ktml.php file. Copy and paste the code below:
<?php
/*
Plugin Name: KTML4
Plugin URI: http://www.interaktonline.com/KTML4/
Description: Replaces the editing textarea with a WYSIWYG editor
Version: 1.0
Author: InterAKT Online
Author URI: http://www.interaktonline.com/
*/
The file body contains the association between the calls made by wordpress, and the plugin functions to execute for each, as well as the actual function definitions. The calls associate a predefined action with a function to be executed. You have to define the functions, and then add the lies that compose the calls:
add_action('wp_head', 'wp_ktml_insert_head') - this call is made in the <head> section of an administrative page, and loads the editor's custom Cascading Style Sheets file. For this tutorial, the KTML4 editor will use the default KT_styles.css file.
add_action('admin_head', 'admin_ktml_insert_head') - this call is executed when loading an administrative page's <head> section, and loads the required Javascript files and eventual style sheets.
add_action('simple_edit_form', 'ktml_insert') - this call is executed when the simple post edit form is loaded, after the content field is displayed.
add_action('edit_form_advanced', 'ktml_insert') - this call is executed when loading an advanced form to edit content. This form contains multimple options before and after the content form field. The call is made after loading the content field.
add_action('edit_page_form', 'ktml_insert') - this call is executed when creating a new site page - different from a Blog post.
First you must add the code that defines the functions used in the WordPress calls.
The first function is wp_ktml_insert_head. This function creates a link tag in the <head> section of the page that calls it, including the CSS file for the editor. Copy and paste the code below in the ktml.php file, after the existing content:
function wp_ktml_insert_head() {
$siteurl = get_settings('siteurl');
$ktml_plugin_path = $siteurl . '/wp-content/plugins/ktml/';
echo '
<link href="'.$ktml_plugin_path.'includes/ktm/styles/KT_styles.css" rel="stylesheet" type="text/css">
';
}
The next function is the admin_ktml_insert_head. This function adds <script> tags in the <head> section of the page that calls it to include the editor's required Javascript files and to initialize the editor's default properties. The last thing is creating a function that removes the default WordPress tag buttons:
function admin_ktml_insert_head() {
$siteurl = get_settings('siteurl');
$ktml_plugin_path = $siteurl . '/wp-content/plugins/ktml/';
echo '
<script src="'.$ktml_plugin_path.'includes/common/js/base.js" type="text/javascript"></script>
<script src="'.$ktml_plugin_path.'includes/common/js/utility.js" type="text/javascript"></script>
<script src="'.$ktml_plugin_path.'includes/ktm/core/ktml.js" type="text/javascript"></script>
<script src="'.$ktml_plugin_path.'includes/resources/ktml.js" type="text/javascript"></script>
<script src="'.$ktml_plugin_path.'includes/ktm/core/modules.js" type="text/javascript"></script>
<link href="'.$ktml_plugin_path.'includes/ktm/core/styles/ktml.css" rel="stylesheet" type="text/css">
<script>
ktml_init_object = {
"debugger_params": false,
"path": "../wp-content/plugins/ktml/includes/ktm/",
"server": "php"
};
</script>
<script>
// removes quicktags
function remove_quicktags() {
var el = document.getElementById("quicktags");
if (el) {
el.innerHTML = "";
el.style.display = "none";
}
}
</script>
';
}
The last function is ktml_insert which creates an instance of the KTML4 Javascript and PHP object and adds it to the page. Copy and paste the code below in the ktml.php file to create this function:
function ktml_insert() {
$siteurl = get_settings('siteurl');
$ktml_plugin_path = $siteurl . '/wp-content/plugins/ktml/';
$field = 'content';
echo ' <script>'.$field.'_config = {
width: 680,
height: 500,
show_toolbar: "load",
show_pi: true,
background_color: "#ffffff",
strip_server_location: true,
auto_focus: true,
autolink: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"]]
]
}';
require_once(ABSPATH . 'wp-content/plugins/ktml/includes/ktm/ktml4.php');
$ktml4_obj1 = new ktml4($field, "../wp-content/plugins/ktml/", dirname(realpath(__FILE__)));
$ktml_obj1->setModuleProperty("filebrowser", "AllowedModule", "true", false);
$ktml_obj1->setModuleProperty("filebrowser", "MaxFileSize", "2000", true);
$ktml_obj1->setModuleProperty("filebrowser", "RejectedFolders", ".svn,.thumbnails", false);
$ktml_obj1->setModuleProperty("file", "UploadFolder", "uploads/files/", false);
$ktml_obj1->setModuleProperty("file", "UploadFolderUrl", "uploads/files/", true);
$ktml_obj1->setModuleProperty("file", "AllowedFileTypes", "doc,pdf,txt", true);
$ktml_obj1->setModuleProperty("media", "UploadFolder", "uploads/media/", false);
$ktml_obj1->setModuleProperty("media", "UploadFolderUrl", "uploads/media/", true);
$ktml_obj1->setModuleProperty("media", "AllowedFileTypes", "bmp,mov,mpg,avi,mpeg,swf,wmv,jpg,jpeg,gif,png", true);
$ktml_obj1->setModuleProperty("templates", "AllowedModule", "true", false);
$ktml_obj1->setModuleProperty("templates", "UploadFolder", "uploads/templates/", false);
$ktml_obj1->setModuleProperty("xhtml", "AllowedModule", "true", false);
$ktml_obj1->setModuleProperty("xhtml", "xhtml_view_source", "true", true);
$ktml_obj1->setModuleProperty("xhtml", "xhtml_save", "true", true);
$ktml_obj1->setModuleProperty("spellchecker", "AllowedModule", "true", false);
$ktml_obj1->setModuleProperty("css", "PathToStyle", "includes/ktm/styles/KT_styles.css", true);
$ktml_obj1->setModuleProperty("hyperlink_browser", "ServiceProvider", "includes/ktm/hyperlink_service.php", true);
$ktml_obj1->setModuleProperty("date", "AllowedModule", "true", false);
$ktml_obj1->Execute();
echo '</script>';
echo ' <script> ktml_'.$field.' = new ktml("'.$field.'"); remove_quicktags();</script>';
}
After defining all functions to use you must also add the callbacks that associate the default actions with the custom functions. Create a new line after the last added code, and paste the following code:
add_action('simple_edit_form', 'ktml_insert');
add_action('edit_form_advanced', 'ktml_insert');
add_action('edit_page_form', 'ktml_insert');
add_action('wp_head', 'wp_ktml_insert_head');
add_action('admin_head', 'admin_ktml_insert_head');
Add the closing ?> PHP tag and save the file. The plugin files have been completely created.
After the plugin has been defined, it can be accessed and enabled from within WordPress. If you do not specifically enable the plugin, you will not notice any changes. To enable it, you must:
First load the wp-login.php page in a browser (in the browser's address bar you must enter the complete URL to where WordPress is installed). In the login form enter the administrator's credentials:
After the administrative page loads, from the menu select the Plugins entry:
The KTML4 plugin is displayed in the list. To use it, click the Activate link next to it:
The KTML4 plugin will be colored green, and the Activate link will change into Deactivate.
To check whether the plugin works as intended, from the menu select the Write option:
The page will display the KTML4 editor, and you can enter some text and format it as you like, using the editor's features.
If you want to find out more regarding KTML4 and WordPress plugins, check out these links:
The WordPress plugin API (Application Programming Interface).