Kayako – Uploading Images into a Knowledgebase Article
August 25, 2011 Leave a comment
From time to time I blog on a non television issue. Namely when I solve a complex tech issue in my life.
Often the whole reason for the article is so that I can remember how to do it again later.
Kayako 4 is a huge disappointment so far. The app was clearly rushed before being completed and is missing several vital features including the ability to report on your support activity or the ability to upload images in an easy way for inclusion in knowledgebase articles.
Having solved my reporting issue by writing a series of MYSQL statements (seriously…) I have moved on to the knowledgebase.
I am going to write down what I had to do in order to make this work. The reason being, is that the directions on the forums, although complete and accurate make a few assumptions about the enduser’s level of knowledge of javascript and php.
If you want to include the filebrowser to upload images in Kayako (which uses TinyMCE) you must first download the PDW Filebrowser from here.
Once you’ve downloaded it extract it to your kayako install folder here: “__swift/thirdparty/TinyMCE/plugins/pdw_file_browser”
Then you want to edit your core.js file to allow the new file browser to be called. The core.js file is located in : “\__swift\themes\admin_default\core.js”
First backup this file.
Do a search for LoadTinyMCE and enter the red text. Note the BLUE text below is the location of your Kayako install so you’ll need to modify that part to match your site.
function LoadTinyMCE() {
if (!$(‘.tinymce’).length) {
return false;
}
$(‘.tinymce’).tinymce({
// General options
script_url : swiftpath + ‘__swift/thirdparty/TinyMCE/tiny_mce_gzip.php’,
theme : “advanced”,
plugins : “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template”,
// Theme options
theme_advanced_buttons1 : “formatselect,fontselect,fontsizeselect,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,advhr,pagebreak|,ltr,rtl,|,fullscreen”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,
// force_br_newlines : true,
force_p_newlines : true,
forced_root_block : ”,
content_css : swiftpath + ‘__swift/themes/admin_default/tinymce.css’,file_browser_callback : “filebrowser”
});
};
function filebrowser(field_name, url, type, win) {
fileBrowserURL = “/kayako/__swift/thirdparty/TinyMCE/plugins/pdw_file_browser/index.php?editor=tinymce&filter=” + type;
tinyMCE.activeEditor.windowManager.open({ title: “PDW File Browser”, url: fileBrowserURL, width: 950, height: 650, inline: 0, maximizable: 1, close_previous: 0 },{ window : win, input : field_name }
);
}
function MoveCommentReply(_commentID) {
$(‘#commentsformcontainer’).appendTo(‘#commentreplycontainer_’ + _commentID);
$(‘#commentformparentcommentid’).val(_commentID);
};
You then want to save this file and open the config file for the file browser. It is located in “/__swift/thirdparty/pdw_file_browser”
First do a search for UPLOAD path and replace the path there with the location on your server that you would like to upload your images to.
/*
* UPLOAD PATH
*
* absolute path from root to upload folder (DON’T FORGET SLASHES)
*
* Example
* —————————————
* http://www.domain.com/images/upload/
* $uploadpath = ‘/images/upload/’;
*
*/
$uploadpath = “/path/to/upload/folder/“; // absolute path from root to upload folder (DON’T FORGET SLASHES)
You can also change the upload file size here as well. I left mine at a max of 1 meg.
You can then save this.
Make sure you also DELETE your CACHE files on both your local machine as well as the server. The cache files are located in: __swift/cache
Be careful when you delete these files not to accidentally delete the __swift/config folder (thats what I did) which will require you to rebuild those files (presumably from a backup)
Another thing to keep in mind is that your browser likes to cache the page you are on. Which is why I used private browsing mode in Firefox while doing this worked. This ensured I was viewing the live page instead of an older cached one.
Once done, the last thing you’ll want to do is actually UPLOAD a picture. All of that javascript editing was done to basically add a small icon to the screen
A very special thank you to the cool guy that wrote the plugin Neele. And a HUGE thank you to Nathan Kelly who posted the original instructions in the Kayako Forums.
If this is helpful to you please leave a comment saying so. If you notice any mistakes, or have anything that should be added/included please let me know.
