Add editor: CKeditor

Happily accepting patches.

First pass. Note that this only works with the current nightly build. The current beta is pretty old. Would have saved me from a few hours of debugging if I had known that.

This will go into new 3.x branch. Until then, we can get the basics working (most stuff should work already) and perhaps also work on Drupal plugins support, if we want to.

Probably it's best to strip the Drupal plugin stuff first and commit a basic support first.

Committed attached patch to 3.x (only).

Only works with nightly build. However, the entire editor, its skin/theme, and behavior looks still very alpha. So this is primarily for testing purposes.

This patch seems to be broken with the latest nightly of CKEditor, and dev version of wysiwyg, I can save editor settings in wysiwyg prefs, but just get blank area for body region when creating a node.

FYI: CKEditor is now RC. Per the CKEditor web site: "This is supposed to be the last version before the final release."

Wow, This will be great in WYSIWYG!!

There is a problem with the verison detection of CKEditor 3.0 RC: The current version is not properly detected anymore, because the changed the version string.

I attached a patch for this.

Please use diff -up for creating patches.

Thanks for reporting, reviewing, and testing! Committed attached patch to all 3.x branches.

A new development snapshot will be available within the next 12 hours. This improvement will be available in the next official release.

Name for "Paste from word" is also incorrect

Just thought I'd comment that this patch also works with the 2.0 version of the module. It's also the only editor I've been able to get to work seamlessly with a CDN. CKEditor FTW!

Also, CKEditor 3.0 was just released today - still working, however it doesn't seem to be working once javascript is aggregated. Making so that wysiwyg api does not preprocess the editor's javascript makes the editor work.

EDIT

Subscribing

Looking good! I'd be fine to use this even before supporting addtl skins (like the "Kama" skin which is nice!), but I just realized that img_assist integration is only available for TinyMCE (right?)...

subscribing, wysiwyg + ckeditor, the best combo ever :)

subscribe

subscribing

I have tried applying all of the patches but I get the following error:
Parse error: syntax error, unexpected '(', expecting T_STRING in /nfs/c01/h10/mnt/35735/domains/mysite.com/html/modules/wysiwyg/editors/ckeditor.inc on line 229

And line 229 is:
/**
* Attach this editor to a target element.
*/
Drupal.wysiwyg.editor.attach.ckeditor = function(context, params, settings) {
// Apply editor instance settings.
CKEDITOR.config.customConfig = '';

This is still a feature request.

subscribing

subscribe

subscribing

yes please asap

Attached some files you can just drop into the 2.x-dev version. Worked nicely for me after a cache flush. Also updated the download url in ckeditor.inc

I haven't tested all the buttons but the basics are there.

Anyone tried this patch with the stable (not dev) of WYSIWYG?

Subscribing.

Patch #33 works until I turn javascript aggregation on.

It works with the dev version. Thanks.

subscribe

subscribe

subscribe

having the same problem with javascript aggregation on

Subscribe

#31 works great. thanks!

+1 Subscribing

#31 worked well for me - THANK YOU!

The HTML block format button is not working. Here is a .zip - same as the #31 drop-in but with the Format combo-box fixed.

Could you please provide patches for HEAD? Zips are a bit hard to review.
Could someone please investigate why JavaScript aggregation breaks the editor? Are there any errors, etc?
I'd love to get this fully operational but I've got my hands full atm.

Plugins correct name

Guys, I noticed some of the plugins called in the wysiwyg_ckeditor_plugins function (ckeditor.inc) were not being called. The reason for that was the wrong name, so find below the correct names if you want to use those plugins:

'Font' => t('Font'), /* not FontName */
'Styles' => t('Font style'), /* not Style */
'Scayt' => t('Check spelling'), /* not SpellCheck*/
'HorizontalRule' => t('Horizontal rule'), /* not Rule */

I thought this might help someone...

TwoD - Are you asking for a 3.x or 2.x patch? The reason why were using a zip file was because it makes it easy to just drop in the files to 2.x, until the 3.x is released and back-ported to 2.x

Also - I have been unable to find any clear instructions for how to create a patch in windows (without having to check out the cvs repository into an ide like eclipse)

Okay - here's my first crack at a patch. I created it with TortoiseSVN and the first few header lines are a bit different than the cvs-generated ones I've seen so I'm not sure if its directly usable or not. This is #31 with the fixes to the button names brought up by jax and myself.

As for the javascript aggregation issue I have no idea how to debug that so I'm leaving it for another.

And here is an updated copy of the drop-in files for those that want it as a zip.

Another issue that I'm not sure how to debug: The CSS > Block formats setting from the front-end UI has no effect.

3.x patches for now, backporting should be easy once everything's ok.
The patch in #48 seems ok at first glance. Will test later.

subscribe

+1 subscribe

+1 subscribe

sub

sub

sub

Just to give ya some heads up... IMCE works with the bridge here: http://drupal.org/node/533168#new

subscribe

I have a multi-site installation. I've applied the patches and installed CKEditor. It works as expected on my www site (www.example.com), but doesn't work on any other sites (abc.example.com, xyz.example.com). Wysiwig is installed in the sites/all folder and is shared by all the sites.

Has anyone else run into this problem? Any ideas what needs to be modified?

Thank you.

Subscribe.

Subscribe.

Subscribe

subscribe

(BTW: added the files in #49 which installed the editor just fine, but I am still not able to select it for any input formats..)

Do we need to add filefield insert support here or at filefile insert issues?

http://drupal.org/node/580308 - FF insert issue

The CKeditor implementation needs support for "native plugins" as well as our own "Drupal plugins", FileField can then create a plugin either for specific use with CKeditor or one which can be used by all editors supporting Drupal plugins.

@vegardjo - do you mean that it does not show up in the combobox in the editors table column here http://peaks.eclg.org/admin/settings/wysiwyg?

The javascript aggregation doesn´t work. Here is a piece of the ckeditor code:
var x='editor'+ ++l;
If you aggregate this piece of code it will look like this:
var x='editor'+++l;
This will cause an error (invalid increment operand).
There are a few more pieces of code like this.
A possible solution would be to disable the javascript aggregation only for the ckeditor js files.

My workaround for now is to disable the aggregation for the complete wysiwyg module. Perhaps someone wants to use this patch.
I wrote this patch for the 2.x-dev version but it should work with the latest stable version too.

Sry, i didn´t want to change the category and status of THIS thread. Don´t work on more than one thread at the same time :)

@livingegg well, yes. Or that I cannot select anything from the drop down menu, as nothing drops down. See: http://skitch.com/vegardjo/nygnw/wysiwyg-localhost

Also, I don't get the install instructions for any other editors when CKEditor is installed, so I don't know what would happen if more editors were installed..

@vegardjo. Please see Q: How do I select a different installed editor? The box is disabled. You must click "Remove" to delete the old editor profile before assigning a new one to the input formats. You've also deleted the editor which was configured for that format, which is why Wysiwyg module reverts back to "No editor".

You can click the fieldset at the bottom of admin/settings/wysiwyg to see the installation instructions for all editors at all times.

Ah, stupid me.. In addition I made the error of *replacing* the original editors folder with the one I downloaded from here, not just adding the new files for CKEditor, resulting in the deletion of the files for the other editors, leaving me with CKeditor as my only choice!

anyways, thanks! :)

