U4-4732 - Ability to add an edit anchors in links when using TinyMCE

Created by Hannes Wegner 21 Apr 2014, 19:40:48 Updated by Mike Masey 22 Aug 2018, 08:13:22

Tags: PR

Is duplicated by: U4-6114

Relates to: U4-10493

Relates to: U4-11596

The new TinyMCE of Umbraco 7 is missing the use of a created anchor. I can create an anchor link itself but I'm unable to link to it. Can this issue be resolved in release 7.1.2?

2 Attachments

Comments

Mirko Matytschak 04 Aug 2014, 10:30:50

Is there any kind of workaround?


Adrian Holland 04 Aug 2014, 22:58:03

a poor workaround is to turn on the html editor and let them edit the html directly.


Sunshine Lewis 18 Aug 2014, 16:04:13

The original functionality (a select list of available anchors) is very nice but I would also be happy with either of the following:

An "Anchor" field (text) that allows us to manually type in the anchor. This would be appended to the generated localLink.

The ability to directly edit the link text displayed in the "link to the document field" The generated link could be treated as a single character (for the purposes of editing) but you could add characters behind it. This would also let you delete a content tree URL and switch to a manual one.

Edit: Either of these solutions would also allow adding url parameters to a node link


Shannon Deminick 18 Nov 2014, 02:01:56

I'm pretty sure this is no longer an issue and is probably fixed in the latest 7.1.x.

See video: http://www.youtube.com/watch?v=_5hyydDVeAc


Sunshine Lewis 18 Nov 2014, 02:39:44

Hey @Shandem,

The linked video doesn't address the issue. I think the confusion is in the term "anchor". In this case we mean link element with a name or id attribute (a) that does not contain the href attribute. These are used to provide direct link to a specific location on a page by appending the anchor name to the end of the href for the page.

To recreate the issue using the setup in the video you would need to: #Edit your Rich Text Editor datatype to turn on the "Anchor" menu button (located directly below unlink) #Go the Content > Test and use that button to create an anchor called myanchor #Go to Content > Home and try to create a link to myanchor on the page "test".

You can link to the the page test by selecting it in the content tree (link to document will be /test/) but you can't specify an anchor within that page (which would make the link to document (/test/#myanchor).

Currently (in 7.1.4 at least) the only way to accomplish that is to add the anchor manually in the source OR specify the link manually instead of selecting it from the content tree (thus losing the automatic updating in case of url change)


Shannon Deminick 18 Nov 2014, 02:41:46

ah, right :) will re-open then


Sunshine Lewis 18 Nov 2014, 02:53:21

yay! thank you :)


Shannon Deminick 18 Nov 2014, 03:13:56

Since we cannot realistically read 'saved anchors' from another page, the only viable option is to have an additional text box (or something) to specify the anchor link manually and then this will be inserted accordingly.


bob baty-barr 18 Nov 2014, 04:26:44

I'd take that... Better than editing html source with #namedAnchor ;)


Sunshine Lewis 18 Nov 2014, 13:25:25

works for me too. That would also allow you to pass url variables...


Hannes Wegner 18 Nov 2014, 19:17:44

Hi Shannon, thanks for the update on that. I'm not sure I understand why you couldn't read "saved anchors" from a page? It has been working for Umbraco 4 thru 6 for so many years. Why couldn't we replicate the "anchor dropdown" like it was before? It seems like such a standard piece of functionality with rich text editors. Even the normal edition of the TinyMCE has it.

http://www.tinymce.com/tryit/full.php


Shannon Deminick 18 Nov 2014, 21:59:27

@Hannes - that demo targets the current page's anchor's not a different page's. Any given page can have any number of rich text editors as properties assigned. If you wanted to link to another page's anchor's, you'd need to lookup that other pages, then parse every rich text content for anchors and then display them, that is super ugly and not extensible.

As with the demo, it would be possible to target the current rich text editor's anchors in a drop down.


Hannes Wegner 18 Nov 2014, 22:14:07

@Shandem, yes, I was originally not talking about grabbing or parsing anchors off of other pages. I would just like to setup an anchor on a page and then be able to target that anchor through a select dropdown just like it was before. If I wanted to target an anchor living on a different page then I would just manually specify it. Not sure how often that would be needed though.

So yes, if you could possibly reintroduce the anchor dropdown in the "link popup window" of the RTE that would be greatly appreciated!


Mark Arndt Lønquist 09 Feb 2017, 14:34:07

Any update on this? Clients are still asking for this feature, but it doesn't seem to have gotten much love for some time :-)


Nathan Woulfe 16 Mar 2017, 11:44:08

I've had a bit of a fiddle with this, it's not difficult to add an input to the overlay to specify an anchor/querystring to append to the selected node's URL - just needs an update to the overlay view to add an input, then a couple of changes in the tinymce service to handle the new value.

Not as elegant as a dropdown to select anchors in the same RTE, but still provides a mechanism for anchors on the same page (as Shannon said, a dropdown would still only manage the current RTE, while the page could have multiple).

Can submit the PR if this sounds like an acceptable solution


Martin K 14 Jun 2018, 07:25:31

@NathanWoulfe would be nice if you could at least share some code so we can see how you did this :)


Nathan Woulfe 16 Jun 2018, 05:25:02

@mkyukov of course - https://gist.github.com/nathanwoulfe/3f685e3c1f26a6eda3d3d7911075ca47

