CKEditor and KCFinder bundle

Version 3 Solutions you have discovered or come across should go here. Questions should go in the other three Version 3 forums, thank you.
Forum rules
Please do not ask questions here, this is for Version 3 Solutions you have discovered or come across.

CKEditor and KCFinder bundle

Postby jimlongo » 5:19pm, Sat 24 Aug, 2013

Took me a while to cotton onto this, and it may not be well documented so I put this here to help anyone else struggling with this as I was.

If you go to the Config->Plugins and click the Find Plugins link you can get the download link to the phplist bundle of CKEditor and KCFinder (there is also an automated install if you prefer). Note this is specific to phpList 3.x and KCFinder is a free open source version of CKFinder (notice the reversed letters).

DO THIS instead of trying to install anything from the CKEditor home pages as this will save you a lot of pain.

Installation is easy, and configuration is simple.
You can move your 'plugins' folder outisde of the phplist folder to avoid upgrade problems, you just need to edit the location in your config file define("PLUGIN_ROOTDIR","path to plugins folder");

Make sure you enable the plugin in Config->Plugins and disable FCKEditor.

Now you have the CKEditor to compose messages
Screen Shot 2013-08-24 at 1.05.10 PM.png
Ckfinder compose interface
Screen Shot 2013-08-24 at 1.05.10 PM.png (38.24 KiB) Viewed 26171 times



Now configure the file upload and browser KCFinder. You can do this in Config->Settings in the Compose section at the bottom, or manually (as described below) which gives you greater control.

