Problem/Motivation

Currently, Drupal 8 includes only a build version of CKEditor. This makes it hard to:

  1. Test a completely different version of CKEditor (e.g. some patch, new beta release, etc.). Switching between versions should be painless.
  2. Debug some issues (because the build version is concatenated and minified).

Proposed resolution

Ideally, Drupal repo should not include a build of CKEditor, but a submodule with https://github.com/ckeditor/ckeditor-dev (dev version of CKEditor). When going on a production, a CKEditor package would be build to optimise the loading speed.

I guess though, that it's too complicated. So a partial solution would be to keep a build of CKEditor just like now, but allow to switch to other version of CKEditor with a single flag/option (for example - specifying the path where that CKEditor repo is kept).

Provide instructions on how to do a few simple manual steps to swap out Drupal's optimized (minified) build of CKEditor for an unminified one.

Remaining tasks

Review.

User interface changes

None.

API changes

None.

CommentFileSizeAuthor
#13 cke_dev-2480333-13.patch1.13 KBWim Leers
#12 Screen Shot 2015-10-31 at 13.02.09.png19.96 KBWim Leers
#12 cke_dev-2480333-12.patch4.94 KBWim Leers
#8 Selection_331.png257.7 KBElijah Lynn
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Reinmar’s picture

Reinmar CreditAttribution: Reinmar commented
Issue summary: View changes
Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented

Totally agreed for long-term maintenance and development of CKEditor plugins against D8.

But, preferably, we'd do this later, possibly during the RC phase. So: how urgent is this?

Reinmar’s picture

Reinmar CreditAttribution: Reinmar commented

Nothing critical. As you said - for a long-term maintenance.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented

Alright, cool :)

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented

Git Submodules are a no-go, what we could talk about is something like npm or bowser to handle our third party frontend assets.

Those sound like features for a ckeditor module, overriding libs and all. Module which could possibly declaring another CKEditor editor through the editor API that way it could have it's own configuration set of modules and all. May be a bit of work to create but that would be the clean way to go.

As far as core is concerned I think what we might talk about is some kind of version compatibility for ckeditor plugins. For the minified version, can sourcemap help or not? We do support those in core now.

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented

From my duplicate issue here #2492339: How to debug CKEditor in core?.

I will note that the CTO of CKSource -> CKEditor, Wiktor Walc (wwalc), says that using source maps seems to be difficult because:

When it comes to source maps, I'm affraid I have some bad news. I already shared my concerns about producing source maps using online builder. Today I have to add that also adding source maps support inside command line builder is not that easy due to the way that we create minified files.

Basically CKBuilder:

* concatenates source files,
* injects JavaScript code in the middle of concatenated source files and at the end,
* wraps the resulting code into an anonymous function,
* then minifies the whole thing.

As you see, with the current release process it's quite troublesome to provide a sourcemap that would provide an information about from which files the minified code is coming. What we can (relatively) easily do is to provide a source map without any information about source files, but... that would be almost the same as using version created with the --leave-js-unminified option, which you can already build by yourself.

source: https://github.com/ckeditor/ckeditor-releases/issues/11#issuecomment-468...

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented

I worked on this a bit, but got stuck on debugging CKEditor's loading process to figure out where it's going wrong. Pinged the CKEditor guys for feedback.

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
FileSize
Selection_331.png257.7 KB

Okay, so I think I have the rough and tough type of approach for D8 based on a bunch of stuff for Drupal 7's Wysiwyg + CKEditor integration I just figured out. It appears to work so far with no related console errors including not getting the image2 error. Here are the steps so far:

  1. cd D8 root
  2. git clone https://github.com/ckeditor/ckeditor-dev.git
  3. cd ckeditor-dev
  4. git checkout 4.4.7
  5. cp ../core/assets/vendor/ckeditor/build-config.js dev/builder
  6. ./dev/builder/build.sh --skip-omitted-in-build-config --leave-js-unminified
  7. rm -rf ../core/assets/vendor/ckeditor
  8. cp --recursive dev/builder/release/ckeditor ../core/assets/vendor

