How to Upgrade or Replace ECShop FckEditor with CKEditor

           After introducing JQuery during a secondary development of ECShop 2.7.1, FckEditor kept malfunctioning. Clicking any function button on FckEditor would only bring up a "Cancel" button, with everything else covered by a "div" layer overlay. The only fix was to refresh and start over. Recently, I had the opportunity to do some SEO optimization, which requires frequent publishing of advertorials, so it became necessary to fix FckEditor.

I searched online and found that FckEditor has already been upgraded. The version used when editing this article is CKEditor 3.5.2.

Download CKEditor – CKEditor 3.5.2

Extract the files into the includes directory of ECShop.

Search for all strings in ECShop’s admin directory: replace "fckeditor" with "ckeditor", and "FCKEditor" with "CKEditor". (Note: perform case-sensitive replacements separately.)

Modify the function create_html_editor in admin/includes/lib_main.php:

function create_html_editor($input_name, $input_value = '')
{
    global $smarty;

    //$editor = new CKeditor($input_name);
    //$editor->BasePath   = '../includes/ckeditor/';
    //$editor->ToolbarSet = 'Normal';
    //$editor->Width      = '100%';
    //$editor->Height     = '320';
    //$editor->Value      = $input_value;
    //$CKeditor = $editor->CreateHtml();  // The new version does not have this function
 $CKEditor = new CKEditor();
 $CKEditor->returnOutput = true;  // This line is a must, otherwise the editor() function below will output the CKEditor object directly at the top of the page.
  $code = $CKEditor->editor($input_name, $input_value);
 
    $smarty->assign('CKeditor', $code);
}

Also modify the else code block at lines 204~207 in admin/templates/article_info.htm

            else
            {
                tables[i].style.display = "none";
            }
Change it to

            else
            {
                var tblId = tables[i].id.match(/-table$/);
  
                if (tblId == "-table")
                {
                    tables[i].style.display = "none";
                }
            }

At this point, the migration is basically complete. I am also new to CKEditor, so if there are any issues with the method above, feel free to leave a comment to let me know!!!

Leave a Comment

Your email address will not be published.