In plugins/CKEditorPlugin/kcfinder/config.php define path to uploads and a few variables. Here's the editable section of my kcfinder/config.php, I like to keep it simple I only have 1 folder (mostly images) that I am uploading and using. You could have multiple folders for different file types - consult the KCFinder documentation for this.
Code: Select all
$_CONFIG = array(

    'disabled' => true,
    'denyZipDownload' => false,
    'denyUpdateCheck' => false,
    'denyExtensionRename' => false,

    'theme' => "oxygen",

    'uploadURL' => "http://mydomain.com/images/News",
    'uploadDir' => "",

    'dirPerms' => 0755,
    'filePerms' => 0644,

    'access' => array(

        'files' => array(
            'upload' => true,
            'delete' => true,
            'copy' => true,
            'move' => true,
            'rename' => true
        ),

        'dirs' => array(
            'create' => true,
            'delete' => true,
            'rename' => true
        )
    ),

    'deniedExts' => "exe com msi bat php phps phtml php3 php4 cgi pl",

 'types' => array(
 
    'News' => array(
        'type' => "*img",
        'thumbWidth' => 80,
        'thumbHeight' => 80
    )
 
),
    'filenameChangeChars' => array(/*
        ' ' => "_",
        ':' => "."
    */),

    'dirnameChangeChars' => array(/*
        ' ' => "_",
        ':' => "."
    */),

    'mime_magic' => "",

    'maxImageWidth' => 0,
    'maxImageHeight' => 0,

    'thumbWidth' => 100,
    'thumbHeight' => 100,

    'thumbsDir' => ".thumbs",

    'jpegQuality' => 90,

    'cookieDomain' => "",
    'cookiePath' => "",
    'cookiePrefix' => 'KCFINDER_',



you should now have KCFinder to upload and browse your images (or other) files when composing.
Screen Shot 2013-08-24 at 1.05.57 PM.png
KCFinder interface
Screen Shot 2013-08-24 at 1.05.57 PM.png (353.32 KiB) Viewed 26171 times


I think this is a huge improvement from the stock FCKEditor that I was used to in v2 and the image browser I could never get to work.

Thanks Duncan!

p.s. one note, I was originally getting 500 errors on the image browser. In my case Soft Fail errors in the weblog. Changed all files to 644.
Last edited by jimlongo on 5:42am, Sun 25 Aug, 2013, edited 1 time in total.
jimlongo
PL Geek
 
Posts: 88
Joined: 10:10pm, Tue 15 May, 2007

Re: CKEditor and KCFinder bundle

Postby duncanc » 5:51pm, Sat 24 Aug, 2013

Thanks for putting this together. A few comments.

The recommended way of installing a plugin is to use the automated method on the plugins page. Manually installing the files is likely to be error prone for many people.

Not sure why you need to edit the kcfinder config file as the upload directory can be specified on the config > settings page.

Moving the plugins directory up one level doesn't seem to achieve much as it is still within the phplist directory. Moving it outside of the web root is better as it will then be unaffected by upgrading phplist. Can you remove this bit from your post as I think that it adds detail unrelated to the plugin and so may tend to confuse people?

I have tried to put enough useful information on the GitHub page https://github.com/bramley/phplist-plugin-ckeditor which is where people should look. If it needs more detail then let me know.
duncanc
Moderator
 
Posts: 2440
Joined: 6:34am, Sat 08 May, 2010
Location: London

Re: CKEditor and KCFinder bundle

Postby jimlongo » 5:49am, Sun 25 Aug, 2013

Thanks for the clarification Duncan. I guess the reason I posted this is because I kept reading references to CKEditor, and not reading fully enough ended up at the CKEDitor website, which is more confusing than it should be. Your instructions are good, especially since I've been through the process a couple times, mine hopefully can supplement that for others having difficulty.

I haven't tried the manual installation that you recommended. Might be better for many people to follow that procedure.

I prefer having the plugins folder in my phplist folder since it is part of that application. My method of upgrading is usually only going to involve the 4 root files and parts of the admin folder so I feel better having it there. And editing the KCFinder config.php gives more control than the config settings in phplist, but again I can see how that might work better for many people.

Again thanks, don't want to mislead anyone, but I am just so thrilled to have a vastly improved composition environment.
jimlongo
PL Geek
 
Posts: 88
Joined: 10:10pm, Tue 15 May, 2007

Re: CKEditor and KCFinder bundle

Postby bigRoN18 » 10:05pm, Tue 27 Aug, 2013

I'm having a small problem figuring out how to configure KCFinder to work properly. It appears to work as I set up a test campaign but apparently it is using a relatively location as opposed to an absolute location. I'm guesing that the setting is somewhere in /phplistplugins/CKEditorPlugin/kcfinder/config.php but I'm not exactly sure WHAT needs to be set. I'm also thinking that in the Config>Settings page, the last two settings are important. For me, relative to the HTML root directory, I was thinking of having the uploads placed into a directory called "images", as I would only upload images. I'd appreciate some help from here if anyone knows.
bigRoN18
PL Nut
 
Posts: 21
Joined: 4:20am, Tue 24 Feb, 2009
Location: Roseville, CA

Re: CKEditor and KCFinder bundle

Postby duncanc » 9:57am, Wed 28 Aug, 2013

I'm sure that absolute image urls were being generated but it doesn't seem so now.

You need to ignore the field on the settings page 'path to file upload directory (overrides UPLOADIMAGES_DIR in config.php)' and instead explicityly set UPLOADIMAGES_DIR in config.php. phplist will then convert relative urls to absolute when constructing and sending each message.

KCFinder uses a two-level directory structure for uploaded files because it supports several types of uploads each with their own directory, e.g. images, videos, ordinary files.

So the recommended structure is something like 'content' for the parent directory and then 'image' for the sub-directory for images, but that can be changed on the settings page with "name of the image subdirectory of the file upload directory" if you want to use "images" instead.

Can you confirm whether this works as I'll need to then release a new version of the plugin.
duncanc
Moderator
 
Posts: 2440
Joined: 6:34am, Sat 08 May, 2010
Location: London

Re: CKEditor and KCFinder bundle

Postby julienl » 1:30pm, Wed 28 Aug, 2013

Only if I change:
Code: Select all
$_SESSION['KCFINDER']['uploadURL'] = "/$upload";

with:
Code: Select all
$_SESSION['KCFINDER']['uploadURL'] = "http://my.website.com/$upload";


Then emails sent have full path links to documents.

Also, I've seen a quite annoying problem:
http://www.exploit-db.com/exploits/27597/
julienl
PL Geek
 
Posts: 58
Joined: 8:20am, Wed 22 Jul, 2009
Location: France

Re: CKEditor and KCFinder bundle

Postby duncanc » 1:57pm, Wed 28 Aug, 2013

What value do you have for UPLOADIMAGES_DIR in config.php and for "path to file upload directory (overrides UPLOADIMAGES_DIR in config.php)" on the settings page?

The two need to be the same or the latter to be empty. Then phplist will convert relative urls to absolute urls.

Your change also seems to generate absolute urls, which is what I thought the plugin did originally. But I am now inclined to remove the setting 'path to file upload directory (overrides UPLOADIMAGES_DIR in config.php)' and just use UPLOADIMAGES_DIR because there is quite a bit of code in core phplist that expects that to be set.
duncanc
Moderator
 
Posts: 2440
Joined: 6:34am, Sat 08 May, 2010
Location: London

Re: CKEditor and KCFinder bundle

Postby duncanc » 2:09pm, Wed 28 Aug, 2013

julienl wrote:Also, I've seen a quite annoying problem:
http://www.exploit-db.com/exploits/27597/


I think that this setting in the kcfinder config.php file stops public access
Code: Select all
    'disabled' => true,

The plugin dynamically changes it to false.
duncanc
Moderator
 
Posts: 2440
Joined: 6:34am, Sat 08 May, 2010
Location: London

Re: CKEditor and KCFinder bundle

Postby julienl » 9:38am, Thu 29 Aug, 2013

duncanc wrote:What value do you have for UPLOADIMAGES_DIR in config.php and for "path to file upload directory (overrides UPLOADIMAGES_DIR in config.php)" on the settings page?

In config.php: define('UPLOADIMAGES_DIR',"documents");
On the settings page: empty
julienl
PL Geek
 
Posts: 58
Joined: 8:20am, Wed 22 Jul, 2009
Location: France

Re: CKEditor and KCFinder bundle

Postby bigRoN18 » 5:20pm, Thu 29 Aug, 2013

In my /config/config.php file, I have:
Code: Select all
define('UPLOADIMAGES_DIR',"/content");


In Settings page, I have the following:
Image (SULADS happens to be the main name of my main project, in case anyone was wondering why that was what I put under image subdirectory.)

Under CKEditorPlugin.php, on a whim, I changed line # 125 to read:
Code: Select all
$_SESSION['KCFINDER']['uploadURL'] = "http://www.MYDOMAIN.COM/$upload";
(Obviously with the MYDOMAIN.COM substituted for my own domain.)

After doing all this, I set up a test campaign and uploaded a file. I looked in my directories after uploading "image.jpg" and saw:
Code: Select all
/content
   /content/.thumbs
         /.thumbs/files/
               /files/image.jpg
   /content/files
         /files/image.jpg

After sending my test campaign, I still get a blank image and looking at the HTML code, the tag for the image is:
Code: Select all
<img alt="Alt Name" src="http://content/files/image.jpg" />


I find it odd that it starts out with the "http://" part but without the domain info. What do I need to do to add that, as it appears as if it is TRYING to make an absolute reference but it is failing to do so.

Another question I can't seem to figure out is why the directory it creates under "/content" is called "files" and not something else, such as "images"... where is that set?
bigRoN18
PL Nut
 
Posts: 21
Joined: 4:20am, Tue 24 Feb, 2009
Location: Roseville, CA

Re: CKEditor and KCFinder bundle

Postby duncanc » 6:23pm, Thu 29 Aug, 2013

This define is not quite correct
Code: Select all
define('UPLOADIMAGES_DIR',"/content");


It should be simply "content", as I don't think that the phplist code tries to remove a leading '/'.

Also it looks like you are using the kcfinder url to load files rather than images, so they go into a 'files' subdirectory. I think that you have made changes to the kcfinder config file so you'll need to review those changes.
duncanc
Moderator
 
Posts: 2440
Joined: 6:34am, Sat 08 May, 2010
Location: London

Re: CKEditor and KCFinder bundle

Postby bigRoN18 » 9:40pm, Thu 29 Aug, 2013

duncanc wrote:This define is not quite correct
Code: Select all
define('UPLOADIMAGES_DIR',"/content");


It should be simply "content", as I don't think that the phplist code tries to remove a leading '/'.

Also it looks like you are using the kcfinder url to load files rather than images, so they go into a 'files' subdirectory. I think that you have made changes to the kcfinder config file so you'll need to review those changes.


Thanks... funny how my mistake was the "/". It works nows. Thanks.
bigRoN18
PL Nut
 
Posts: 21
Joined: 4:20am, Tue 24 Feb, 2009
Location: Roseville, CA

Re: CKEditor and KCFinder bundle

Postby woodoosam » 12:03pm, Wed 11 Sep, 2013

Hi all !

I just installed CKeditor in my PHPList.
It seems to work, but i only have a "Basic" command panel :( :
Image


I need the "Full" featured editor... i tryed to modify config.js and build-config.js, nothing gives me the full editor like showned by jimlongo...

jimlongo wrote: (...) Now you have the CKEditor to compose messages
Image


If anyone could help me :wink:
woodoosam
phpList newbie
 
Posts: 3
Joined: 11:52am, Wed 11 Sep, 2013

Re: CKEditor and KCFinder bundle

Postby duncanc » 2:01pm, Wed 11 Sep, 2013

You can download the full CKEditor package http://ckeditor.com/download.

Install it somewhere in your web root and then on the Settings page tell the plugin where you put it.
duncanc
Moderator
 
Posts: 2440
Joined: 6:34am, Sat 08 May, 2010
Location: London

Re: CKEditor and KCFinder bundle

Postby woodoosam » 3:56pm, Wed 11 Sep, 2013

Thx for the answer Duncanc !

I've downloaded the full featured from official website you gave me.

installed it on my web root...

Modified the "lists/config/config.php"
Code: Select all
define("PLUGIN_ROOTDIR","xxx_mynew_rootdir-is_OK");


But nothing...
In the "lists/admin/?page=configure" : "composition parameters" is not shown.
(my new plugin root dir is different of "plugin", so FCKeditor is in a broken dir, it's ok)

In "lists/admin/?page=plugins" : absoltely nothing. (no plugin shown)

i've tried to edit a php file like "CKEditorPlugin.php" or "fckphplist.php" :
Code: Select all
<?php
/**
 * CKEditorPlugin for phplist
 *
 * This file is a part of CKEditorPlugin.
 *
 * This plugin is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * This plugin is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * @category  phplist
 * @package   CKEditorPlugin
 * @author    Duncan Cameron
 * @copyright 2013 Duncan Cameron
 * @license   http://www.gnu.org/licenses/gpl.html GNU General Public License, Version 3
 */
class CKEditorPlugin extends phplistPlugin
{
    const VERSION_FILE = 'version.txt';
    const CODE_DIR = '/';
    /*
     *  Private variables
     */
    private $kcEnabled;

    /*
     *  Inherited variables
     */
    public $name = 'CKEditor plugin';
    public $editorProvider = true;
    public $authors = 'Duncan Cameron';
    public $description = 'Provides the CKEditor for editing messages and templates.';
    public $enabled = 1;

    function __construct()
    {
        $this->kcEnabled = defined('UPLOADIMAGES_DIR') && UPLOADIMAGES_DIR !== false;
        $this->coderoot = dirname(__FILE__) . self::CODE_DIR;
        $this->version = (is_file($f = $this->coderoot . self::VERSION_FILE))
            ? file_get_contents($f)
            : '';
        $this->settings = array(
            'ckeditor_width' => array (
              'value' => 600,
              'description' => 'Width in px of CKeditor Area',
              'type' => 'integer',
              'allowempty' => 0,
              'min' => 100,
              'max' => 800,
              'category'=> 'composition',
            ),
            'ckeditor_height' => array (
              'value' => 600,
              'description' => 'Height in px of CKeditor Area',
              'type' => 'integer',
              'allowempty' => 0,
              'min' => 100,
              'max' => 800,
              'category'=> 'composition',
            ),
            'ckeditor_path' => array (
              'value' => PLUGIN_ROOTDIR . self::CODE_DIR . 'ckeditor',
              'description' => 'path to CKeditor',
              'type' => 'text',
              'allowempty' => 0,
              'category'=> 'composition',
            ),
            'ckeditor_config_path' => array (
              'value' => '',
              'description' => 'path to CKeditor custom configuration file',
              'type' => 'text',
              'allowempty' => 1,
              'category'=> 'composition',
            )
        );

        if ($this->kcEnabled) {
            $this->settings += array(
                'kcfinder_path' => array (
                  'value' =>  PLUGIN_ROOTDIR . self::CODE_DIR . 'kcfinder',
                  'description' => 'path to KCFinder',
                  'type' => 'text',
                  'allowempty' => 0,
                  'category'=> 'composition',
                ),
                'kcfinder_image_directory' => array (
                  'value' => 'image',
                  'description' => 'name of the image subdirectory of the file upload directory',
                  'type' => 'text',
                  'allowempty' => 0,
                  'category'=> 'composition',
                ),
            );
        }
        parent::__construct();
    }

    function adminmenu()
    {
        return array();
    }
 
    function editor($fieldname, $content)
    {
        if ($this->kcEnabled) {
            $_SESSION['KCFINDER'] = array(
                'disabled' => false,
                'uploadURL' => '/' . UPLOADIMAGES_DIR
            );
            $kcPath = htmlspecialchars(rtrim(getConfig('kcfinder_path'), '/'));
            $kcImageDir = htmlspecialchars(getConfig('kcfinder_image_directory'));
            $kcBrowserUrls = <<<END
    filebrowserBrowseUrl: '$kcPath/browse.php?type=files',
    filebrowserImageBrowseUrl: '$kcPath/browse.php?type=$kcImageDir',
    filebrowserFlashBrowseUrl: '$kcPath/browse.php?type=flash',
    filebrowserUploadUrl: '$kcPath/upload.php?type=files',
    filebrowserImageUploadUrl: '$kcPath/upload.php?type=$kcImageDir',
    filebrowserFlashUploadUrl: '$kcPath/upload.php?type=flash',
END;
       } else {
            $kcBrowserUrls = '';
       }
        $content = htmlspecialchars($content);
        $path = htmlspecialchars(rtrim(getConfig('ckeditor_path'), '/'));
        $ckConfigPath = htmlspecialchars(rtrim(getConfig('ckeditor_config_path'), '/'));
        $customConfig = $ckConfigPath ? "customConfig: '$ckConfigPath'," : '';

        if ($fieldname == 'footer') {
            $width = getConfig('ckeditor_width');
            $height = 100;
        } else {
            $width = getConfig('ckeditor_width');
            $height = getConfig('ckeditor_height');
        }
        $html = <<<END
<script type="text/javascript" src="$path/ckeditor.js"></script>
<textarea name="$fieldname">$content</textarea>
<script>
CKEDITOR.replace('$fieldname', {
    $customConfig
    $kcBrowserUrls
    width: $width,
    height: $height
});
</script>
END;
        return $html;
    }
}



But i only have a warm on loading "lists/admin/?page=plugins" :
Code: Select all
erreur: initialisation of plugin ckeditor failed


I'm confused :oops:
woodoosam
phpList newbie
 
Posts: 3
Joined: 11:52am, Wed 11 Sep, 2013

Next

Return to Answers, HowTos, Tips and Tricks

Who is online

Users browsing this forum: No registered users and 2 guests