CKEditor Image Upload filebrowserUploadUrl

Question

I m using CKEditor and would like to be able to allow users to upload and embed images in the Text Editor     The following JS is what loads the CKEditor   CKEDITOR replace  meeting notes         startupFocus  true      toolbar              ajaxsave              Bold    Italic    Underline    -    NumberedList    BulletedList    -    Link    Unlink              Cut    Copy    Paste    PasteText              Undo    Redo    -    RemoveFormat              TextColor    BGColor              Maximize    Image              filebrowserUploadUrl    notes add ajax upload-inline-image index cfm        Where I m stuck is with filebrowserUploadUrl  What is that URL supposed to return to CKEditor to get this process to work   Thanks

User · Answer

To upload an image simple drag and drop from ur desktop or from anywhere n u can achieve this by copying the image and pasting it on the text area using ctrl v

User · Answer

You can use this code        lt script gt                     Replace the  lt textarea id  editor  gt  with a CKEditor                    instance  using default configuration                   CKEDITOR config filebrowserImageBrowseUrl     admin laravel-filemanager type Files                   CKEDITOR config filebrowserImageUploadUrl     admin laravel-filemanager upload type Images amp  token                    CKEDITOR config filebrowserBrowseUrl     admin laravel-filemanager type Files                   CKEDITOR config filebrowserUploadUrl     admin laravel-filemanager upload type Files amp  token                     CKEDITOR replaceAll   editor        lt  script gt

User · Answer

My latest issue was how to integrate CKFinder for image upload in CKEditor  Here the solution    Download CKEditor and extract in your web folder root  Download CKFinder and extract withing ckeditor folder  Then add references to the CKEditor  CKFinder and put    lt CKEditor CKEditorControl ID  CKEditorControl1  runat  server  gt  lt  CKEditor CKEditorControl gt    to your aspx page  In code behind page OnLoad event add this code snippet  protected override void OnLoad EventArgs e      CKFinder FileBrowser  FileBrowser   new CKFinder FileBrowser       FileBrowser BasePath    ckeditor ckfinder       FileBrowser SetupCKEditor CKEditorControl1      Edit Confic ascx file   public override bool CheckAuthentication       return true        Perform additional checks for image files  SecureImageUploads   true      source

User · Answer

That URL will points to your own server-side file upload action   The documentation doesn t go into much detail  but fortunately Don Jones fills in some of the blanks here   How can you integrate a custom file browser uploader with CKEditor   See also   http   zerokspot com weblog 2009 09 09 custom-filebrowser-callbacks-ckeditor

User · Answer

The URL should point to your own custom filebrowser url you might have    I have already done this in one of my projects  and I have posted a tutorial on this topic on my blog  http   www mixedwaves com 2010 02 integrating-fckeditor-filemanager-in-ckeditor   The tutorial gives a step by step instructions about how to integrate the inbuilt FileBrowser of FCKEditor in CKEditor  if you don t want to make our own  Its pretty simple

User · Answer

