Ckeditor File Browser and Upload Support Through DataTables Editor

lightfoot

CKEditor can be integrated with an external(user provided) file manager (file browser/uploader). This is done through the Ckeditor File Browser plugin. My file manager program allow me to browse for image files on my server and then uploads my image files to Ckeditor. In order to interface the browser to the Ckeditor, I must tell Ckeditor the path to the browser. This is done by supplying the following js code in the user's application running the Ckeditor.

CKEDITOR.replace( 'editor1', {
    filebrowserBrowseUrl: '/browser/browse.php',
    filebrowserUploadUrl: '/uploader/upload.php',
});

Note the upload.php file is my supplied program to upload files from the user's PC to the content server to be accessed by the Ckeditor.

I have successfully tested this method with a stand alone PHP/javascript program using Ckeditor. The code was placed within a javascript section before the Ckeditor is executed. All works great.

I am using the DataTable Editor and have configured it to successfully use the Ckeditor 4.3.1 except for the interface to the browser.php and upload.php (mentioned above).

My question is: where do I place the CKEDITOR code above within the DataTable Editor code? I have tried placing this code in a few different js places with out success.

Can you help?

Thank you

colin

It should just slip in if you're using this plugin for CKEditor. Are you using it in that way?

Colin

lightfoot

Thank you for your response.
The bottom line is I am still failing to get the Ckeditor to recognize my browser.php and upload.php when using the DataTable Editor. Here is what I have found out below:

1) Yes,* I am accessing the editor.ckeditor.js plug-in. To make sure I placed an alert inside this program to prove it was getting executed.

2) I did find the statement in the plug-in:

conf._editor = CKEDITOR.replace( id, conf.opts );

This looked very promising because it was part of the Ckeditor's initialization and it did look similar to the new code as follows:

CKEDITOR.replace( id, {
    filebrowserBrowseUrl: './browse.php',
    filebrowserUploadUrl: './upload.php'
});

I placed this code directly behind the existing statement:

conf._editor = CKEDITOR.replace( id, conf.opts );

3) I did put code into this plug-in to make sure the plug-in had the correct path to my browser.php and upload.php code. I was able to confirm they existed with the program names and paths I provided. Therefore, I am sure these files names and paths are correct for the plug-in.

4) I did notice the variable conf.opts, which is part of the plug-in "replace" statement above was undefined. Can you confirm this is OK or not. If not, can you help?

As discussed before, the Ckeditor does execute with all functionality except the browser/upload is missing. I just noticed the browser/upload functionality I am adding is similar to what you are provide in the WISWIG editor I am using to enter this document.

I also get an error message which I believe tells me these paths are missing. Here is the error message from the browser: Note: I am using the Editor plug-in's "id" ("DTE_Field_Description_HTML").

[CKEDITOR] Error code: editor-element-conflict. editorName: "DTE_Field_Description_HTML" Object
Thank You,

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You can pass options into the plug-in for CKEditor without needing to modify the plug-in - e.g.:

new $.fn.dataTable.Editor({
  ajax: "php/customers.php",
  table: "#example",
  fields: [
    {
      label: "Info:",
      name: "info",
      type: "ckeditor",
      opts: {
        filebrowserBrowseUrl: './browse.php',
        filebrowserUploadUrl: './upload.php'
      }
    }
  ]
});

If that isn't working for you, can you link to a page showing the issue so I can take a look please?

Allan