Add Anchor Button to CKEditor

[mikesoltis]

Description of the need

I have many pages of instruction manuals for x-ray diffraction facilities that will incorporate anchors (from menus).

Proposed solution

Add CKEditor Anchor button to toolbar selection.

Alternatives that have been considered

Manual input in source

Additional information

1231 is complete, but it addressed removing the Anchor button that did not work. I do not see it in the "to do" list.

Draft of feature description for Press Release (1 paragraph at most)

Backdrop now includes the CKEditor Anchor button.

[indigoxela]

@mikesoltis many thanks for taking the time to report this issue.

There seems to be a contrib module that ships with this button: ckeditor_addon (has no stable release, though, and I didn't test it).

Alternatives that have been considered ... Manual input in source

I'd agree that this is no real alternative. Most users wouldn't be able to do it.

So, should we add it in core or is this rather a contrib candidate? More feedback is welcome.

[klonos]

There seems to be a contrib module that ships with this button: ckeditor_addon (has no stable release, though, and I didn't test it).

I've tested it, and the anchor button does not get added 😞 (expected, as the module has not been updated since 2016) ...moreover, it downgrades CKEditor to v4.5.7, which is not secure, and could lead to regressions.

[olafgrabienski]

What is the anchor button supposed to do?

I'm asking because as of https://github.com/backdrop/backdrop-issues/issues/1777, the CKEditor link dialog in Backdrop allows linking to an ID of the same page.

[indigoxela]

What is the anchor button supposed to do?

It adds a link with an ID to act as a target for on-page links like #the-id-to-jump-to

Note: adding an ID to a link is possible with the ckeditor link dialog from core, but it's not obvious and the link url validation further complicates things. Room for improvement. :wink:

[mikesoltis]

Features of the Anchor button:

Button opens dialog to insert title, saves at cursor position/selection. Works with white spaces in anchor name. Link module provides a tab to select from list of anchors on page.

[jenlampton]

I'd also like to see this in core. I have had almost every client ask me how they can add anchors, and some have resorted to switching to HTML mode to type in <a name=""> not knowing that the name attribute is now obsolete for a tags. If we could provide a button that offered the same functionality, they would be doing it "the right way" without needing to understand the nuancnces of HTML5.

[klonos]

Some initial research: https://stackoverflow.com/questions/46434435/ckeditor-how-to-insert-anchor-tag-into-document

Empty Links are removed from CKEDITOR automatically. You can add data-cke-survive="true" so these links aren't removed, <a href="#" data-cke-survive="true"></a>

[klonos]

...I was under the impression that we can use any element with an ID as an anchor. Does it have to be an <a> tag?

[jenlampton]

Any element.

On Fri, Feb 26, 2021, 9:11 AM Greg Netsas notifications@github.com wrote:

...I was under the impression that we can use any element with an ID for anchor. Does it have to be an tag?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/backdrop/backdrop-issues/issues/4914#issuecomment-786775673, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADBER6SHLNAT3MFGICXVE3TA7I2XANCNFSM4WUWYELQ .

[mikesoltis]

There is an implementation for Drupal 8. Can it be used to expedite porting to Backdrop?

https://github.com/Vardot/anchor_link

[yorkshire-pudding]

I agree that we need an easy way to make any element (I guess it will usually be headings but could be others) into an anchor destination by adding the id attribute. I have to do this by switching to source but there is no way you can expect users to do that. The D8 module seems to use the name attribute which as @jenlampton points out is now obsolete