If you don t want to have to buy CKFinder  like I didn t want to buy CKFinder  then I wrote a very reliable uploader for CKEditor 4  It consists of a second form  placed immediately above your textarea form  and utilizes the iframe hack  which  in spite of its name  is seamless and unobtrusive   After the image is successfully uploaded  it will appear in your CKEditor window  along with whatever content is already there   editor php  the form page     lt  php set time limit   3600     gt  lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Content Editor lt  title gt   lt link href  jquery-ui-1 10 2 themes vader ui dialog css  rel  stylesheet  media  screen  id  dialog ui    gt   lt link href  jquery-ui-1 10 2 themes vader jquery-ui css  rel  stylesheet  media  screen  id  dialog ui    gt   lt script src  jquery-ui-1 10 2 jquery-1 9 1 js  gt  lt  script gt   lt script src  jquery-ui-1 10 2 jquery form js  gt  lt  script gt   lt script src  jquery-ui-1 10 2 ui jquery-ui js  gt  lt  script gt   lt script src  ckeditor ckeditor js  gt  lt  script gt   lt script src  ckeditor config js  gt  lt  script gt   lt script src  ckeditor adapters jquery js  gt  lt  script gt   lt script src  ckeditor plugin2 js  gt  lt  script gt   lt script type  text javascript  gt    document  ready function             editor   ckeditor   height  400  width 600         function placePic         function ImageExist url          var img   new Image           img src   url         return img height    0         var filename   document forms  uploader    uploadedfile   value  document forms  uploader    filename   value   filename  var url    http   www mydomain com external images cms   filename  document getElementById  uploader   submit    var string   CKEDITOR instances editor getData    var t   setInterval function                 var exists   ImageExist url               if exists     true                       if document getElementById  loader                             document getElementById  loader   parentNode removeChild document getElementById  loader                                               CKEDITOR instances editor setData string     lt img src     url       gt                         clearInterval t                             else                  if   document getElementById  loader                         var loader   document createElement  div                        loader setAttribute  id   loader                        loader setAttribute  style   position absolute margin -300px auto 0px 240px width 113px height 63px text-align center z-index 10                         document getElementById  formBox   appendChild loader                        var loaderGif   document createElement  img                        loaderGif setAttribute  id   loaderGif                        loaderGif setAttribute  style   width 113px height 63px text-align center                         loaderGif src    external images cms 2dumbfish gif                       document getElementById  loader   appendChild loaderGif                                                  100      function loadContent    if document forms  editorform    site   value         amp  amp  document forms  editorform    page   value              var site   document forms  editorform    site   value      var page   document forms  editorform    page   value      var url   site     page   html         ajax           type   GET           url  url          dataType   html           success  function  html                CKEDITOR instances editor setData html                          lt  script gt   lt style gt  button    width  93px    height  28px    border none    padding  0 4px 8px 0    font-weight bold    formBox      width 50   margin 10px auto 0px auto  font-family Tahoma  Geneva  sans-serif  font-size 12px     field  position absolute  top 10px  margin-left 300px  margin-bottom 20px     target  position absolute  top 100px  left 100px  width 400px  height 100px  display none     textField      padding-left  1px  border-style  solid  border-color  black  border-width  1px  font-family  helvetica  arial  sans serif  padding-left  1px     report  float left  margin-left 20px  margin-top 10px  font-family  helvetica  arial  sans serif  font-size 12px  color  900     lt  style gt   lt  head gt    lt body gt   lt  php if isset   GET  r        gt  lt div id  report  gt   lt  php echo   GET  r      gt  is changed   lt  div gt  lt  php     gt   lt div id  formBox  gt   lt form id  uploader  name  uploader  action  editaction php   method  post  target  target  enctype  multipart form-data  gt   lt input type  hidden  name  MAX FILE SIZE  value  50000000    gt   lt input type  hidden  name  filename  value      gt  Insert image  amp nbsp  lt input name  uploadedfile  type  file  class  textField  onchange  placePic   return false     gt  amp nbsp  amp nbsp   lt  form gt    lt form name  editorform  id  editorform  method  post  action  editaction php   gt   lt div id  field   gt Site  amp nbsp  lt select name  site   class  textField  onchange  loadContent   return false   gt       lt option value    gt  lt  option gt       lt option value  scubatortuga  gt scubatortuga lt  option gt       lt option value  drytortugascharters  gt drytortugascharters lt  option gt       lt option value  keyscombo  gt keyscombo lt  option gt       lt option value  keywesttreasurehunters  gt keywesttreasurehunters lt  option gt       lt option value  spearfishkeywest  gt spearfishkeywest lt  option gt   lt  select gt  Page  amp nbsp  lt select name  page  class  textField  onchange  loadContent   return false   gt       lt option value    gt  lt  option gt       lt option value  one  gt 1 lt  option gt       lt option value  two  gt 2 lt  option gt       lt option value  three  gt 3 lt  option gt       lt option value  four  gt 4 lt  option gt   lt  select gt   lt  div gt  lt br   gt   lt textarea name  editor  id  editor  gt  lt  textarea gt  lt br   gt   lt input type  submit  name  submit  value  Submit    gt   lt  form gt   lt  div gt   lt iframe name  target  id  target  gt  lt  iframe gt   lt  body gt   lt  html gt    And here is the action page  editaction php  which does the actual file upload    lt  php   editaction php  foreach   POST as  k   gt   v           k      v      fileuploader php if   FILES      target path    external images cms       target path    target path   basename    FILES  uploadedfile    name        if   file exists   target path filename         move uploaded file   FILES  uploadedfile    tmp name     target path         else       string   stripslashes  editor        filename     site  page html        handle   fopen  filename  w        fwrite  handle  string strlen  string        fclose  handle       header  location  editor php r  filename        gt