more discussion:
https://github.com/ckeditor/ckeditor-releases/issues/11#issuecomment-682...
http://stackoverflow.com/questions/22354231/ckbuilder-gives-me-too-many-...

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented 
[22/05/15 16:47:59] Wim Leers: So, basically what I did was this:
1) install D8
2) disable JS aggregation
3) mv core/assets/vendor/ckeditor core/assets/vendor/ckeditor-core
4) ln -s /path/to/ckeditor-dev core/assets/vendor/ckeditor (using a checkout of version 4.4.7)
[22/05/15 16:50:17] Piotrek Koszuliński: so, the last bit should be to pass a list of plugins to CKEDITOR.replace() - do you do this?
[22/05/15 16:50:28] Wim Leers: return !!CKEDITOR.replace(element, format.editorSettings);
[22/05/15 16:50:30] Wim Leers: that's what we do
[22/05/15 16:50:32] Piotrek Koszuliński: And I mean - all plugins that you use need to be specified
[22/05/15 16:50:37] Wim Leers: ahhhhh
[22/05/15 16:50:44] Piotrek Koszuliński: Not only the external ones.
[22/05/15 16:50:45] Wim Leers: because they're not built-in
[22/05/15 16:50:47] Wim Leers: I see
[22/05/15 16:50:48] Wim Leers: I see
[22/05/15 16:50:55] Wim Leers: I definitely did not do that
[22/05/15 16:50:58] Wim Leers: That'll be it then
Reinmar’s picture

Reinmar CreditAttribution: Reinmar commented

Piotrek Koszuliński: And I mean - all plugins that you use need to be specified

Small clarification – when I wrote "all" I didn't mean "all" :D. CKEditor resolves plugin dependencies, so e.g. if you enable the image plugin then CKEditor will automatically load the dialog plugin which will cause loading the dialogui plugin. So what you have to specify are the end-plugins. And don't forget about the wysiwygarea plugin which isn't required by any other plugin because it can be replaced e.g. with divarea, but it's required if you want to create the classic, iframed editor.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers at Acquia commented

Right.

And I forgot to paste an important bit from our conversation:

[22/05/15 16:51:25] Wim Leers: So that means I'll probably want to parse core/assets/vendor/ckeditor/build-config.js :P
[22/05/15 16:52:05] Wim Leers: I think I might be able to add a "CKE development mode" to D8 core to do this stuff automatically.
Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers as a volunteer commented
Issue summary: View changes
Issue tags: +DX (Developer Experience)
FileSize
cke_dev-2480333-12.patch4.94 KB
Screen Shot 2015-10-31 at 13.02.09.png19.96 KB

I've done some more debugging. AFAICT the only reason the method I proposed in #9 is currently failing, is the fact that Drupal's CKE plugins extend certain things in a way that assumes certain code has already loaded. Which is true in the case of Drupal's included CKEditor build, because everything is compiled into it. But it's no longer the case when CKEditor loads everything dynamically.

I attempted to fix that, and CKEditor now is able to instantiate an instance without any errors! :)

