At #1937484: Update CKEditor library to 4.1 RC and remove CKEditor default style configuration, CKEditor 4.1 RC was added to Drupal core, which was the first to have the "sourcedialog" plugin. At #1950098: Update CKEditor library to 4.1, we updated it to the 4.1 final.

What we didn't do yet, though, is actually start using the sourcedialog plugin when using CKEditor for in-place editing.

Comments

wim leers’s picture

Title: Use "sourcedialog" plugin/button instead of "sourcearea" plugin/button when using CKEditor for in-place editing » Automatically use "sourcedialog" plugin/button instead of "sourcearea" plugin/button when using CKEditor for in-place editing
Status: Active » Needs review
StatusFileSize
new8.3 KB
new7.2 KB
new6.13 KB
new1.4 KB

Back-end:

ckeditor-source-backend.png

Front-end (in-place editing), BEFORE patch:

ckeditor-source-frontend-BEFORE.png

Front-end (in-place editing), AFTER patch:

ckeditor-source-frontend-AFTER.png

wwalc’s picture

That's a very good proposal. The "sourcedialog" plugin was created exactly for such use cases (see the whole story in this ticket).

wim leers’s picture

Assigned: wim leers » quicksketch

Assigning to quicksketch for review (and hopefully RTBC).

nod_’s picture

Status: Needs review » Reviewed & tested by the community

Without caring about IE8 we'd have been able to get rid of the second loop by using .indexOf(), anyway, it's not super pretty but it works.

wim leers’s picture

Assigned: quicksketch » wim leers

Thanks :)

Unassigning quicksketch.

webchick’s picture

Status: Reviewed & tested by the community » Fixed
+++ b/core/modules/ckeditor/js/ckeditor.jsundefined
@@ -55,6 +55,24 @@ Drupal.editors.ckeditor = {
+      for (var i = 0; !sourceButtonFound && i < settings.toolbar.length; i++) {
+        if (settings.toolbar[i] !== '/') {
+          for (var j = 0; !sourceButtonFound && j < settings.toolbar[i].items.length; j++) {
+            if (settings.toolbar[i].items[j] === 'Source') {
+              sourceButtonFound = true;
+              // Swap sourcearea's "Source" button for sourcedialog's.
+              settings.toolbar[i].items[j] = 'Sourcedialog';
+              settingsOverride.extraPlugins += ',sourcedialog';
+              settingsOverride.removePlugins += ',sourcearea';
+            }
+          }

This seems like an awful lot of shenanigans just to change one button.

nod_ explained that the structure of CKEditor's configuration looks like this:

[ [ 'button1', 'button2'], '/' , ['bold', 'sourcedialog'] ]

So there's no way to select on an HTML ID or something similar. Wah-wah.

Otherwise, seems to work well. It pops up the view source in a dialog which is a little funny compared to what it does on the backend (which is replace the text contents), but Alex pointed out that this is how CKEditor works, so I think it's ok.

Committed and pushed to 8.x. Thanks!

wim leers’s picture

On the front-end, it cannot replace the text contents, since on the front-end, you're using contentEditable… it'd have to replace the text contents AND override the styling. That's why all these shenanigans are necessary in the first place, and that's why the sourcedialog plugin exists :)

webchick’s picture

Ok got it. Thanks!

wim leers’s picture

Issue tags: -sprint

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