Kein Bild Upload-Fähigkeit in der Benutzeroberfläche mit CKEditor Juwel, Paperclip Rails 4

Question

Ich benutze die ckeditor Juwel (https://github.com/galetahub/ckeditor), und Büroklammer Juwel, und CKEditor funktioniert, aber ich habe keine Option, ein Bild hochzuladen, wenn ich auf die Schaltfläche Bild klicken Geben Sie nur eine URL ein. Ich kann keine Dokumentation finden, die erklärt, wie dies zu tun mit Büroklammer und Rails 4.

Answer 1

Ich habe versucht, auch ckeditor für Bild-Upload zu verwenden, aber ich wechselte tatsächlich auf die rich editor, die auf CKEditor gebaut , aber behandelt Bilduploads besser. Ich verwende es mit Carrierwave und Rails 4, aber reich ist kompatibel mit Paperclip als auch (hinzugefügt tatsächlich Carrierwave Unterstützung später).

Answer 2

Es gibt eine issue, die das Problem beschreibt :.

Eine Lösung ist es, den Inhalt der von config.js there zu kopieren.

Answer 3

Sie ckeditor-imgur Juwel einen Versuch geben kann, wird es Ihr Bild speichern kostenlos und einfach Imgur Ihre Bilder hochladen.

https://github.com/yfxie/ckeditor-imgur

Answer 4

Gerade Config ändern. Lösung von @KrauseFx

/* 
    Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. 
    For licensing, see LICENSE.html or http://ckeditor.com/license 
    */ 

    CKEDITOR.editorConfig = function(config) 
    { 
     // Define changes to default configuration here. For example: 
     // config.language = 'fr'; 
     // config.uiColor = '#AADC6E'; 

     /* Filebrowser routes */ 
     // The location of an external file browser, that should be launched when "Browse Server" button is pressed. 
     config.filebrowserBrowseUrl = "/ckeditor/attachment_files"; 

     // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog. 
     config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files"; 

     // The location of a script that handles file uploads in the Flash dialog. 
     config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files"; 

     // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog. 
     config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures"; 

     // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog. 
     config.filebrowserImageBrowseUrl = "/ckeditor/pictures"; 

     // The location of a script that handles file uploads in the Image dialog. 
     config.filebrowserImageUploadUrl = "/ckeditor/pictures"; 

     // The location of a script that handles file uploads. 
     config.filebrowserUploadUrl = "/ckeditor/attachment_files"; 

     config.allowedContent = true; 

     // Rails CSRF token 
     config.filebrowserParams = function(){ 
      var csrf_token, csrf_param, meta, 
       metas = document.getElementsByTagName('meta'), 
       params = new Object(); 

      for (var i = 0 ; i < metas.length ; i++){ 
       meta = metas[i]; 

       switch(meta.name) { 
        case "csrf-token": 
         csrf_token = meta.content; 
         break; 
        case "csrf-param": 
         csrf_param = meta.content; 
         break; 
        default: 
         continue; 
       } 
      } 

      if (csrf_param !== undefined && csrf_token !== undefined) { 
       params[csrf_param] = csrf_token; 
      } 

      return params; 
     }; 

     config.addQueryString = function(url, params){ 
      var queryString = []; 

      if (!params) { 
       return url; 
      } else { 
       for (var i in params) 
        queryString.push(i + "=" + encodeURIComponent(params[ i ])); 
      } 

      return url + ((url.indexOf("?") != -1) ? "&" : "?") + queryString.join("&"); 
     }; 

     // Integrate Rails CSRF token into file upload dialogs (link, image, attachment and flash) 
     CKEDITOR.on('dialogDefinition', function(ev){ 
      // Take the dialog name and its definition from the event data. 
      var dialogName = ev.data.name; 
      var dialogDefinition = ev.data.definition; 
      var content, upload; 

      if (CKEDITOR.tools.indexOf(['link', 'image', 'attachment', 'flash'], dialogName) > -1) { 
       content = (dialogDefinition.getContents('Upload') || dialogDefinition.getContents('upload')); 
       upload = (content == null ? null : content.get('upload')); 

       if (upload && upload.filebrowser && upload.filebrowser['params'] === undefined) { 
        upload.filebrowser['params'] = config.filebrowserParams(); 
        upload.action = config.addQueryString(upload.action, upload.filebrowser['params']); 
       } 
      } 
     }); 

     // Toolbar groups configuration. 
     config.toolbar = [ 
      { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] }, 
      { 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: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, 
      { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar' ] }, 
      { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, 
      '/', 
      { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, 
      { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, 
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] } 
     ]; 

     config.toolbar_mini = [ 
      { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, 
      { name: 'styles', items: [ 'Font', 'FontSize' ] }, 
      { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, 
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }, 
      { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] } 
     ]; 
    };