Successful integration of CKEditor
The default HTMLArea editor of Moodle 1.9.x will work smoothly on IE and Gecko (Mozilla) browser but in it wasn’t so in my case. I use Google chrome and Firefox browsers for all my needs and I required Moodle to work seamlessly in all versions of IE starting from 6. Until recently, I was thinking that my HTMLArea would work in all IE versions; I didn't give it much thought and continued working with the content creation. The day before yesterday when I was working with IE specific template issues and had arrived at some solution, I found the HTMLArea failing to render in the edit pages when testing it with IE7 and IE8.
I know that Moodle 2.0 will have TinyMCE as its default editor and that we can also use TinyMCE within Moodle 1.9.x with some code modifications, but I wanted to use CKEditor because of its elegance and list of features. While googling for CKEditor, I found this link (http://docs.moodle.org/en/fck_editor) which is used for integrating older version of CKEditor with 1.9.x and for 1.8.x. Though this document was useful it had some information which needs modification in order to make CKEditor work.
Steps to installation
1. In moodle/lib/weblib.php replace the print_textarea function with the one provided.
2. Download CKEditor to Moodle/lib/editor (be sure to name the folder with the editor as "ckeditor"
3. Make sure in the print_textarea function that the path to ckeditor.js is correct If there is a change in your file structure
Code
function print_textarea( $usehtmleditor , $rows , $cols , $width , $height , $name , $value = '' , $courseid = 0 , $return = false , $id = '' ) {
/// $width and height are legacy fields and no longer used as pixels like they used to be.
/// However, you can set them to zero to override the mincols and minrows values below.
global $CFG , $COURSE , $HTTPSPAGEREQUIRED ;
static $scriptcount = 0 ; // For loading the htmlarea script only once.
$mincols = 65 ;
$minrows = 10 ;
$str = '' ;
if ( $id === '' ) {
$id = 'edit-' . $name ;
}
if ( empty ( $CFG ->editorsrc) ) { // for backward compatibility.
if ( empty ( $courseid )) {
$courseid = $COURSE ->id;
}
if ( $usehtmleditor ) {
if (! empty ( $courseid ) and has_capability( 'moodle/course:managefiles' , get_context_instance(CONTEXT_COURSE, $courseid ))) {
$httpsrequired = empty ( $HTTPSPAGEREQUIRED ) ? '' : '&httpsrequired=1' ;
// needed for course file area browsing in image insert plugin
$str .= ( $scriptcount < 1 ) ? '<script type="text/javascript" src="' .
$CFG ->httpswwwroot . '/lib/editor/ckeditor/ckeditor.js"></script>' . "\n" : '' ;
} else {
$httpsrequired = empty ( $HTTPSPAGEREQUIRED ) ? '' : '?httpsrequired=1' ;
$str .= ( $scriptcount < 1 ) ? '<script type="text/javascript" src="' .
$CFG ->httpswwwroot . '/lib/editor/ckeditor/ckeditor.js"></script>' . "\n" : '' ;
}
$str .= ( $scriptcount < 1 ) ? '<script type="text/javascript" src="' .
$CFG ->httpswwwroot . '/lib/editor/ckeditor/ckeditor.js"></script>' . "\n" : '' ;
$scriptcount ++;
$str .= '<script type="text/javascript" src="' . $CFG ->wwwroot . '/lib/editor/ckeditor/fckeditor.js"></script>' ;
if ( $height ) { // Usually with legacy calls
if ( $rows < $minrows ) {
$rows = $minrows ;
}
}
if ( $width ) { // Usually with legacy calls
if ( $cols < $mincols ) {
$cols = $mincols ;
}
}
}
}
$str .= '<textarea id="' . $id . '" name="' . $name . '" rows="' . $rows . '" cols="' . $cols . '">' ;
if ( $usehtmleditor ) {
$str .= htmlspecialchars( $value ); // needed for editing of cleaned text!
} else {
$str .= s( $value );
}
$str .= '</textarea>' . "\n" ;
$str .= " <script type=\"text/javascript\">
//<![CDATA[
CKEDITOR.replace( '" . $id . "',
{
skin : 'kama',
width : 600
});
//]]>
</script> " ;
if ( $return ) {
return $str ;
}
echo $str ;
}
I have specified the CKEditor width to be 600, in order to fix an IE6 specific bug related to Width of the Editor.
Try this code if you need CKEditor and let me know whether it’s working smoothly in your implementation.
Regards,
Carrera PHP