anybody already write a patch to configure settings for CKEditor?

Description of problem: admin/settings/wysiwyg and click "edit" near format with ckeditor. Now if we change some settings then editor will not use default settings. For example try to select all buttons and see what you get.

For fckeditor there is file fckeditor.config.js in wysiwyg/editors/js/ directory. And I think we need to write config file for ckeditor too for correct work...

anybody already write a patch to configure settings for CKEditor? )

--
One of my projects on drupal is site about Android news.

Subscribe. Would be a nice thing to have this CKEditor!

I've got latest Drupal 6.x on a Pressflow install, Wysiwyg 2.x-dev, files from #49 dropped in, the patch from #68 applied, and ckeditor 3.0 in the appropriate place.

I get this error over 30 times when I edit a node, with different values for the argument number and the first line number:

warning: Missing argument 2 for myDrupal_add_js(), called in /data/distro01/pressflow/sites/communitydance.eu/modules/wysiwyg/wysiwyg.module on line 139 and defined in /data/distro01/pressflow/sites/communitydance.eu/modules/wysiwyg/wysiwyg.module on line 953.

Oddly enough, the actual text editing box appears to work ok otherwise. Thoughts anyone?

I did not try it, but try to replace

function myDrupal_add_js($path, $type, $scope, $defer, $cache, $preprocess) {
if(!$type) $type = 'module';
if(!$scope) $scope = 'header';
if(!$defer) $defer = FALSE;
if(!$cache) $cache = TRUE;
drupal_add_js($path, $type, $scope, $defer, $cache, FALSE);
}

with:

function myDrupal_add_js($path, $type = 'module', $scope = 'header', $defer = FALSE, $cache = TRUE) {
drupal_add_js($path, $type, $scope, $defer, $cache, FALSE);
}

@glueckskind #76 - Works like a charm! Yay!

Subscribe+
waiting some fix for javascript aggregation

Another minor report - Teaser break button doesn't appear in the editor when 'Teaser break' is selected to appear in the CKEditor profile.

I do some work on intergration CKEditor into drupal.

If you will apply this patch to dev version, then it have to work. And buttons preferences on editor settings page have to works to.
My patch based on and include next patches:
http://drupal.org/files/issues/wysiwyg-HEAD.ckeditor_0.patch
http://drupal.org/files/issues/wysiwyg-HEAD.ckeditor-version.patch
http://drupal.org/files/issues/ckeditor.inc_fixedlists.patch

Using HEAD + dropping CKEditor 3.0 in sites/all/libraries fails. I can configure CKEditor, but it doesn't show up. Something is wrong with the skin also (WYSIWYG API refers to 'default' while no 'default' skin exists).

I'm going to stick with the stable release + FCKEditor for now :)

My patch in post #80 fix problem with button settings and with skin. Try to apply it.

Or if you want you can simply add two files from archive below to your wysiwyg module folder. I tested it with 6.x-2.0 and 6.x-2.x-dev (2009-Sep-18) versions of wysiwyg.

--
Yas's blog

YES. it works. (don't know how to test Skin)

from now, some bug still waiting for fix:
- Language
- Editor appearance settings
- JavaScript aggregation

This still doesn't work with Safari on a Mac. Works great on FF though. Anybody able to help out the Safari Macians?

Subscribing... can't wait!

To be more specific, it just all stays on the same row. (See attached Screenshot) So it must be the CSS that's off (I'm guessing.) Any thoughts?

Is demo of ckeditor (http://ckeditor.com/demo) working correctly on safari?

I browse it with Safari/Mac OS 10.6 and it comes up fine and seem to work.

What do you want to try with it?

CinemaSaville, is it working correctly on Garland theme ?

Given the amount of people opening issues for CKeditor, we should backport this sucker to 2.x.

droplet, same on Garland. With the default settings, everything looks fine, but once I start to pick and choose buttons, that's when it starts to go haywire. I wouldn't mind, but I'm trying to use IMCE with this as well.

Hi every one,

It's been working fine for me with http://drupal.org/node/462146#comment-2083296 and imce_wysiwyg is working to with the last patch findable at http://drupal.org/node/533168#comment-2052198

Thank you for this greats works...

RedKing, you are welcome ;)