User · Answer

With CKeditor version 4 something  the editor expects JSON in return from the server side  Older version may need a text html type of response  bearing a javascript snippet  See this link for an explanation of that Explanation of return formats  On the server side  and if you are using C   you can make a data model like this   namespace editors Models       public class PostModel               public string CKEditor   get  set        for older editors         public string CKEditorFuncNum   get  set        for older editors         public string langCode   get  set        for older editors         public int uploaded   get  set             public string filename   get  set              And return the result from your upload routine with this   PostModel fez   new PostModel   CKEditor    TheEditor1   CKEditorFuncNum    1   langCode    en   uploaded   1  filename     images in     filenameVariable    return Ok fez     Although  net most probably makes json of it automatically  ensure you are returning content-type application json    As a side-note for those wanting to check if the uploaded file really is an image file  if you are using Asp net core  the system drawing library needs to be installed in a non-standard way  Here s how to do that  Also note that you can change the type of posting in the config js file to config filebrowserUploadMethod  form     as opposed to config filebrowserUploadMethod  xhr

User · Answer

For those have same problem in Grails ckeditor plugin Give   filebrowserUploadUrl   YourAppName ck ofm    to invoke the function that handles image uploade if you want use your own customized function you can give that file path

User · Answer

New CKeditor doesn t have file manager included  CKFinder is payable   You can integrate free filemanager that is good looking and easy to implement in CKeditor   http   labs corefive com 2009 10 30 an-open-file-manager-for-ckeditor-3-0   You dowload it  copy it to your project  All instructions are there but you basically just put path to added filemanager index html page in your code   CKEDITOR replace   meeting notes     startupFocus   true  toolbar       ajaxsave      Bold    Italic    Underline    -    NumberedList    BulletedList    -    Link    Unlink       Cut   Copy   Paste   PasteText      Undo   Redo   -   RemoveFormat      TextColor   BGColor      Maximize    Image      filebrowserUploadUrl     filemanager index html     you must write path to filemanager where you have copied it            Most languages are supported  php  asp  MVC  amp  amp  aspx - ashx

User · Answer

