https://docs.google.com/file/d/0B5nZNPW48dpFSE5LMk05V2VWSzA/edit?usp=sharing
<?php
$ck_id = "ck_editor".time();
if(!isset($ck_className)) {
$ck_className = time();
}
if(!isset($ck_content)) {
$ck_content = "";
}
if(!isset($ck_name)) {
$ck_name = "ck_name";
}
?>
<textarea name="<?php echo $ck_name; ?>"
class="<?php echo $ck_className; ?>"
id="<?php echo $ck_id; ?>"><?php echo $ck_content; ?></textarea>
<script type="text/javascript">
for (var i in CKEDITOR.instances) {
if(CKEDITOR.instances[i]) {
<?php if(isset($replaceAll) && $replaceAll == true) { ?>CKEDITOR.remove(CKEDITOR.instances[i]); <?php } ?>
}
}
CKEDITOR.replace( '<?php echo $ck_id; ?>',
{
pasteFromWordRemoveFontStyles : false,
fullPage : false,
removePlugins : 'elementspath',
height : 300,
toolbar :
[
{
name: 'styles',
items : [ 'Format','Font','FontSize' ]
},
{
name: 'basicstyles',
items : [ 'Bold','Italic','Underline','Strike']
},
{
name: 'paragraph',
items : [ 'NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ]
},
{
name: 'clipboard',
items : [ 'Undo','Redo', 'imageUploader' ]
},
{
name: 'tableoperations',
items : [ '-', 'Table', 'TableInsertRowBefore', 'TableInsertRowAfter', 'TableRowDelete', '-',
'TableInsertColumnBefore', 'TableInsertColumnAfter', 'TableColumnDelete', '-', 'TableCellMerge',
'TableCellSplitVertical', 'TableCellSplitHorizontal', 'TableDeleteTable' ]
},
{
name: 'spellcheck',
items: [ 'jQuerySpellChecker' ]
}
]
});
</script>
Extra plugins made by me "imageUploader" includes in config.js file
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
//config.language = 'fr';
config.uiColor = '#FCFFEB';
config.enterMode = CKEDITOR.ENTER_BR;
config.extraPlugins = "imageUploader,tableoperations";
config.pasteFromWordRemoveFontStyles = false;
config.disableNativeSpellChecker = false; /* default spell checking */
};
Make a folder "imageUploader" in plugins folder,
create a file icon.gif and plugin.js
PLUGIN.JS
(function(){
//Section 1 : Code to execute when the toolbar button is pressed
var editorCustom;
var a = {
exec:function(editor){
editorCustom = editor;
var theSelectedText = "";
var mySelection = editor.getSelection();
if (CKEDITOR.env.ie) {
mySelection.unlock(true);
theSelectedText = mySelection.getNative().createRange().text;
} else {
theSelectedText = mySelection.getNative();
}
var backgroundHtmlStyle = " style='background-color: white; ";
backgroundHtmlStyle += " height: " + $(window).height() + "px; ";
backgroundHtmlStyle += " width: " + $(document).width() + "px; ";
backgroundHtmlStyle += " left: 0; opacity: 0.5; position: fixed; top: 0; z-index: 500; ' ";
var backgroundHtml = "<div class='ck-editor-image-upload-background' "+backgroundHtmlStyle+"></div>";
$("body").append(backgroundHtml);
var uploadFormHtml = "<div class='ck-editor-image-upload'><form id='ck-editor-image-upload-form' accept='utf-8' method=\"post\" enctype=\"multipart/form-data\" accept-charset=\"utf-8\" > ";
uploadFormHtml += "<div><span class='1'>Upload Image File</span><span class='2'></span><input type=\"file\" name=\"file\" class=\"file\"/></div>";
uploadFormHtml += "</form></div>";
jQuery.dialogFromHTML("Insert Image", uploadFormHtml, {width: 400});
$(".ck-editor-image-upload").find(".file").bind("change", function() {
$("#ck-editor-image-upload-form").attr("action", BASE_URL + "custom_image/upload_ck_editor_image");
$("#ck-editor-image-upload-form").ajaxForm({
beforeSubmit: function() {
jQuery.showBackgroundWorkingState();
},
success: function(data) {
if(data != "error" && data != "unsupported") {
var imageLocation = CK_EDITOR_IMAGE_DIR + data;
var imageHtml = "<img src='"+imageLocation+"' alt='"+data+"'/>";
try {
editorCustom.insertHtml(imageHtml);
} catch (ex) {
var content = editorCustom.getData() + "<p>" + imageHtml + "</p>";
editorCustom.setData(content);
}
} else {
jQuery.showWarning("File uploading error, please try again");
}
jQuery.closeAllDialog();
jQuery.hideBackgroundWorkingState();
jQuery(".ck-editor-image-upload-background").remove();
},
error: function() {
jQuery.showWarning("File uploading error, please try again");
jQuery.closeAllDialog();
jQuery.hideBackgroundWorkingState();
jQuery(".ck-editor-image-upload-background").remove();
}
}).submit();
});
}
},
//Section 2 : Create the button and add the functionality to it
b='imageUploader';
CKEDITOR.plugins.add(b,{
init:function(editor){
editor.addCommand(b,a);
editor.ui.addButton('imageUploader',{
label:'Insert Image',
icon: this.path + 'icon.gif',
command:b
});
}
});
})();