Not shown in the gist is the view change, which simply adds an additional input for the anchor text. This doesn't add any intelligence around the anchors existing on the linked page, but that's a complex bit given the use of grid etc where the page may have multiple RTE fields.

It's probably possible to add a service that parses all the props on a document to find named anchors and returns that list - it's something I'm fiddling with at the moment and was thinking of building as a package, but should really be a PR.

As for the gist, it's basically copying the way the data-id attribute is added into the markup, with a bit of extra logic to determine if the string is an anchor or a querystring, and manages the different cases (also works where the submitted string doesn't start with # or ?.


Nathan Woulfe 16 Jun 2018, 08:37:17

I'm happy to put something together for a PR.


Sebastiaan Janssen 16 Jun 2018, 12:28:59

@NathanWoulfe I like the mockup, go for it! Does it work with locallink etc?


Nathan Woulfe 17 Jun 2018, 00:18:30

@pploug yup, sure does (on older 7.x at least, need to confirm on 7.latest, but no reason why it wouldn't).

Will smash something out today.


Nathan Woulfe 19 Jun 2018, 23:26:32

PR is here -> https://github.com/umbraco/Umbraco-CMS/pull/2702

Was a little larger than I initially thought as a couple of the ContentResource endpoints didn't work with UDI, so had to add that in too, but means that when a link is selected in the overlay, I can populate a list of named anchors from the target page


Hannes Wegner 12 Jul 2018, 19:16:23

Wow, I can't believe this is finally being fixed. Great job guys!


Ronald Barendse 16 Aug 2018, 10:37:49

@NathanWoulfe When editing an existing link (linked to a page), the link URL field is not disabled... Changes to this field are ignored when the dialog is submitted (it gets overridden with the URL of the page), so if an editor changed the value, it's lost!

Selecting the same (already highlighted) page does disable the link URL field though! Seems like a minor regression...

Would actually be nice to unselect a page, so you don't have to remove and add a link if you want to change it from a linked page to a custom URL.


Ronald Barendse 16 Aug 2018, 10:40:04

This change also breaks the RJP.MultiUrlPicker, since that uses the built-in link picker dialog: https://github.com/rasmusjp/umbraco-multi-url-picker/issues/75


Chris Evans 20 Aug 2018, 02:46:00

@NathanWoulfe I can confirm this breaks RJP.MultiUrlPicker in 7.12.0

Also, when creating a link in a rich text editor inside a Nested Content item, the layout of the linkpicker is also broken since this change in 7.12.0 - not as badly as RJP but enough to be noticeable.


Nathan Woulfe 20 Aug 2018, 05:35:44

@rgmbarendse - completely agree on the last point, being able to remove a link would be really useful. Will need to have a look at why the URL field is editable, it shouldn't be after a node has been selected... Minor regression, I agree, but should be fixed.

I think the NC issue will need to be fixed, but the RJP one would need to be rectified in the package - breaking thing is unfortunate and unintentional, but happens.


Nathan Woulfe 20 Aug 2018, 06:50:11

https://github.com/umbraco/Umbraco-CMS/pull/2862 resolves the editable URL and NestedContent styles


Mike Masey 21 Aug 2018, 14:00:41

There still appears to be an issue with this PR. Currently if you try to save a link in an RTE without a querystring or anchor it wipes the link on save.

Steps to reproduce.

  1. Install a fresh instance of the Umbraco using the starter theme
  2. Navigate to "About Us" in the backoffice
  3. Select some text in the RTE shown in the grid and add a link manually. e.g. "http://issues.umbraco.org"
  4. Click Submit
  5. Edit the newly created link and you will see that the URL has gone.

If a hash or querystring is present in the url it will save successfully.


Mike Masey 21 Aug 2018, 19:39:12

I've create a branch on v7.12.1 and have fixed the data loss issue with the link picker. A link to the branch can be found at https://github.com/MMasey/Umbraco-CMS/commit/d875fc48fb63f634cedb0cde52c22287ad55bd73

I don't want to submit a PR just yet because one other thing I've noticed is that if you enter a hash, then afterwards a querystring (for example if you wanted to anchor to a point in a page with some content pre-filtered) it will only show the hash, but not the querystring. The link itself still has the querystring, it just doesn't appear in the UI.

Steps to reproduce this are. (It may be a bit convoluted, just trying to think of all the ways this could be used)

  1. In an RTE, select some text and create a new link with a hash included "http://issues.umbraco.org#test"
  2. Hit submit to close the link picker overlay
  3. Edit the link just created to open the link picker again. This should show the link with the hash in the anchor/querystring field.
  4. In the Link field, update the link to "http://issues.umbraco.org?key=value"
  5. Hit submit to close the link picker overlay.
  6. Inspect the link in dev tools, it should show as "http://issues.umbraco.org?key=value#test"
  7. Edit the link again to open the link picker overlay. In the link field i should say "http://issues.umbraco.org" and in the Anchor / querystring field it says "test".
  8. If you hit submit, the link will be updated to "http://issues.umbraco.org#test"


Chris Evans 21 Aug 2018, 21:17:16

Just a PSA -- the RJP Multipicker has been patched, v2.2.0 fixes this issue. #h5yr Rasmus!


Priority: Normal

Type: Feature (request)

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.4.1

Due in version: 7.12.0

Sprint:

Story Points:

Cycle: