CKEditor link button not working

There may be hundreds of references on Google related to people who have had trouble getting CKEditor to work properly, particularly in relation to getting the link button to actually show the link dialog box. I note that the link button works on the editor on this forum - but what editor does it use?

Anyway back to my problem - most references refer to problems with z-index values meaning the link dialog opens behind something else or to modal problems that may require changes to js (somewhere).

Has anyone else had these difficulties and found a solution - several of the css solutions have not worked for me so far. Please remember my experience with Backdrop is less than 4 weeks in total.

Accepted answer

Yup!! I just tested enabling "Allow HTML in Colorbox captions" and that effectively kills the link icon.

If you disable that, the icon should open normally.

What to do: create an issue in Colorbox. It's clearly a bug there (malformed HTML snippet inserted). Good luck.

You may also want to include the Javascript error that this generates:

This indicates a malformed html tag being inserted by the ajax response into the DOM.

Uncaught SyntaxError: Unexpected token '<'
at eval (<anonymous>)
at jquery.js?v=1.12.4:2:2651
at Function.globalEval (jquery.js?v=1.12.4:2:2662)
at text script (jquery.js?v=1.12.4:4:27423)
at Xb (jquery.js?v=1.12.4:4:18945)
at y (jquery.js?v=1.12.4:4:22407)
at c (jquery.js?v=1.12.4:4:26927)
at Object.send (jquery.js?v=1.12.4:4:27033)
at Function.ajax (jquery.js?v=1.12.4:4:22182)
at n._evalUrl (jquery.js?v=1.12.4:4:23293)

Comments

Hi Ian

I'm not quite sure where to start really as I've not come across this in Backdrop CMS. Are you using the default admin theme (i.e. Seven) and having this issue in the admin side?

Or is this visitor facing like comments? If so, what front end theme are you using?

Are there any modules you've installed that relate specifically to the area you're having the issue?

You can easily create a view of all enabled modules.

Copy text from https://gist.github.com/yorkshire-pudding/8cbc8931afd6c61abef4a6c5b42e3411
Go to admin/config/development/configuration/single/import
Paste in and click import
Go to admin/custom/list-of-modules

This will help us to understand what might be causing this.

Has the site been converted from D7 or is it a new build site?

Note - this forum also uses ckeditor

hi there - thanks for your reply.

I have a new install of backdrop - previous installs got corrupted when trying to import my Drupal 7 sites so I started from scratch. I've tested various things out in order to get a grip on backdrop. My most recent experiment was with importing content from my D7 site using RSS and after several attempts I figured out how to do this. It is this content that I am trying to edit links in and I have noted that all links, including those for the images, refer to my old D7 site at toysnz.com.

I am using Seven 1.23 as the admin theme and TNZ_Basis 1.23 as the default theme. TNZ_Basis 1.23 is a straight copy of Basis 1.23 (I haven't yet come to grips with the correct way to sub-theme) modified to allow for the use of a local.css file so I can try out different positioning, colouring, etc of the components/elements of my pages. tnz_basis.info has been modified only by the addition of "stylesheets[all][] = css/local.css".

Since I work in the admin backend all the time, when I want to edit content in any way I go to admin/content and edit from there.

I have a number of modules enabled - several need to be removed as they were only attempts at image processing and it may be that one of these is the problem - I will be identifying them and removing those not actually used on a test page somewhere, later today (NZ time).

Here is a screenshot

I hope this gives you enough info to assist me further.

It might not be a module; I tried adding the ones I suspected and could not recreate. I have a vague suspicion that CKeditor may have a problem with editing links on the imported content.

Are you able to switch to raw html and examine them there, perhaps post an example (sanitised if needed, but try keep all components of the link present)?

It's possible something got corrupted during the import but hard to say. I've imported from D7 before using JSON though that is not for beginners.

If we still are no closer to a solution, it would be good if you could come to one of the Office Hours sessions where someone will try to help you:

https://backdropcms.org/news/events

I imagine Office Hours 9.5 might be better if you're in New Zealand (a guess). I will post on our chat channel to see if anyone else knows anything that might help.

Hi! Here's a wild guess. Try to disable the module "insert" clear caches and try again. This module may have conflicting Javascript (haven't tried this)

