DM EECK for Expression Engine 2

Current version: 1.1.2. Released: 2011-06-28

This add-on integrates CK Editor and CK Finder with Expression Engine 2.1

Latest

DM EECK is no longer under active development. The code has been open sourced and is available at GitHub

Contents

Is this right for your project?

EECK is for you if:

EECK is NOT for you if:

If EECK is not for you, we recommend the excellent Wygwam from Pixel and Tonic.

NOTE: Whilst EECK is free, CK Finder is commercial software and subject to a license fee.

Read more about the EECK project at the end of this document.

Download

DM EECK at GitHub

Screen grabs

Global configuration settings Add new Resource Types to CK Finder Two new Fieldtypes Options for CK Editor fields Options for CK Finder fields CK Editor in Publish form CK Finder Fieldtypes CK Finder launched from Publish form Direct/batch upload workflow Matrix compatible Standalone file library Category image URL select

Changes in v1.1

Read full changelog

Installation & Configuration

System requirements

EECK requires EE2.1, PHP5, CK Editor 3 and CK Finder 2.

EECK is tested with CK Editor 3.5 and CK Finder 2.0.1 We'd expect .x updates to be fine and will keep an eye on the situation. You should be able to upgrade CK Editor or Finder without any changes to EECK. Please let us know if you find an incompatibility.

Upgrading from an earlier version

An upgrade from a version old than 1.1 will require an update procedure to adjust the data of CK Finder fieldtypes. This update will run automatically from any screen in the Control Panel related to EECK. (suggest the best plan is to view the EECK fieldtype settings). The update will not run from the front-end of the website.

If you don't have too many records using CK Finder fieldtypes (a few hundred perhaps), the update should run quite quickly. If you have large number of entries (thousands), we suggest a planned update, ideally taking the site offline whilst it is performed.

PLEASE backup your database before running the update and test your content thoroughly afterwards.

Installing

  1. Download CK Editor and CK Finder for PHP and extract the files to a suitable location on your website. This may be your themes folder or any location accessible to the EE Control Panel
  2. Download EECK and place the folders dm_eeck and dm_eeck_files in your expressionengine/third_party/ folder
  3. Place the folder themes/third_party/dm_eeck in your themes/third_party folder
  4. Replace CK Finder's config.php file with the one provided in dm_eeck/ckfinder. Enter your LicenseName and LicenseKey as appropriate. If you upgrade CK Finder, remember to repeat this step.
  5. Ensure your File Upload Preferences are correctly configured in EE and all filesystem permissions are set.
  6. From the EE Control Panel, install the EE CK Editor Fieldytype. When prompted, install the Extension, Fieldtype and Module
  7. If you want to replace the link to the native File Manager, install the DM EECK Accessory
  8. Install the EE CK Finder FieldType
  9. If you want to enable a 'Browse for Image' link to the category edit form, install the DM EECK Category Image Browse Accessory

Configuration

CK Editor configuration files

First job is to make your CK Editor configuration file(s). These are PHP files that contain the description of the configuration, and some javascript object names and values based on available settings.

Files go in /dm_eeck/config/. Make as many as you like. The variable $name is the EE description, the variable $editor_config is some JS that will be wrapped in { } later on - so keep your commas where they should be! Three sample files are provided. default.php is our preferred layout with a few pointers for common customisations, full.php shows all the possible toolbar options and slimline.php is useful for muliple editors within Matrix.