I ve recently needed an answer to this as well  and it took me several hours to figure it out  so I decided to resurrect this question with some more up-to-date information and a full answer   Eventually I stumbled upon this tutorial that explained it to me pretty well  For stackoverflow sake  I will reiterate the tutorial here in case it is removed  I will also include some changes that I made to the tutorial that make this a more flexible solution     Getting Started  Let s start with any of the releases of ckeditor   Basic  standard  full  custom  the only requirement is that you have the addon image and filebrowser   As of writing this  all packages include these 2 addons except for the basic one  but it can be added to the basic one   After you upload necessary ckeditor files  make sure your installation is working   Make sure you link your ckeditor js file script  lt script src  ckeditor ckeditor js  gt  lt  script gt  and then initialize it like so     document  ready function         CKEDITOR replace   editor1          lt textarea name  editor1  gt  lt  textarea gt      CKEditor Configuration  Now we have to tell CKEditor that we want to enable uploading  You can do this by going into your ckeditor folder  and editing  config js   We need to add this line   config filebrowserUploadUrl     uploader upload php   somewhere inside the main function E G  CKEDITOR editorConfig   function  config            Define changes to default configuration here  For example         config language    fr          config uiColor     AADC6E        config filebrowserUploadUrl     uploader upload php           NOTE  This URL is from your project root  No matter where you load this file from  it will start at your site index  Meaning  if your URL is example com  this URL leads to http   example com uploader upload php   After this  CKEditor configuration is done  That was easy eh   In fact  if you go and test your image uploading again now  you will get an upload option  though it won t quite work yet       Server Configuration  Now you ll notice in the step before this one that it ends with an upload php file  This is the part that stumped me  I figured there would be some default that can go with this but as far as I know there is not  Luckily  I found one that works  and I made some changes to it to allow more customization   So let s go to the path that you supplied in the last step  for continuity in this tutorial I am going to use  uploader upload php   At this location  make a file called  you guessed it  upload php   This file is going to handle our file uploads   I will put in my custom upload class  but it s based on this github that I found and forked      upload php     lt  php    Upload script for CKEditor     Use at your own risk  no warranty provided  Be careful about who is able to access this file    The upload folder shouldn t be able to upload any kind of script  just in case     If you re not sure  hire a professional that takes care of adjusting the server configuration as well as this script for you      I am not such professional      Configuration Options  Change these to alter the way files being written works  overwriteFiles   false     THESE SETTINGS ONLY MATTER IF  overwriteFiles is FALSE        Seperator between the name of the file and the generated ending       keepFilesSeperator    -           Use  number  or  random    number  adds a number   random  adds a randomly generated string       keepFilesAddonType    random           Only usable when  keepFilesAddonType is  number   this specifies where the number starts iterating from       keepFilesNumberStart   1          Only usable when  keepFilesAddonType is  random   this specifies the length of the string       keepFilesRandomLength   4      END FILE OVERWRITE FALSE SETTINGS     Step 1  change the true for whatever condition you use in your environment to verify that the user    is logged in and is allowed to use the script if  true        echo  You re not allowed to upload files        die 0         Step 2  Put here the full absolute path of the folder where you want to save the files     You must set the proper permissions on that folder  I think that it s 644  but don t trust me on this one     ALWAYS put the final slash      basePath     home user public html example pages projects uploader files        Step 3  Put here the Url that should be used for the upload folder  it the URL to access the folder that you have set in  basePath    you can use a relative url   images    or a path including the host  http   example com images      ALWAYS put the final slash      baseUrl    http   example com pages projects uploader files        Done  Now test it        No need to modify anything below this line   ----------------------------------------------------     ------------------------    Input parameters  optional means that you can ignore it  and required means that you    must use it to provide the data back to CKEditor     ------------------------     Optional  instance name  might be used to adjust the server folders for example   CKEditor     GET  CKEditor         Required  Function number as indicated by CKEditor   funcNum     GET  CKEditorFuncNum         Optional  To provide localized messages  langCode     GET  langCode         ------------------------    Data processing    ------------------------     The returned url of the uploaded file  url            Optional message to show to the user  file renamed  invalid file  not authenticated      message           in CKEditor the file is sent as  upload  if  isset   FILES  upload              Be careful about all the data that it s sent           Check that the user is authenticated  that the file isn t too big         that it matches the kind of allowed resources         name     FILES  upload    name           If overwriteFiles is true  files will be overwritten automatically      if   overwriteFiles                  ext       pathinfo  name  PATHINFO EXTENSION              Check if file exists  if it does loop through numbers until it doesn t             reassign name at the end  if it does exist          if file exists  basePath  name                          if  keepFilesAddonType     number                      operator    keepFilesNumberStart                else if  keepFilesAddonType     random                      operator   bin2hex openssl random pseudo bytes  keepFilesRandomLength 2                                loop until file does not exist  every loop changes the operator to a different value              while file exists  basePath  name  keepFilesSeperator  operator                                  if  keepFilesAddonType     number                          operator                      else if  keepFilesAddonType     random                          operator   bin2hex openssl random pseudo bytes  keepFilesRandomLength 2                                                 name   rtrim  name   ext   keepFilesSeperator  operator  ext                      move uploaded file   FILES  upload    tmp name     basePath    name           Build the url that should be used for this file         url    baseUrl    name           Usually you don t need any message when everything is OK         message    new file uploaded        else        message    No file has been sent        ------------------------    Write output    ------------------------    We are in an iframe  so we must talk to the object in window parent echo   lt script type  text javascript  gt  window parent CKEDITOR tools callFunction  funcNum    url     message   lt  script gt       gt       The changes that I made to this class allow you to enable disable file overwriting and gives you some options for when you don t want to overwrite files  The original class always overwrites with no options    By default this class is set to keep all files  without overwriting  You can play around with those settings to better suit your needs    If you ll notice  there is a section of code that is just an if true  statement  which is always true obviously  if  true        echo  You re not allowed to upload files        die 0       This is for security  This is where you should check if the user uploading is logged in allowed to upload  If you re not worried about that  you can just remove these lines of code or set it to if false   NOT RECOMMENDED   You will also need to edit the  basePath and the  baseUrl variables to fit your servers needs  or else it will not work  Everything below that can be left alone unless you want to play around      This class does not offer file protection  you may want to work with it some to make it more safe  so people can t upload scripts or viruses to your server      I hope that this little tutorial helped someone  as I worked far too long on trying to get this to work for myself  and I hope I can save someone else some time   There is also some neat troubleshooting steps on that tutorial which I linked above  that may be able to help you find what s going wrong if something is