Thank's Yas375

Line Break isn't working. The "div page-break-after" is created in source code but the page break isn't effective on my front page. It's the only think I've presently find who's not working.

I've deactivate line break remover in ckeditor profiles and in input formats so I presume that's coming from ckeditor module.

EDIT :

I apologize because it's not coming from wysiwyg module. I just discover i've a div tag who's going to alter node output when I'm trying to preview or save it.

Feature request...

Support insert events so we can use http://drupal.org/project/filefield_insert w/ ckeditor.

case sensitive problem.

'Width' => '100%',
'Height' => 420,

I tried to change the width/height value but don't work. after read some docs. I found that some case sensitive problem here.

changed to :

'width' => '100%',
'height' => 420,

also here may need to update.
'IncludeLatinEntities' => FALSE,
'IncludeGreekEntities' => FALSE,

==>

config.entities_greek = false;
config.entities_latin = false;

Just tried the CKEditor demo on their website and....

OOOW MY EYES! Totally wrong to have a wysiwyg editor's colors compete with a website's colors. But it looks like the editor has "skins" including the old FCKeditor look.

I have ckeditor working nicely & it's surely a huge improvement but I seem to be missing the split body teaser bits? Anyone else have that working? ...theres not even a checkbox for it in the profiles. I also couldn't get the IMCE bits to work as suggested above.

Really looking forward to an official release of all these compiled patches and other goodies, I must have missed something in my install to be without those bits above. Still this is already my favorite wysiwyg by far .. it has clean body resize and a nice full screen option, and yes it is super fucking fast! Once imce and other drupal integrations bits are fully sorted this will be so sweeet!

Cheers for the patches!!

Have it working on IE with IMCE. (with above patches to wysiwyg and imce_wsywig)
However on Chrome the buttons are all in one row, as discussed above.
If I don't select any buttons, all unchecked, then all the buttons line up nicely, of course I don't get any IMCE that way

Works
FireFox 3.0.14
IE8

Doesn't Work (buttons stretched)
Chrome3
Safari 4

Not sure if this goes in this thread, let me know if wrong, just passing this finding along

I have a CSS issue with FCKeditor and CKeditor using Wysiwyg,
I am using Vitzo-flex theme

When I selected 'Use Theme CSS' it didn't adopt my themes style, well not all of it, and the text was all centered and the Center-Justify button was defaulted

When I selected the editors style, the centering issue wasnt there but neither was my theme style

When I changed to Define CSS and used the following path %b%t/css/style.css
it worked and adopted my themes style and centering issue went away

True for both FCKeditor and CKeditor under wysiwyg

+1, will test soon

subscribe

The button wrapping issue in different browsers appears like it might be a ckeditor issue

I created a new toolbar configuration, actually I took the one sample from the developers documentation and took out the line break '/'

Then I modified the sample ckeditor provides, skin.html, to add the new toolbar on page.

In IE the toolbar wraps automatically, if I resize window etc. In chrome/safari it does,t, just extends out to the right and some buttons go missing depending on browser width

(someone above posted a picture of this)

I posted at the ckeditor forum
http://cksource.com/forums/viewtopic.php?f=11&t=16051

Of course it could mean that Drupal integration isn't adding any row breaks '/' in the configuration and it should be.

subscribe

Its even worse in Chrome for me nothing shows up at all .. I have it disabled by default. The link to switch to wysiwyg does not even appear.

Good thing this is on my dev server! I would have a buncha pissed chrome users right about now...
:::sigh::: guess I need to still stick with fckeditor for the time being.

Cheers for the progress though, its nearly working!

2allan1015: I will try to fix this problem on sunday. thanks for hint with '/' =)

@macrocosm: How about working with others here on a patch instead of complaining?

macrocosm
What does 'the link to switch to wysiwyg does not even appear' mean?
Just trying to help understand where the problem might be.

So it works in non Chrome browsers?

Of course dev servers, ckeditor integration is unreleased, not on the official support list, etc.

Sunday?!! We have to wait till Sunday :) :)

