Posted by ian on Fri, Dec 09, 2022 - 1:54am

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

Fri, Dec 09, 2022 - 2:55am by yorkshirepudding

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.

  1. Copy text from https://gist.github.com/yorkshire-pudding/8cbc8931afd6c61abef4a6c5b42e3411
  2. Go to admin/config/development/configuration/single/import
  3. Paste in and click import
  4. 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

 

Fri, Dec 09, 2022 - 1:47pm by ian

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.

Sat, Dec 10, 2022 - 4:51am by yorkshirepudding

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. 

 

Sat, Dec 10, 2022 - 6:11am by argiepiano

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)

Sat, Dec 10, 2022 - 6:55am by argiepiano

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.

Sat, Dec 10, 2022 - 11:01am by ian

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?

 

Sat, Dec 10, 2022 - 1:38pm by yorkshirepudding

screenshot of pressing link button

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. 

Sat, Dec 10, 2022 - 7:34pm by ian

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

 

Sun, Dec 11, 2022 - 6:37pm by argiepiano

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.   

Sun, Dec 11, 2022 - 8:12pm by ian

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.

Sun, Dec 11, 2022 - 9:33pm by argiepiano

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.

Sun, Dec 11, 2022 - 9:34pm by argiepiano

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

Perhaps that setting is inserting malformed HTML tags.

Sun, Dec 11, 2022 - 10:27pm by ian

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.

Sun, Dec 11, 2022 - 9:42pm by argiepiano

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)

Sun, Dec 11, 2022 - 10:29pm by ian

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