Once you're familar with how these files are formed, we think you'll find the file based approach much quicker than using a pretty drag and drop UI (we know this 'cos we spent ages making one and then ditched it).

Global configuration

Resource Types

These will be available to choose from when you add your custom fields. This is the most flexible aspect of EECK. A Resource Type is a subfolder of an Expression Engine Upload Destination, with the addition of a maximum upload size and allowed file extensions. EECK Resource Types will respect all EE Upload Destination permissions.

By default, CK Editor expects separate Types for Images, Files and Flash - but you can set things however you wish. You may want a single Type for everything, or you may have multiple image Types for different member groups and so on. However you set things, ensure that ResourceTypes names are unique and alphanumeric (no spaces or strange characters)

TIP: The Allowed extensions feature is very powerful. You may have a single EE Upload Destination for files, but you need an upload field for only PDF files and another for only XLS files. Make two Resource Types - One called PDF and one called Excel. Using the same Upload Destination for both but adjust the Allowed extensions field for "pdf" and "xls,xlsx" accordingly. This kind of control could only be provided by a dedicated add-on before EECK!

MSM configuration

EECK stores all it's settings on a per-site basis. Ensure that you confirm global and per-field settings for each site you have installed.

Adding a CK Editor Fieldtype

TIP: Remember to ensure that any Member Group who will use this custom field has access to the EE Upload Destinations referred to by the Resource Types you select. They will not be able to use the CK Finder if not.

Adding a CK Finder Fieldtype

When viewing these fieldtypes in the Publish form, the relative URL to the selected file will be shown in a read-only form field to allow copy-and-paste to another place.

TIP: For super-efficient image galleries, add multiple CK Finder Fieldtypes to a Matrix field. Then use the in-entry-form 'Upload file' tool to batch upload multiple images with a single form submission.

Template tags

CK Editor Fieldtype

This Fieldtype is output via a single variable tag such as

{my_field_name}

No parameters or other variables are available.

CK Finder Fieldtype

This Fieldtype can be output as a single tag or as a tag pair. When output as a single tag, only the file URL will be returned.

Examples

Single tag

{my_field_name}

Tag pair

{my_field_name}
{eeck_url}, {eeck_size} Kb
{/my_field_name}

Parameters

The filesize and modified date for all files are stored in EE when they are selected. This data will not be updated if files are adjusted via FTP or from another instance of CK Finder.

size=

size="k"

Set to "k" to output filesize in Kb, "m" to output in "Mb".

date_format=

date_format="d/m/Y H:s"

Set to any valid PHP date parameters.

file_lookup=

file_lookup="y"

When set to "y", will force filesize and modified date info to be retrieved from the file on disk. Default behaviour is to use information captured from CK Finder when the file was selected.

Variables

eeck_url

{eeck_url}

The full path to the selected file

eeck_filename

{eeck_filename}

The filename of the selected file

eeck_size

{eeck_size}

The filesize of the selected file, in Kb or Mb according to the size parameter

eeck_date

{eeck_date}

The modified date of the file, formatted as per the date_format parameter.

eeck_extension

{eeck_extension}

The file extension of the linked file. Useful for including icons or applying CSS classes.

Matrix Integration

Both Fieldtypes are Matrix Compatible. The CK Finder Fieldtype has a smaller interface when within Matrix in the Publish Form, showing only the filename and not the full path. We recommend a simplified toolbar for CK Editor Fieldtypes within Matrix, such as our Slimline configuration.

NOTE: The template tag parameters for CK Finder are not compatible with Matrix. Use only single tags such as

{my_field_name}

The Standalone Image Library

A standalone copy of the CK Finder file library is also provided. This can be used as an alternative to the built-in File Manager.

To access the Library, select Add-ons > Modules > CK Finder file library.

This version of the Library will display one Resource Type at a time, with a drop-down list above to switch.

You can replace the link to the native File Manager by installing the Accessory (see installation instructions).

Using with Safecracker

After careful consideration, we have decided not to directly support Safecracker with EECK (although we're helping with CK Finder, see below). This is mainly due to lack of time and the fact that we wouldn't expose a fieldtype of this nature on the front-end of our own projects.

This does not mean that you cannot use CK Editor and CK Finder on your Safecracker forms, it just means you'll have to do the javascript integration yourself.

CK Editor is very simple to integrate with any textarea.

CK Finder is slightly more complex as it needs to be authenticated first. To enable you to use the same instance and configuration of CK Finder as you use in the control panel, we have (with version 1.1) introduced a new template tag:

{exp:dm_eeck:authenticate}

This tag runs the EECK authentication routines to check if the current user has access to CK Finder. No output is produced or errors returned if they do not. This tag should be placed early in your Safecracker form template.

You can then create your own uploaders as per the integration documentation.

Known issues

State of the project

This Add-on exists for the benefit of DM Logic and it's clients. It's being released to the community to give a little back, and in the hope we might get some useful feedback that helps us make it better. EECK is intended for developers or end-users with some technical knowledge.

EECK started life as an integration between CK Editor and the EE2 File Library. We produced a version for a project whereby the "Browse Server" buttons in Editor dialogues launched the EE File Manager. This was used for one site before everyone involved realised the EE2 File Manager is not really suitable for more than a handful of files. So a solution was needed to allow easy browsing of hundreds of files, creation of subfolders, better File Fieldtype etc. A cheap license and tight integration with EE's Upload Destinations and permissions were also important.

Wygwam was considered, but it lacked a File Fieldtype, and the integration with Upload Locations and Permissions wasn't flexible enough.

TinyMCE + File and Image Managers is closer to requirements, but we don't like it's UI, and the separate licenses are an annoyance (although file handling is superior to CK Finder in terms of features).

We liked the look and feel of CK Finder, so realised the answer was to make a quick CK Editor Fieldtype (which is a very simple job) and concentrate on tightly integrating CK Finder (which turned out to be very complex), The end result is something that plays to the strengths of both EE and CK Finder and is extremely powerful. A bit of juggling to make it all play with Matrix and we were there.

Support

We regret that we do not have the resources to offer regular support for EECK, but we'll check in on the forum at Devot-ee when we can.