While your in there, perhasp a look at the ckeditor.inc file at this point

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
+  $settings = array(
+    'basePath' => base_path() . $editor['library path'] . '/',
+    'SkinPath' => base_path() . $editor['library path'] . '/editor/skins/' . $theme . '/',

I am a complete hack at this, but thew skin path doesn't look right? perhaps take out the /editor part? Not sure. I tried doing that and forcing the skin name], like this:

'SkinPath' => base_path() . $editor['library path'] . '/skins/office2003' . '/',

but nothing changed in display, so I may be off base as well

basePath / SkinPath are some old things in Fckeditor.

try this:

'skin' => 'v2',

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.skin

fixed width / height / ProcessHTMLEntities options
add Language / Resizing button / Toolbar location support

droplet, using 'skin' instead of SkinPath in the ckeditor.inc file did the trick
(before applying patch in 111)

$settings = array(
    'basePath' => base_path() . $editor['library path'] . '/',
    'skin' => 'office2003',
    'width' => '100%',
    'height' => '420',
    // By default, CKeditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKeditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    'IncludeLatinEntities' => FALSE,
    'IncludeGreekEntities' => FALSE,
  );

@Sun .. that wasnt a complaint it was a report back ... u notice the "needs review" status of this thread? I tested the patches and supplied my thoughts.

@allan1015 .. I have enabled the on/off switch for the editor. It sits below the body field on the left, when you click it it enables/disables the wysiwyg, pretty standard stuff ... and is an option in all of the editors I've tried in Drupal. I keep the editor disabled by default as I feel it gets in the way as I usually dont need it ... and on the occasion that I do need it I simple click the enable button... simple.

My report was that the editor did not load at all in Google Chrome (because thats my default setting) however the enable/disable button did not appear which it does in FireFox.

I have attempted to combine most of the patches to ckeditor.inc and ckeditor-3.0.js , mostly this is a combo of yas375, livingegg, and the last one from droplet.

I picked and choose where there where conflicts between peoples patches, deferred to Yas375 on most of the button stuff as his code allows buttons to wrap in IE, not all on one line.

I pushed all the buttons and made sure something happen, didn't do a full test of all functions

also added the change to the skin attribute as discussed in last two posts. Its set for office2003, you may want to set it for kama which seems to be the default.

Ive no idea how to make patches so its as a zip

Also, livingegg had added the following after the 'Height' => 420, line. I didn't put them in as I was unclear what they did

'LinkBrowser' => FALSE,
'LinkUpload' => FALSE,
'ImageBrowser' => FALSE,
'ImageUpload' => FALSE,
'FlashBrowser' => FALSE,
'FlashUpload' => FALSE,

Allan

subscribing

@allan1015:

>Ive no idea how to make patches

http://drupal.org/patch

Ok, thanks
the core issue for me was no idea what would be the stable release I would patch against? There are conflicting changes from various authors,etc. I was trying I guess to offer perhaps a new baseline that seem to have a workable combination of everyones input so far.

But Ill keep your link in mind for future

Allan

Just to clear things up a bit. We should patch against 7.x-3.x-dev aka HEAD. We'll then backport to 6.x-2.x-dev aka DRUPAL-6--2. For the moment, the code in 3.x and 2.x are similar enough to let one grab the files editors/ckeditor.inc and editors/js/ckeditor.js from D7 and directly use them in the D6 branch (probably also in D5), but that might change after a while.
The major difference (CKeditor being in focus) is thus that the D7 version already has the implementation files in CVS, while the other branches don't. So if we patch against D7/HEAD, it'll be less code to review.

I'm currently working on compiling all the changes above into one patch (just some testing left), as well as trying to add support for native and Drupal plugins. The Drupal plugin support is the most tricky part since the documentation does not yet cover the features/classes we need to use for a good enough implementation.

TwoD, since you're about to start applying patches and doing additional work on this, I thought I'd quickly throw in 1 more for review. This is against the 7.x-3.x-dev version.

First, it changes the wysiwyg_ckeditor_themes function to scan the CKEditor library for skins and builds the array from that. This is a compliment to the patch I submitted earlier in issue 414496.
The other change is to the 'skin' setting so that it returns a default if the user hasn't configured the editor yet (ie - no settings exist in the database) and sets the default to be kama instead of office2003 since that seems to be the new default skin for CKEditor.

Edit: And I look forward to your updates and Drupal module integration (once the documentation is available, of course)!

subscribing..

Oops. That last patch should have used drupal_set_message() and not die(). Here's that tweak.
Also, the isset() line in wysiwyg_ckeditor_settings() might not be correct or necessary if we change the core module to use defined keys as discussed here.

Subscribing. Looking fantastic.

subscribe

subscribe

subscribing

there should be a "subscribe" button...

subscribe.

there should be a "subscribe" button...

What a simple yet brilliant idea, unfortunately, drupal.org would never go for something like that.

Subscribe also

(and a +1 for the subscribe button idea)

+  isset($config['theme']) ? $settings['skin'] = $theme : $settings['skin'] = 'kama';

should be replaced with

+  $settings['skin'] = isset($config['theme']) ? $theme : 'kama';

which is the correct way to use a ternary operator.

I prefer this

    if (isset($config['theme'])) {
     $settings['skin'] = $theme;
    }

default skin value defined in Ckeditor already

Subscribing (I hate to pollute threads just for this... :( )

Regarding the subscribe thing, here's Derek Wright's (+ Chad & David's) great summary: http://3281d.com/2009/03/27/death-to-subscribe-comments

You can currently subscribe to all issues of a project, by clicking the 'Subscribe' button at the top of any project's issue tracker, leading you someplace like here: http://drupal.org/project/issues/subscribe-mail/wysiwyg

But yeah, as Derek said, it does kind of suck that there's not another way (yet) to subscribe to a single issue :p

subscribe

Hi,

I read tons of info about ckeditor patches for drupal 6.
Can somebody tell me if there is a STABLE all-in-one patch that works for drupal 6 integration?
My time is limited to test everything, I was wondering of the ckeditor can be implemented in drupal 6.

Thanks

Hi nicof,

Follow the instructions in #82.

Thomas

Hi,

I'm using ckeditor since a few weeks and its running well with the provided patches. Stable, no problems at all. Thanks to the developers!

Does anybody know how to integrate a file browser such as ckfinder? I can't get it work in my multisite environment.

Anyone checked out http://drupal.org/project/ckeditor ?

Subscribing

All-in-one patch for ckEditor support v.1

I have fixed bug with chrome and safari. Now button seems good!
And I create global patch, which you can simply apply even for version 6.x-2.0 and ckeditor will working. This big patch contain patches and fixes from: #3, #13, #14, #80, #82, #96, #111, #112, #114, #121 and some of my fixes.

Attention! This patch contain fixes from #121, but if you would like set theme for ckEditor in admin area then you nave to see #414496: Allow to select editor theme/skin.

So, you can apply my patch by running it from your wysiwyg module directory:

patch -p1 < wysiwyg-6.x-2.0_ckeditor_support_yas_v1.patch

Or you can add files from attached archive to your wysiwyg module directory.

re: #138: #606404: Please abandon CKEditor - WYSIWYG HTML editor module

sub

CKEditor wouldn't load for me if javascript aggregation is enabled. This patch excludes the editor's js file from Drupals javascript preprocessing.

re: #142: sub for what?

sub for subscribe...

does Wysiwyg support editor plugins ?
both Fckeditor / Ckeditor extra plugins not work well.

@droplet, It depends on the editor implementation. The FCKeditor implementation has support for 'native' FCKeditor plugins as well as dialog-less 'Drupal plugins' (Teaser Break, but not Image Assist). Both types of plugins require hook_wysiwyg_plugin() to be implemented, describing the plugin for the module/editor.

I'm currently working on CKeditor support and I have the same amount of support for Drupal plugins as FCKeditor does, but I haven't started with native plugins yet.

I'm also checking to make sure all of the above fixes are included (thanks Yas375 for combining them all, that makes for a good reference). I would have put a patch in here now but I'm on the wrong computer atm (just got home from a quick hunting trip :)) so that probably won't be until later tonight. :/

Yas375 - THANKS!

Can anyone verify - the only way to change the skin/theme is in the code, there is no browser/admin interface place for that, right?

allan1015, with my last patch only one way to change skin. You have to add one line in editors/ckeditor.inc at the end of function wysiwyg_ckeditor_settings add line:
$settings['skin'] = 'office2003';

You will have something like this:

  if (isset($config['theme'])) {
    $settings['skin'] = $config['theme'];
  }
  $settings['skin'] = 'office2003';
  return $settings;

If you would like to set skin from administration page, then you have to see #414496: Allow to select editor theme/skin and try apply patches from there. I haven't time to test this patches. That's why I don't include code from that patches. Maybe I will do this later...

Yas375 thanks

I did basically as you had indicated, but like this

  if (isset($config['theme'])) {
    $settings['skin'] = $config['theme'];
  } else {
    $settings['skin'] = 'office2003';
  }

I'll check out that admin patch later tonight, I guess i missed that one when I searched, thanks

Allan

#140 - Yas375 >> Thanks. The patch works perfect and spares me time.
Cheers

Update: 'Optimize JavaScript files' option must be disabled in site configuration - performance.

Umm, so should I be using Yas375's combined patch or wait for TwoD's?

guys/gals - please dont hate me for asking this here... I have wysiwyg-6.x.2.0 with ckeditor v3.0.1 working great (v3.0.1 was released 10/17/09 and works without problem just by untar'n it into sites/all/libraries location) with the patches from this post... my trouble comes in when I try to use the "CKEditor v3.x plugin for SyntaxHighlighter" located here and here. the deal is... I have the ckeditor SyntaxHighlighter plugin working just fine when going to www.xxxx.com/drupal/sites/all/libraries/_samples/index.html - all that was involved was 6 lines of code ;

1 line in sites/all/modules/wysiwyg/editors/ckeditor.inc in the function wysiwyg_ckeditor_settings ... $settings = array(
- I added 'customConfig' => base_path() . $editor['library path'] . '/config.js',

5 lines in sites/all/libraries/ckeditor/config.js
- I added

CKEDITOR.editorConfig = function( config )
{
        config.extraPlugins = 'syntaxhighlight';
        config.toolbar_Full.push(['Code']);
};

as I mentioned, everything works great when going to www.xxxx.com/drupal/sites/all/libraries/_samples/index.html - I can see my button and all, and the plugin fully works. but when going to use it within my drupal site, I have NO BUTTON! I've tried many different things with the sites/all/modules/wysiwyg/editors/ckeditor.inc file, to get it to work with drupal, but it just doesnt work... am I missing something here? anyone have suggestions? I can get the BUTTON to show in the wysiwyg profiles ala the IMCE button using IMCE_bridge using the latest patch to work with CKeditor v3, but again nothing shows when I use ckeditor thru drupal as normal.

little help?

And here it is! This patch adds support for native plugins and partial support for Drupal plugins. Drupal plugin support is about at the same level as for FKCeditor meaning Teaser Break will work, but Image Assist and other dialog based plugins will not. I included most of the features above but removed the form related buttons and some others, which either seemed to have little purpose on a Drupal page or because the corresponding buttons in other editors are already disabled.

I applied omerida's patch to disable aggregation for the CKeditor because it doesn't handle the compression well.

I've not figured out a good way to handle translation files for native plugins yet, so implementing those might throw an error.

@Yas375, I could not find any references to the bbcode, dragresizetable and tablecommands plugins so I did not include those. We'd also like to handle grouping of buttons in some way which works for all editors, see #277954: Allow to sort editor buttons. Until that's fixed, that part could be put in a separate patch as a temporary fix.

@agentdcooper, the first rule of Drupal is "Don't hack core!", and we try to apply a similar rule in Wysiwyg module. ;) There's a hook you can implement to 'describe' native plugins to Wysiwyg moule and let it be passed on to the editor. I've created an example module (for D6) implementing the hook to make syntax highlighting available, see the attached zip.

Attached is a patch for D7 (Wysiwyg module needs a few patches there too or plugins don't work) and the complete files for testing with D6. Hopefully I haven't missed anything. Questions and suggestions are as always welcome.

Thanks for your work, TwoD!

when can we expect this patch in 6.x-2.x-dev?

"complete files for testing with D6" does not work for me , tested on D6-3-dev / D6-2-dev
wysiwyg-HEAD_ckeditor.patch , not yet test, failed to patch

subscribe

Awesome job, TwoD! This looks mostly ready to fly! :)

I'd suggest to incorporate the following issues and afterwards commit to HEAD (7.x-3.x), backport to DRUPAL-6--3 (where ckeditor.* already exists), and lastly, copy and add that to DRUPAL-6--2.

+++ editors/ckeditor.inc	19 Oct 2009 10:18:40 -0000
@@ -29,6 +33,13 @@ function wysiwyg_ckeditor_editor() {
     'plugin settings callback' => 'wysiwyg_ckeditor_plugin_settings',
+     'proxy plugin' => array(
+      'drupal' => array(
+        'load' => TRUE,
+        'proxy' => TRUE,
+      ),

Wrong indentation here.

+++ editors/ckeditor.inc	19 Oct 2009 10:18:40 -0000
@@ -76,7 +87,18 @@ function wysiwyg_ckeditor_version($edito
 function wysiwyg_ckeditor_themes($editor, $profile) {
...
+  // @todo Don't return skin names here.
+  //return array('kama', 'office2003', 'v2');

Hm - I don't understand this @todo...?

+++ editors/ckeditor.inc	19 Oct 2009 10:18:40 -0000
@@ -139,6 +178,22 @@ function wysiwyg_ckeditor_settings($edit
+          else if ($type == 'buttons' && empty($plugins[$plugin]['internal'])) {

s/else if/elseif/

+++ editors/ckeditor.inc	19 Oct 2009 10:18:40 -0000
@@ -164,12 +222,15 @@ function wysiwyg_ckeditor_plugin_setting
-      // Add path for native external plugins; internal ones do not need a path.
+      // Add path for native external plugins; internal ones default to the standard path.

Doesn't wrap at 80 chars.

+++ editors/ckeditor.inc	19 Oct 2009 10:18:40 -0000
@@ -164,12 +222,15 @@ function wysiwyg_ckeditor_plugin_setting
+        $settings[$name]['path'] =  base_path() . $editor['library path'] . '/plugins/' . $name . '/';

Duplicate space here.

+++ editors/ckeditor.inc	19 Oct 2009 10:18:40 -0000
@@ -177,7 +238,26 @@ function wysiwyg_ckeditor_plugin_setting
+/**
  * Return internal plugins for this editor; semi-implementation of hook_wysiwyg_plugin().
+ * Excluded native plugins: About, Button, Checkbox, Form, HiddenField, ImageButton, NewPage, PageBreak, Print, Radio, Select, Save, TextField, Textarea, Templates, 
  */
 function wysiwyg_ckeditor_plugins($editor) {

There should be a blank line between the summary and the description and the description should wrap at 80 chars.

See http://drupal.org/node/1354 for more info.

+++ editors/js/ckeditor-3.0.js	19 Oct 2009 10:18:40 -0000
@@ -1,6 +1,37 @@
+  // Initialize editor configurations.
+  CKEDITOR.on('focus', function(ev) {
+    Drupal.wysiwyg.activeId = ev.editor.name;

This comment doesn't really map to the code. :)

+++ editors/js/ckeditor-3.0.js	19 Oct 2009 10:18:40 -0000
@@ -1,6 +1,37 @@
+  // Plugins must only be loaded once. Only the settings from the first format
+  // will be used but they're identical anyway.
+  var registeredPlugins = {};

Hm... that won't always be true. But I think we can go with that for the time being (i.e. until 3.x is in shape).

+++ editors/js/ckeditor-3.0.js	19 Oct 2009 10:18:40 -0000
@@ -8,6 +39,75 @@ Drupal.wysiwyg.editor.attach.ckeditor = 
+    pluginsLoaded: function(ev) {
+  	  // Override the conversion methods to let Drupal plugins modify the data.
+      var editor = ev.editor;

Comment has a wrong indentation.

Don't forget CHANGELOG.txt, and, for convenience:

#462146 by TwoD: Added support for CKeditor.

I'm on crack. Are you, too?

Fixed the issues sun mentioned and did some more testing.
Committed to 7.x-3.x-dev and backported to 5.x-2.x-dev, 6.x-2.x-dev, 6.x-3.x-dev. (All using identical files.)

Thanks to everyone for testing, patching and reporting!
This fix will be part of the next -dev snapshots and upcoming releases.
Please report any new issues separately.

thanks much TwoD, that syntax_module was a huge help in allowing me to understand how wysiwyg works with CKeditor + plugins, I am very thankful for your assistance! things are looking great for drupal + ckeditor + wysiwyg module w/ the new patches.

oh, one thing I gonna mention... I did change in ckeditor.inc was the 'versions' array within function wysiwyg_ckeditor_editor() - I changed it to this to support ckeditor 3.0.1, otherwise the newest version of ckeditor would not work with this wysiwyg module.

    'proxy plugin settings callback' => 'wysiwyg_ckeditor_proxy_plugin_settings',
    'versions' => array(
      '3.0' => array(
        'js files' => array('ckeditor-3.0.js'),
      ),
    ),
  );
  return $editor;

((essentially I shortened it TO just '3.0')) works for me... thanks for everyones work here, many praises! =)

happy daze

@nicof, re #151 - see my patch in #143 for js aggregation

#160 worked great. Cheers

Please continue 3.0.1 discussion in #610132: CKEditor 3.0.1, stylesheets and version check. or create a new issue if it's something else.

+++ editors/ckeditor.inc	20 Oct 2009 02:26:00 -0000
@@ -17,11 +17,15 @@ function wysiwyg_ckeditor_editor() {
-        'files' => array('ckeditor_source.js'),
+         'files' => array(

Problem. :)

+++ editors/ckeditor.inc	20 Oct 2009 02:26:00 -0000
@@ -76,7 +87,17 @@ function wysiwyg_ckeditor_version($edito
+  $dir_handle = @opendir($path) or drupal_set_message('Unable to open ' . $path, $type = 'error');

dsm() does neither end the request nor prevent this function from proceeding. Hence, the or statement is completely wrong here.

Furthermore,

1) the message will never be displayed, because the editor library would not exist in the first place.

2) the message string does not use t(), and therefore, it's not translatable, and furthermore, $path is being displayed totally unsanitized here.

+++ editors/ckeditor.inc	20 Oct 2009 02:26:00 -0000
@@ -76,7 +87,17 @@ function wysiwyg_ckeditor_version($edito
+    if($file!="." && $file!=".." && $file!="CVS" && $file!=".svn") {

1) There should be a space after an if statement.

2) There should be a space between comparison values.

3) Only use double quotes whenever technically needed. Otherwise, always use single quotes.

+++ editors/ckeditor.inc	20 Oct 2009 02:26:00 -0000
@@ -95,23 +116,27 @@ function wysiwyg_ckeditor_themes($editor
+    // Skin is not really the same as theme.
+    'theme' => 'default',
+    'skin' => $theme,

Now that I know that it's not the same - what is it? :P

+++ editors/ckeditor.inc	20 Oct 2009 02:26:00 -0000
@@ -119,11 +144,24 @@ function wysiwyg_ckeditor_settings($edit
+  // Language
...
+  // Resizing button
...
+  //Toolbar location

1) Missing trailing period (full-stop).

2) Missing leading space in third comment.

3) These inline comments technically do not explain anything one could not obviously figure out by reading the actual code, so they can be removed altogether.

+++ editors/ckeditor.inc	20 Oct 2009 02:26:00 -0000
@@ -177,7 +238,29 @@ function wysiwyg_ckeditor_plugin_setting
+ * Excluded native plugins: About, Button, Checkbox, Form, HiddenField,
+ * ImageButton, NewPage, PageBreak, Print, Radio, Select, Save, TextField,
+ * Textarea, Templates.

Alrighty - if we start to document them, then we also need to document why we omitted them. ;)

+++ editors/js/ckeditor-3.0.js	20 Oct 2009 02:26:00 -0000
@@ -8,6 +38,75 @@ Drupal.wysiwyg.editor.attach.ckeditor = 
+  settings.on = {
+    // Event handlers.
+    instanceReady: function(ev) {
+      var editor = ev.editor;
+      var dtd = CKEDITOR.dtd;
+      var tags = CKEDITOR.tools.extend( {}, dtd.$block, dtd.$listItem, dtd.$tableContent );
+      if (settings.apply_source_formatting) {
...
+        for (var tag in tags) {
+          if (tag == 'pre') {
...
+          this.dataProcessor.writer.setRules(tag, {
...
+        for (var key in tags) {
+          if (tag == 'pre') {
...
+          this.dataProcessor.writer.setRules(tag, {

(++etc) ugh - what happens here? :) I CAN HAZ SOME INLINE DOCS PLZ? :-D

+++ editors/js/ckeditor-3.0.js	20 Oct 2009 02:26:00 -0000
@@ -8,6 +38,75 @@ Drupal.wysiwyg.editor.attach.ckeditor = 
+        });
+  		}
+    }

Strange indentation.

This review is powered by Dreditor.

Ok, I'm staring myself blind at this code...
How about these changes to fix the errors in that committed patch?
Also pulled in the ckeditor patch from #612954: Broken editor settings. to do the cleanup in one place.

Status should change too of course...
Note that to actually use CKEditor with D7 HEAD, you'll need the patch from #612954 too as the API has changed.

+++ editors/ckeditor.inc	29 Oct 2009 03:29:42 -0000
@@ -24,7 +24,7 @@ function wysiwyg_ckeditor_editor() {
         'title' => 'Source',
          'files' => array(
-          'ckeditor_source.js' => array('preprocess' => FALSE),
+           'ckeditor_source.js' => array('preprocess' => FALSE),
         ),

hah - almost! :) Only the indentation on 'files' went wrong in the previous patch, the rest is fine. ;)

+++ editors/ckeditor.inc	29 Oct 2009 03:29:42 -0000
@@ -92,15 +92,20 @@ function wysiwyg_ckeditor_version($edito
+  $dir_handle = @opendir($path);
+  if ($dir_handle) {
+    $themes = array();  
+    while ($file = readdir($dir_handle)) {
+      if ($file != '.' && $file != '..' && $file != 'CVS' && $file != '.svn') {
+        $themes[] = $file;
+      }
     }
+    closedir($dir_handle);

On a second thought, I wonder what this code actually wants to retrieve... I guess, directories. However, there's no condition that would ensure we're not reading a file.

PHP's error suppression we generally try to avoid in Drupal, so the first two lines should actually look like:

if (file_exists($path) && ($dir_handle = opendir($path))) {
  ...
}

+++ editors/js/ckeditor-3.0.js	29 Oct 2009 03:29:42 -0000
@@ -36,13 +36,16 @@ Drupal.wysiwyg.editor.attach.ckeditor = 
+      // See http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Output_Formatting.

@see

+++ editors/js/ckeditor-3.0.js	29 Oct 2009 03:29:42 -0000
@@ -58,7 +61,7 @@ Drupal.wysiwyg.editor.attach.ckeditor = 
-        for (var key in tags) {
+        for (var tag in tags) {

hah, nice! ;)

I'm on crack. Are you, too?

I could have sworn I changed the files line...
Thanks for the reviews btw.

+++ editors/ckeditor.inc	29 Oct 2009 04:47:25 -0000
@@ -92,15 +92,19 @@ function wysiwyg_ckeditor_version($edito
+      if (is_dir($file) && $file != '.' && $file != '..' && $file != 'CVS' && $file != '.svn') {

Should have been:

+      if (is_dir($path . $file) && $file != '.' && $file != '..' && $file != 'CVS' && $file != '.svn') {

This review is powered by Dreditor.

Paste From Word button doesn't currently appear when checked

subscribe

subscribe

The horizontal rule button does not appear when checked as well, along with a couple of others.

what patch or patches you have to use? my patch from #140 or patch from TwoD?

I'm using patch @ #168

I am using #168 with #169.

The Word Problem is due to "PasteWord" instead of "PasteFromWord" in "editors/ckeditor.inc"

I don't know if this patch is any use, but I'll attach it anyway (against HEAD)

The definition of all the buttons can be found here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

That worked for me, thanks Nick! #176

I've fixed the issues mentioned here since my last patch plus a few others from various threads.
I could not confirm the missing Horizontal rule button though, but I did notice inserted hr tags were invisible in D7, which is forced by the Seven theme's style.css.

Please note that you have to re-save the CKEditor profiles for the button name fixes to take effect.

subscribe

Sub.

Could someone please verify that the patch in #178 works? I'd like to get fixed asap. We have a ton of subscribers here, could someone please spare a few minutes?

Looks good :)

I didn't test, but the code looks fine, and we are low on testers in general anyway. I'm sure "they" will complain if anything no longer works in the new snapshot. ;)

I encountered a bug with the implementation of Drupal.wysiwyg.plugins[pluginName].invoke.

var data = { format: 'html', node: editor.getSelection().getSelectedElement() };

data.node is null for me.

After some digging, I found that :

- According to http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.htm... :
Returns: {CKEDITOR.dom.element} The selected element. Null if no selection is available or the selection type is not CKEDITOR.SELECTION_ELEMENT.
- It turns out that editor.getSelection().getType() returns 2, which is CKEDITOR.SELECTION_TEXT.
- It seems that we may return editor.getSelection().getSelectedElement().$ instead, but I am not sure it is required.

This bug would only affect plugins that use the data object, that's why it is not obvious right now, since the only default plugin right now is Break and it does not use the data content.

Thanks for the code review sun! Good point about the snapshot. ;)

Nice find jide! There's an issue somewhere about the data object not being the same for all editors (given the same content and selection), maybe we should cross reference with that issue? (I'm just in for a quick peek now so I don't have time to search for it.) Did everything else seem ok?

The attached patch is now committed to all relevand branches and will soon be in the snapshots. Thanks again to everyone for reviewing, testing, finding bugs and providing patches or otherwise helping to get this done!

The difference between cleanup 3 and 4 are some tweaks to wysiwyg_ckeditor_themes(). Fixed the typo $file . $file and added an extra check so we don't return an empty array. The filename check was changed to ignore all files starting with a single '.', which includes the current dir (.), the parent dir (..), GIT repository/checkout files (.git), Subversion checkout files (.svn) and all other hidden files/folders in Unix/Linux environments. The 'CVS' folder remains a special case.

I'm leaving the issue jide mentions in #183 to be fixed in #613944: data.node object not present in FCKeditor/CKEditor so all the involved editors are synced at the same time.

Great!

good job, TwoD! thanks!

I installed the latest 6.x-2.x-dev (2009-11-22) and it seems to work together with the latest ckeditor, but how do I change the skin? It appears as it uses the v2 skin, but I'd like to use the new kama skin. Where do I change that setting? I added config.skins = 'kama';
to the config.js, but without success. Is that supposed to work?

@jakewalk - Start new issue about your problem, this issue was about implementation CKEditor and this is fixed.

Just FYI since I mentioned skins/themes with the committed patch.
Skin/Theme changing is not fully implemented in the GUI yet. Only CKEditor reports which skins are installed (though it uses the theme functions for that for now).
You can not change the skin using the config file because settings from the server are sent as parameters directly to the CKEDITOR.replace() method, which have the highest priority. You can overriding those settings using the technique in comment #30, #313497: Allow configuration of advanced editor settings until #414496: Allow to select editor theme/skin is fixed.

Could somebody point to a summary on how to install this please ?

Do I need WYSIWYG module ?

Thanks heaps ....

Support for CKEditor is in Wysiwyg 6.x-2.x-dev. Install that then look at admin/settings/wysiwyg for installation instructions for CKEditor. If you need help, please read the FAQ (link on project page), search the issue queues and then create a new support issue. This issue is closed as it was about adding support for the editor and that is now done.

The CSS classes input box where you can Optionally define CSS classes for the "Font style" dropdown list is not working. The Font styles drop down still seems to be drawing from the ites/all/libraries/ckeditor/plugins/stylescombo/styles/default.js file. Thanks for all of your work.

Please create a new issue about any problems with the CKEditor imlpementation. (I think there might already be one about this problem, or that might have been related to the formats box)

Bug reports are not feature requests.

Basic (and some additional) support for this editor is already in the module and we don't want this issue to deal with every little problem related to it or we'll just end up with one huge 'everything goes' issue without a real focus or progress record.

Thank you for your understanding.

#192 holeepassion
You can watch a step by step screencast on how to install and configure the ckeditor module here

In 6.15, not 7.x, CKEditor is not recognized by the WYSIWYG module - only its predessor FCKEditor is. I know, I checked and even changed the folder's name. That's pretty lame, although I guess there is a reason for the renaming as well as for the WYSIWYG API (version 2.0) to rely on name.

Edit: It seems there is a workaround
. I still have to check it out.

CKeditor support is only available in the latest development snapshot Wysiwyg 2.x-dev currently. Either use + help testing that, or wait for a new stable release 2.1.