… but it does not show up :(

STR:

  1. git clone http://git.drupal.org/project/drupal.git /www/drupal
  2. Install Drupal.
  3. disable JS aggregation
  4. git clone https://github.com/ckeditor/ckeditor-dev.git ~/ckeditor; git checkout 4.5.3
  5. cd drupal
  6. wget https://www.drupal.org/files/issues/cke_dev-2480333-12.patch
  7. git apply -3v cke_dev-2480333-12.patch
  8. mv core/assets/vendor/ckeditor core/assets/vendor/ckeditor-original
  9. ln -s ~/ckeditor core/assets/vendor/ckeditor
  10. Go to /node/add/article
Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers as a volunteer commented
Title: Make it easier to test Drupal 8 with different versions of CKEditor » Document how to use an unminified CKEditor build (for developing/debugging)
Issue summary: View changes
Status: Active » Needs review
Issue tags: +rc eligible
FileSize
cke_dev-2480333-13.patch1.13 KB

Given #12, I think it makes sense to at least for now go with the excellent proposal from Elijah Lynn in #8. I think not having to first create an unminified build would be even better, but for now (and given we're so close to RC), this seems like a very workable solution.

Since this touches only code docs, this is RC eligible.

Committers, please credit Elijah Lynn!

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented
Status: Needs review » Reviewed & tested by the community

Looks good to me.

nod_’s picture

nod_
Primary language French
Location Lille
CreditAttribution: nod_ commented

I ended up having to use the uminified release of ckeditor today, this documentation did the trick.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott at Chapter Three commented
Status: Reviewed & tested by the community » Fixed

Committed 0a05169 and pushed to 8.0.x. Thanks!

  • alexpott committed 0a05169 on 8.0.x 
    Issue #2480333 by Wim Leers, Elijah Lynn: Document how to use an...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

ashopin’s picture

ashopin CreditAttribution: ashopin commented

I've tried the /builder method several times this morning with no luck:

  1. Uploaded my build profile
  2. Deselected option to include presets so that it only includes what's in my build
  3. Selected option for the big n' slow
  4. Replaced my ckeditor folder in core/assets/vendor
  5. Did a 'drush cr'
  6. CKeditor toolbar does not load

Am I missing anything?

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented

@ashopin - You may want to try the build.sh route, #2 below.

If you are developing or debugging CKEditor plugins, you may want to work against an unoptimized (unminified) CKEditor build. To do so, you have two options:

  1. Upload build-config.js to http://ckeditor.com/builder and choose the "Source (Big N'Slow)" option when downloading.
  2. Use the "build.sh" script to build it locally, with one additional flag: "sh build.sh -s --leave-js-unminified". Then, replace this directory (core/assets/vendor/ckeditor) with your build.
francescjr’s picture

francescjr CreditAttribution: francescjr commented

For the "build.sh route, #2 below", I had to do all this:

cd ~
git clone git@github.com:ckeditor/ckeditor-dev.git
cd ckeditor-dev/dev/builder
mv build-config.js build-config.js.backup
cp drupalpath/core/assets/vendor/ckeditor/build-config.js .
./build.sh -s --leave-js-unminified

Then, replace this directory (core/assets/vendor/ckeditor) with your build:

mv /drupalpath/core/assets/vendor/ckeditor /drupalpath/core/assets/vendor/ckeditorold
cp -r releases/ckeditor drupalpath/core/assets/vendor/

In case it helps anybody.

bkosborne’s picture

bkosborne
Primary language English
Location New Jersey, USA
CreditAttribution: bkosborne commented

Where is the "build.sh" file? I searched all files in Drupal for this filename and also the ckeditor "big and slow" download and it's not in any of these.

I'm also having trouble with this as you can see :)

I tried just uploading the build-config.js and swapping that with the ckeditor directory shipped with core, but I just get a couple of JS errors when loading a page that uses CKEditor, including the config page.

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented

@bkosborne, you need to clone the ckeditor dev code. Take a look at #12.

bkosborne’s picture

bkosborne
Primary language English
Location New Jersey, USA
CreditAttribution: bkosborne commented

Well I'm back again 3 years later!

The instructions in the ckeditor build file say this currently:

* If you are developing or debugging CKEditor plugins, you may want to work
* against an unoptimized (unminified) CKEditor build. To do so, you have two
* options:
* 1. Upload build-config.js to http://ckeditor.com/builder and choose the
* "Source (Big N'Slow)" option when downloading.
* 2. Use the "build.sh" script to build it locally, with one additional flag:
* "sh build.sh -s --leave-js-unminified".
* Then, replace this directory (core/assets/vendor/ckeditor) with your build.

I followed the first option and I the editor does not load. I get JS error "TypeError: CKEDITOR.skinName is undefined".

Since this issue is quite old I suppose I will open a new one.

bkosborne’s picture

bkosborne
Primary language English
Location New Jersey, USA
CreditAttribution: bkosborne commented

I created #3070880: One of methods documented by Drupal core to create a CKEditor build does not work anymore: update docs