Hello,

Referring this demo: https://www.gridphp.com/demo/demos/integrations/ckeditor.phps

On line 130 and 196:

You can replace include JS ckeditor file with following:

<script src="//ckeditor.com/docs/vendors/4.18.0/ckeditor/ckeditor.js"></script>

And add extraPlugins and uploadUrl in the integration code. The upload.php will handle the backend upload work.

var editor = CKEDITOR.replace( el, {
    extraPlugins: 'uploadimage',
    uploadUrl:'/uploader/upload.php',
    on: {
        change: function(){ jQuery(el).val(editor.getData()); }
    }
});

Screenshot: https://i.imgur.com/MeEYJsM.png

Bonjour Abu,

Thank you for your reply.

I made the changes as shown above and I get the upload tab. I can choose a file on my computer.

But when I click the Browse server buttons on the Image Information and Link tabs, I get a 404 error, here is the link to this page: (https://www.cbainc.org/apps/ckfinder/ 3.4.5/ckfinder.html?type=Images&CKEditor=articles&CKEditorFuncNum=0&langCode=fr-ca).

When I click the Send to server button on the Upload tab, nothing happens and I see the following information when I hover my mouse over the button: jascript:void(0).

Here is the code I have :
<script type=”text/javascript”>
function link_ckeditor(el)
{
// Full Set
CKEDITOR.config.toolbar = [
{ name: ‘document’, groups: [ ‘mode’, ‘document’, ‘doctools’ ], items: [ ‘Source’, ‘-‘, ‘Save’, ‘NewPage’, ‘Preview’, ‘Print’, ‘-‘, ‘Templates’ ] },
{ name: ‘clipboard’, groups: [ ‘clipboard’, ‘undo’ ], items: [ ‘Cut’, ‘Copy’, ‘Paste’, ‘PasteText’, ‘PasteFromWord’, ‘-‘, ‘Undo’, ‘Redo’ ] },
{ name: ‘editing’, groups: [ ‘find’, ‘selection’, ‘spellchecker’ ], items: [ ‘Find’, ‘Replace’, ‘-‘, ‘SelectAll’, ‘-‘, ‘Scayt’ ] },
{ name: ‘forms’, items: [ ‘Form’, ‘Checkbox’, ‘Radio’, ‘TextField’, ‘Textarea’, ‘Select’, ‘Button’, ‘ImageButton’, ‘HiddenField’ ] },
‘/’,
{ name: ‘basicstyles’, groups: [ ‘basicstyles’, ‘cleanup’ ], items: [ ‘Bold’, ‘Italic’, ‘Underline’, ‘Strike’, ‘Subscript’, ‘Superscript’, ‘-‘, ‘CopyFormatting’, ‘RemoveFormat’ ] },
{ name: ‘paragraph’, groups: [ ‘list’, ‘indent’, ‘blocks’, ‘align’, ‘bidi’ ], items: [ ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Outdent’, ‘Indent’, ‘-‘, ‘Blockquote’, ‘CreateDiv’, ‘-‘, ‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’, ‘-‘, ‘BidiLtr’, ‘BidiRtl’, ‘Language’ ] },
{ name: ‘links’, items: [ ‘Link’, ‘Unlink’, ‘Anchor’ ] },
{ name: ‘insert’, items: [ ‘Image’, ‘Flash’, ‘Table’, ‘HorizontalRule’, ‘Smiley’, ‘SpecialChar’, ‘PageBreak’, ‘Iframe’ ] },
‘/’,
{ name: ‘styles’, items: [ ‘Styles’, ‘Format’, ‘Font’, ‘FontSize’ ] },
{ name: ‘colors’, items: [ ‘TextColor’, ‘BGColor’ ] },
{ name: ‘tools’, items: [ ‘Maximize’, ‘ShowBlocks’ ] },
{ name: ‘others’, items: [ ‘-‘ ] },
{ name: ‘about’, items: [ ‘About’ ] }
];
// remove nbsp; from start of textarea
if(el.previousSibling) el.parentNode.removeChild(el.previousSibling);
$(el).parent().css(‘padding-left’,’6px’);

var editor = CKEDITOR.replace( el, {
extraPlugins: ‘colorbutton,colordialog’,
on: {
  change: function(){ jQuery(el).val(editor.getData()); }
}
});

var editor = CKEDITOR.replace( el, {
   extraPlugins: ‘uploadimage’,
   uploadUrl:’/CBA/uploader/upload.php’,
   on: {
       change: function(){ jQuery(el).val(editor.getData()); }
   }
});

// unblock typing in ckeditor dialog – events tracked with firebug > script > global pause > stack
jQuery(document).unbind(‘keypress’).unbind(‘keydown’).unbind(‘mousedown’);
}
</script>

Thank you for your help !

Bonjour Abu,

This line of code from my last message is instead :

uploadUrl:’/uploader/upload.php’,

Merci,

Bonjour Abu,

Is it possible that I need to download additional files to make this part of the upload work?

Thanks

The CKEditor does not include file upload feature by default and the demos that I saw on their website uses CKFinder plugin that is their paid product.

One option is to buy that license by contacting their support OR Search CKEditor forums on how to upload images to CKeditor without CKFinder.

I invested some time on it’s custom file browser integration but unable to do so due to time limitation.

If you get some working sample of CKEditor with Upload – independent of datagrid,
I can help you in integrating it with data grid with that sample code.

Bonjour Abu,

Many thanks for the time spent trying to help me. There is a version of CKfinder that I can use for my site for free. I uploaded and installed this version successfully. I was also able to integrate it into your system.

The problem I’m having is that I can’t add or edit the text field anymore when I add the script. I had noticed the same problem with the code you had previously provided me.

Here is the code used for the text field and the code used for the script that makes the CKfinder work :

https://gist.github.com/fontamel/51c919a530a5b1bafd2ac91ee54fc87c

Some screenshots here :

View post on imgur.com

Thanks again for your help.

By reviewing your image #4, It looks like the red box error is the result of some data validation code. Search the text “phpgrid_error” in your grid code which actually shows this red box.

Another way to trace issue is to open browser debugger F12 and see the response of the ajax call made when you submit the form.

PS: In your code 119-124 should be removed or commented because line 136 do what you need.

Bonsoir Abu,

Image #4 was used to show you that despite the fact that there was an image and a sentence in this field, the validation system to not leave the field empty still blocked. The problem was not there.

As you pointed out to me, lines 119 to 124 were no longer useful. This created the problem by preventing me from adding or modifying this field. Bad coding. Here is what I did to fix the situation:

…
var editor = CKEDITOR.replace( el, {
extraPlugins: ‘colorbutton,colordialog,uploadimage’,
…

And here is the complete code that integrates the CKfinder3 into the CKeditor4:

https://gist.github.com/fontamel/0237496efd7abf20ae8400508dfc5fe0

Thank you very much for your assistance, I salute your skill and knowledge in finding problems quickly and providing solutions that are easy to implement.