Linuxdelta

LinuxDelta => Knowledgeroot => Topic started by: thr4fun on May 23, 2018, 05:55:24 PM

Title: How to enable Upload of images in CKEditor in Version 1.6
Post by: thr4fun on May 23, 2018, 05:55:24 PM
Hallo,
ist es möglich den Upload bei den images und links wie im fckeditor zu aktivieren?
Einträge im ckeditor -> config.js und Plugins?! nur welche??
Für 'nen Tip wäre ich dankbar ;-)
cu
Tom
Title: Re: How to enable Upload of images in CKEditor in Version 1.6
Post by: admin on May 24, 2018, 02:54:29 PM
Hallo Tom,

das ist per default im ckeditor nicht mehr integriert.
Das kann man über addons aber wohl integrieren.

Sieh dir mal die folgenden Links dazu an:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_howtos_file_upload.html
https://ckeditor.com/cke4/addon/ckeditor-easy-file-upload

Eventuell findest du ja einen einfachen weg dafür.
Dann könnte man auch mal gucken, dass man das per default in Knowledgeroot mit ausliefert.

Gruß
Frank
Title: Re: How to enable Upload of images in CKEditor in Version 1.6
Post by: thr4fun on June 07, 2018, 03:50:36 PM
Hallo Frank,
danke für die Info - schade, war eine smarte Sache ;-)

https://ckeditor.com/cke4/addon/imageuploader
geht auch in die Richtung, bin noch am Testen.

Die Einträge in der config.js
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'imageuploader';
   config.filebrowserUploadUrl = '/uploader/upload.php';
};

lassen zumindest den Upload-Reiter im Image-Dialog erscheinen.
Ich versuche mal weiter ;-)
cu
Tom
Title: Re: How to enable Upload of images in CKEditor in Version 1.6
Post by: thr4fun on June 26, 2018, 09:46:18 AM
Hallo,

ich habe mal einen Workaround, der mein Problem vorerst mal löst ;-)

https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor

Den elFinder ins Knowledroot-Verzeichnis "extension/elFinder" legen.
Dann die Methode 2 anwenden und die config.js des CKEditors anpassen.

config.filebrowserBrowseUrl = './extension/elFinder/elfinder-cke.html'; // eg. 'includes/elFinder/elfinder-cke.html'

Danach die elfinder-cke.html umkopieren und editieren. managers : { }

managers : {
    // 'DOM Element ID': { /* elFinder options of this DOM Element */ }
    'elfinder': {
        getFileCallback : function(file, fm) {
            window.opener.CKEDITOR.tools.callFunction((function() {
                var reParam = new RegExp('(?:[\?&]|&)CKEditorFuncNum=([^&]+)', 'i') ;
                var match = window.location.search.match(reParam) ;
                return (match && match.length > 1) ? match[1] : '' ;
            })(), fm.convAbsUrl(file.url));
            fm.destroy();
            window.close();
        }
        , height : '100%'   // optional
        , resizable : false // optional
    }
}

Im elFinder Verzeichnis noch die Datei  connector.minimal.php-dist  -> connector.minimal.php kopieren:
./elFinder/php/connector.minimal.php

und das Verzeichnis auf das Knowlederoot ./uploads/ Verzeichnis setzen:

// Documentation for connector options:
// https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options
$opts = array(
   // 'debug' => true,
   'roots' => array(
      // Items volume
      array(
         'driver'        => 'LocalFileSystem',           // driver for accessing file system (REQUIRED)
         'path'          => '../../../uploads/',                 // path to files (REQUIRED)
         'URL'           => dirname($_SERVER['PHP_SELF']) . '/../../../uploads/', // URL to files (REQUIRED)
         'trashHash'     => 't1_Lw',                     // elFinder's hash of trash folder
         'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
         'uploadDeny'    => array('all'),                // All Mimetypes not allowed to upload
         'uploadAllow'   => array('image', 'text/plain'),// Mimetype `image` and `text/plain` allowed to upload
         'uploadOrder'   => array('deny', 'allow'),      // allowed Mimetype `image` and `text/plain` only
         'accessControl' => 'access'                     // disable and hide dot starting files (OPTIONAL)
      ),
      // Trash volume
      array(
         'id'            => '1',
         'driver'        => 'Trash',
         'path'          => '../../../uploads/.trash/',
         'tmbURL'        => dirname($_SERVER['PHP_SELF']) . '/../../../uploads/.trash/.tmb/',
         'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
         'uploadDeny'    => array('all'),                // Recomend the same settings as the original volume that uses the trash
         'uploadAllow'   => array('image', 'text/plain'),// Same as above
         'uploadOrder'   => array('deny', 'allow'),      // Same as above
         'accessControl' => 'access',                    // Same as above
      )
   )
);


CU
Tom