Linkit and media plugins do not appear to work with CKEditor when using inline edit [#2316925]

Thanks for the great module. I'm having a bit of trouble getting Linkit and Media browser plugins working with inline editing and CKEditor. Not sure of it's an issue with edit module or with the other modules, but I'm hoping someone can shed some light on the problem.

Using modules:
ckeditor 7.x-1.14
linkit 7.x-3.1
edit 7.x-1.0

JS Libraries:
backbone 1.1.0
underscore 1.5.2
ckeditor 4.3.2

I'll run through the issues I'm having with Linkit since thats what I've been debugging most (note the issue with media plugin is Uncaught TypeError: Cannot read property 'plugins' of undefined undefined being Drupal.settings.ckeditor).

When I quick edit a body field with the ckeditor the linkit button is available in the toolbar, and linkit is listed in the ckeditors plugins. However, the first issue I run into is when I click the linkit button the alert "Could not find the Linkit profile." being fired from linkit/editors/ckeditor/plugin.js - this appears to be because the linkit module base js is not loaded.

Using hook_edit_editor_attachments_alter() I can load the linkit base js using $attachments['library'][] = array('linkit', 'base');. However, the next issue I run into is that linkit/editors/ckeditor/plugin.js expects Drupal.settings.linkit.fields to exist and contain the ckeditor name in order to load the correct profile. I can patch linkit/editors/ckeditor/plugin.js to set the linkit profile name and sidestep the need for the Drupal.settings.linkit.fields, which finally allows the linkit dialogue to load.
However, when I then try to insert a link it does not trigger an the ajax request, instead it loads a new page with the linkit json response.

I can keep trying to hack through these issues, but I'm hoping there is an easier way to get linkit working with edit and ckeditor. My very basic understanding of the issue is that when edit loads the ckeditor it does not render the field form element and therefore does not trigger the preprocessing hooks that linkit uses to attach js libraries and settings.

Any insights would be greatly appreciated. Thanks again for the great module.

Comment	File	Size	Author
#10	make_ckeditor_and_plugins_work-2316925-10.patch	3.03 KB	junaidpv
#8	quickedit-attached-assets-2316925-8-tests-only.patch	63.8 KB	devin carlson

Comments

Comment #1

lwalley commented 7 August 2014 at 01:43

Issue summary:

View changes

Comment #2

lwalley commented 7 August 2014 at 16:52

I've been able to get linkit working with ckeditor and edit modules using the workarounds described in this issue description plus some additional patches to linkit module. I've created a ticket in linkit module's issue queue with patches and more detailed explanations of the workarounds and use of hook_edit_editor_attachments_alter(), see #2317301-1: Linkit does not appear to work in combination with ckeditor and edit modules.

The main disadvantage of the workaround that I can see at the moment is that hook_edit_editor_attachments_alter() does not provide any information about the field that ckeditor is being loaded for, so I can only load a default linkit profile, rather than loading one specific to the field's filter format. There may be other drawbacks to this workaround, it appears to be working on the surface, but I have not thoroughly tested it.

Comment #3

saltednut

she/her

English

Chicago

commented 19 August 2014 at 17:37

Project:	Edit	» Quick Edit
Version:	7.x-1.0	» 7.x-1.x-dev
Status:	Active	» Postponed (maintainer needs more info)

I am able to use Linkit and Media with CKEditor but there is an outstanding patches to CKEditor module that completes this. Its nothing to do with Quick Edit though, to my knowledge.

Let us know if updating to Quick Edit 1.1 and using CKEditor and Media dev versions along with the patch from #2159403: Make CKEditor plugin system modular and clean fixes the issue.

Comment #4

wim leers

Ghent 🇧🇪🇪🇺

commented 19 August 2014 at 18:59

Title:

Linkit and media plugins do not appear to work with ckeditor when using inline edit

» Linkit and media plugins do not appear to work with CKEditor when using inline edit

Comment #5

tanc

he/him

English

Italy

commented 8 September 2014 at 14:02

Anyone stumbling across this thread, there may be some use in this issue too #2331293: Quickedit module compatibility.

Comment #6

lwalley commented 8 September 2014 at 23:14

@brantwynn thanks for the feedback. I quickly tried the following set of modules with JS Libraries; Underscore version 1.5.2, Backbone version 1.1.2, CKEditor version 4.3.2; and I am still getting "Could not find the Linkit profile." when using Linkit with QuickEdit:

projects[ckeditor][version] = 1.x-dev
projects[ckeditor][download][type] = git
projects[ckeditor][download][url] = http://git.drupal.org/project/ckeditor.git
projects[ckeditor][download][revision] = b0de25519b9501e0046972bafcb6e815fcb22530
projects[ckeditor][patch][2159403] = https://www.drupal.org/files/issues/make_ckeditor_plugin-2159403-90.patch

projects[quickedit][version] = 1.1

projects[linkit][version] = 3.1

When I have some time I'll try again with a fresh install.

Comment #7

peoplesoft commented 11 December 2014 at 23:20

Wondering if this ever got resolved cause I am getting the same JS error as the author of this issue.

I am running:

ckeditor 1.x-dev with patch
media v2.x-dev with patch and
quickedit v1.1

Comment #8

devin carlson commented 26 January 2015 at 19:27

Component:	CKEditor	» Code
Status:	Postponed (maintainer needs more info)	» Needs review

Status	File	Size
new	quickedit-attached-assets-2316925-8-tests-only.patch	63.8 KB

Modules such as CKEditor, Media: WYSIWYG and Linkit all function by implementing hook_element_info_alter() to add a #pre_render callback to the text_format element in order to attach the libraries they require to function.

This approach allows them to keep page weight down as the libraries are only added to the page when an appropriate element is being edited. Since Quick Edit works on the front end, these libraries aren't loaded. I thought that hook_quickedit_editor_attachments_alter() might be suitable for duplicating the pre-render functions but, unfortunately, all of the modules require access to $element.

I also noticed that the hook wasn't actually attaching any assets. The attached patch contains a test which demonstrates the issue (it also reworks the existing tests to be more extensible).

Comment #9

26 January 2015 at 19:31

Status:

Needs review

» Needs work

The last submitted patch, 8: quickedit-attached-assets-2316925-8-tests-only.patch, failed testing.

Comment #10

junaidpv

Kannur, Kerala

commented 12 October 2015 at 10:30

Status:

Needs work

» Needs review

Status	File	Size
new	make_ckeditor_and_plugins_work-2316925-10.patch	3.03 KB

For me, even CKEditor was not working when using media_ckeditor module (Media_ckeditor module is essential for us to work the media module).

The given patch helps us load ckeditor and all its plugins for a ckeditor enabled field. It works by emulating form field rendering for that specfic entity field and collecting all attached CSSs and JSs, then delivering them back to client via ajax while CKEditor text for that field is requested.

I don't think it as best but it helps us to achieve the desired result without altering other modules like ckeditor, media_ckeditor, media etc.

There exists some patches for ckeditor module to work with media_ckeditor. Soo I will write a post about the combination I used to make it work and let you know.