1

This is not a repeat question. I know how to do a an anchor in react. The question I have, is how to honor an anchor that created vie data — post render. The data come in as json and I convert the text using an HTML parser.

Our content editors often write long pages and need the ability to drop anchors at various spots in the page. They can currently create the anchor point but can't link to it, because the page is outside of the DOM. Is there a hack, component or script that will make this work?

The rendered page contains

<a href=#goHere>Go HERE</a>
...
<a id="goHere>

But the hashtag ref wont work.

(We are not using react router. All pages are directed to / and created based on the data — the url is updated based on the page request.) Data come is encoded in html and I can converting using ReactHtmlParser

Summary: Users need to be able to add anchors to their page using CKE via Drupal then link to them from internal and external sources. Currently there is no way to instruct react to follow those anchors.

Thank you

Daniel Lefebvre
  • 364
  • 4
  • 11
  • Please avoid text only questions. Try to include a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). It's hard to guess what's the problem that you're facing just by reading. – Dupocas Sep 29 '20 at 18:34
  • Have you looked at something like https://www.npmjs.com/package/react-scrollable-anchor? Basically you need to manually scroll to the anchor once the page has actually rendered, look at e.g. https://stackoverflow.com/a/40280486/3001761 for how the code might look. – jonrsharpe Sep 29 '20 at 18:49
  • @Dupocas, this is a text only question, because no amount of code would clarify it. Voting the question down is pretty harsh. – Daniel Lefebvre Sep 29 '20 at 18:53
  • @ jonrsharpe yes both. They both require you do make tags. My incoming data provides an anchor at a random location. The user cannot add a component tag because it will be filtered out ... – Daniel Lefebvre Sep 29 '20 at 18:57
  • 1
    can you explain how the data looks? and how anchor look in the data? – Itamar Sep 29 '20 at 18:59
  • @Itamar thank you, it comes in encoded as HTML from CKE/Drupal 7. I currently use ReactHtmlParser before pushing it to the page. – Daniel Lefebvre Sep 29 '20 at 19:03
  • can you add an example of the ReactHtmlParser output and input ? – Itamar Sep 29 '20 at 19:14
  • this is probably easier for us both... there is an output example on the page... https://reactscript.com/react-html-parser/#:~:text=The%20React%20HTML%20Parser%20converts%20HTML%20strings%20directly,attributes%20and%20inline%20styles%20into%20their%20React%20equivalents. The anchor comes through this intact, but given how react pulls things out of the dom, I cannot get it to work properly — I have other anchor links in the app, that are static and work find... – Daniel Lefebvre Sep 29 '20 at 19:16
  • that comes from data —- it's loading via Json on a headless Drupal build... we are using CKE which encodes things as HTML... we have too many editors who need to be able to add small HTML tweaks to turn this off. One of those tweaks is adding anchors. – Daniel Lefebvre Sep 29 '20 at 19:20

0 Answers0