User · Answer

May be it s too late  Your code is correct so please check again your url in filebrowserUploadUrl  CKEDITOR replace   editor1         filebrowserUploadUrl   upload upload php          And the Upload php file  if  file exists  images       FILES  upload    name        echo   FILES  upload    name       already exists       else    move uploaded file   FILES  upload    tmp name      images       FILES  upload    name      echo  Stored in       images       FILES  upload    name

User · Answer

This simple demo may help you in getting what you want    Here is the html php code from where you want to upload the image    lt html gt   lt head gt    lt script src  http   cdn ckeditor com 4 6 2 standard-all ckeditor js  gt  lt  script gt     lt  head gt   lt body gt   lt form  action  index php  method  POST   style  width 500xp   gt    lt textarea rows  5  name  content  id  content  gt  lt  textarea gt    lt br gt   lt input type  submit  name  submit  value  Post  gt    lt  form gt   lt script gt   CKEDITOR replace   content       height  300    filebrowserUploadUrl   upload php        lt  script gt   lt  body gt   lt  html gt    and here is the code for upload php file      lt  php if isset   FILES  upload    name         file     FILES  upload    tmp name      file name     FILES  upload    name      file name array   explode       file name     extension   end  file name array      we want to save the image with timestamp and randomnumber   new image name   time     rand           extension   chmod  upload   0777     allowed extension   array  jpg    gif    png     if in array  extension   allowed extension        move uploaded file  file   upload      new image name      function number     GET  CKEditorFuncNum       url    upload      new image name     message         echo   lt script type  text javascript  gt window parent CKEDITOR tools callFunction  function number    url     message    lt  script gt           gt    Note  Don t forget to create a folder  upload  in the same folder and keep all the three files in the same directory  Later you may change their directories once you understand how it works  Also not forget to press send it to the server as shown in picture below

[ckeditor] CKEditor, Image Upload (filebrowserUploadUrl)

Examples related to ckeditor