Also, open the browser dev tools and check the browser's Console output while clicking the button. Check if there are any javascript errors and let us know.

Thanks for your replies...

1. ckeditor source shows a standard link reference:

<p>This model is the <strong>WelsoToy 2 Door Sedan Car</strong> in Dark Blue Police livery. It is identical to the earlier produced <a href="http://xxxxnz.com/WelsoToy_Friction_PoliceSedanCarwithSiren">friction drive version</a> apart from the battery powered electric motor and remote control that allows the vehicle to move forwards and backwards only (no steering).</p>

2. Disabling Insert Module does not affect the situation.

3. Can't make any sense of Browser Console "report" - it seems to cover all open tabs in all open browser windows? Point me to an example somewhere so I can see what is supposed to be happening? Or did you mean the Web Console?

This is what it looks like for me. PS - right click on image and select to open in new tab.

Another thought. Can you try disabling any browser extensions? I once had an odd interaction on one site with the scams element of MalwareBytes silently causing an issue on edit pages.

Thanks again for the reply...

1. Disabled Firefox browser extensions one at a time - cleared caches, refreshed page (each time), no change at all.

2. Looks like you are using Chrome? Downloaded and installed Chrome - no change to behaviour - link edit dialog still won't open.

3. As a further test I tried Microsoft Edge - same behaviour.

4. Not sure if you want text file of Firefox Console and Chrome Console Log output?

Firefox Console export

Chrome Log

I see an onclick error in the Chrome console log. This is also shown in the Firefox log, in more detail.

So, apparently, the jquery insert method that is inserting the link modal window is encountering an error that prevents it from being opened. The "<" indicated in both logs often indicates that broken closing for an html tag - suddenly the script is finding an opening "<" without he previous tag having been closed.

I have no idea why this is happening, but I suspect it has to do with a contrib module somehow interfering with the link modal. Try disabling different modules, for example, the colorbox module.

Oh you clever man! - Got it in one! Disabled Colorbox module, cleared all caches, reloaded the item page, edited in ckeditor.... and up popped the link dialog box.

So I wonder what it is in the Colorbox module that is causing the error and how will I be able to get it fixed so I can go back to using it...

Many, many thanks to argiepiano and yorkshirepudding for their assistance.

I'm glad we found it!

Have you entered links with a colorbox css class in the textarea where you are trying to insert another link? (e.g. links with class colorbox-inline or colorbox-load). Check the "Source" html and be sure there isn't a missing "<" or ">", or any malformed html tag.

Also uncheck "Allow HTML in Colorbox captions" in Configuration > Media > Colorbox

Perhaps that setting is inserting malformed HTML tags.

Spot on!... re-enabled Colorbox, cleared all caches, unchecked "Allow HTML in Colorbox captions", cleared all caches, reloaded page in ckeditor and checked ability to edit links. With "Allow HTML" unchecked the link dialog box works. So now I can go back to working on learning the OTHER vagaries of transferring my D7 site to Backdrop.

Yup!! I just tested enabling "Allow HTML in Colorbox captions" and that effectively kills the link icon.

If you disable that, the icon should open normally.

What to do: create an issue in Colorbox. It's clearly a bug there (malformed HTML snippet inserted). Good luck.

You may also want to include the Javascript error that this generates:

This indicates a malformed html tag being inserted by the ajax response into the DOM.

Thanks for all your help - I will now open an issue in Colorbox and see how we get on...

Weekly office hours

Bring your questions to our weekly virtual office hours, every Wednesday. Everyone is welcome.

CKEditor link button not working

Accepted answer

Comments

Weekly office hours

Recent topics

CCK Select Other Module

Error on Search Results

Machnine Name missing in tpl strings in Views Theme: Information

RFC: Granular Module Functionality Enable/Disable Checkboxes?

D7 -> Bd update.php fails on core module

Recent comments

CCK Select Other Module

CCK Select Other Module

CCK Select Other Module

CCK Select Other Module

CCK Select Other Module