Easily Insert Anchor Links - Restore Previous Functionality

24 Comentarios

  • Brett - Community Manager
    Acciones de comentarios Permalink

    Thanks for sharing Annie!

    I've upvoted this feedback as well :)

    2
  • Ryan McGrew
    Acciones de comentarios Permalink

    Just letting you all know that we're rolling out a change in the next day that will change the list of selectable anchors. You can see a screenshot below showing ability to link to the heading or link to "named" anchor in the document. This should re-introduce the workflow that you had previously.

    screenshot 2019-03-05 at 15 41 00

    2
  • Annie Ashenfelter
    Acciones de comentarios Permalink

    @Ryan I'm super impressed with your response, and also excited to see that easily inserting other Help Center articles will also be made possible. Great show, I'll be looking forward to the release!

    2
  • Ryan McGrew
    Acciones de comentarios Permalink

    Hey All,

    Thanks for brining this to my attention. We weren't aware of this advice. As you can maybe appreciate, there's a lot of legacy going on with the editor going back 4+ years with different tips and workaround proposed. That being said, we want to continue to support your workflow and will be looking at a way to continue to support you guys. I'll post back when I have a little bit more concrete info but it shouldn't be long.

    Thanks!

    1
  • Annie Ashenfelter
    Acciones de comentarios Permalink

    @Stephen my understanding of target_"self" is that this is automatically inserted when you use the toolbar button to create the link, and leave the "open in new tab" box unchecked.  When enabled, the checked box sets target="_blank" to open the link in a new tab.

    1
  • Marc Hoegh
    Acciones de comentarios Permalink

    Nope, just trying to clarify what these rules mean, since you seemed to be interested in clarification. You're in a good state with your code. No need to worry ;) 

    The functionality is ready by tomorrow, and we will then ship it as soon as we have localized translation strings returned from our translators.

    1
  • Annie Ashenfelter
    Acciones de comentarios Permalink

    @Marc I think we're going to get there as a joint effort ... I think you just need a close quote after "something"

    YES - I would really love to see the recent logic added applicable for EITHER name or id attributes, so that we can all maintain best practices with current standards in our code!  (and still be backwards compatible for those who have used name)

    1
  • Marc Hoegh
    Acciones de comentarios Permalink

    @Stephen, rather than the dropdown, the list of headings in the Heading-tab will now include named anchor tags as well (once we release the change).

    If you take another look at Ryan's screenshot, you can see that the list entry named "test" has the text "Anchor" underneath it. All named anchors in the document will be accessible in this list.

    Regarding the anchor links that you posted, I think they have been stripped out upon submission of your comment since I don't see any. You probably need to use the "Code" block formatting option so they will appear pre-formatted.

    0
  • Marc Hoegh
    Acciones de comentarios Permalink

    Annie is correct. The target attribute is simply added for consistency and does indeed determine whether the link will be opened in a new window/tab.

     

    Unless it is not written out in the following syntax, then it is fully expected:

    target="_self"
    0
  • Marc Hoegh
    Acciones de comentarios Permalink

    @Stephen

     

    1. Oh alright, no problem! Yes, "target" describes how the browser should open your link, and "self" means that it will open inside itself and not in a new window ("blank"). You don't need to worry about this part being added, because "self" is already the default setting for any link in the browser, and the change, therefore, has no effect other than making your markup a bit more explicit.

    2. Yes, pasting from the source code had the same effect, no worries.

    3. I simply meant to show the correct syntax required for the "target" attribute to be valid. The original example you posted said `"target_'self"` whereas the correct syntax is `target="_self"`. I wanted to rule out that our editor did not produce invalid syntax, that's all. And I could do that by viewing your last post. Thanks :-)

    0
  • Marc Hoegh
    Acciones de comentarios Permalink

    Absolutely,

    <a href="#"></a>

    and

    <a href="#" target="_self"></a>

    are identical. Everything will work just as before.

    It is only when you introduce

    target="_blank"

    that the behavior changes. With this, the browser will open the link in a new tab when clicked.
    Refer to "Attribute Values" here https://www.w3schools.com/tags/att_a_target.asp for the explanation.

    0
  • Marc Hoegh
    Acciones de comentarios Permalink

    FYI: The feature is now live.

    0
  • Annie Ashenfelter
    Acciones de comentarios Permalink

    @Marc thank you, I see the new feature available and I have been testing.

    The syntax from previous Zendesk instruction is as follows: <p><a name="anchor"></a></p>

    However, I have recently learned that the name attribute is no longer supported, and replaced with the id attribute

    https://www.w3schools.com/tags/att_a_name.asp

    I have attempted to replace "name" with "id" in the source code tag, but when I save the editor modal and re-open for edits, this tag is completely removed. 

    Could you please advise?

    0
  • Marc Hoegh
    Acciones de comentarios Permalink

    Hi Annie,

    It seems that our internal editor TinyMCE is automatically removing the tag when you submit the change, because

    <a id="something></a>

    on its own is not a valid anchor. It needs to have some text associated with it:

    <a id="something></a>Some text

    If you submit it like so, it should not be stripped away.

    0
  • Marc Hoegh
    Acciones de comentarios Permalink

    Note, however, that the recent logic we added will be looking for <a> tags with "name" attributes on them, so <a> tags with only "id" attributes on them will not show in the list.

    Maybe we should revise this, based on your note around deprecation of the "name" attribute.

    0
  • Samantha Postlethwaite
    Acciones de comentarios Permalink
    <a name=“your_anchor_name”></a>

    Hi Everyone, 
    You'll have to pardon almost non existant proficiency in HTML.  Trying to follow along but it sounds likes jargon to me. 
    However, the above string works for me when I want to link within an article. 
    That is all :)   So glad to see the function was re-instated.  Thank you:)  

    0
  • Jonathan March
    Acciones de comentarios Permalink

    Hi Stephen, the mysteries of auto spam screening are sometimes inscrutable. I've alerted the community managers, who will hopefully be able to spring you soon! :)

    0
  • Ryan McGrew
    Acciones de comentarios Permalink

    Hey All,

    I'd like to hopefully clarify a bit. There are a few ways to manage anchor links within a document. The suggested method in the linked document is to use the anchor tag with a name attribute and no href attribute.

    <a href="#foo">Link to foo</a>

    // more and text and mark up here

    <a name="foo"></a>

    In this scenario click Link to foo will scroll the browser to this element in the document. This way is used prevalently, but with the introduction of HTML 5 is no longer valid HTML markup. That doesn't mean that browsers don't support it. Browsers support a wide range of features beyond what's defined in the HTML 5 specification. We do not expect this to change any time soon, so I wouldn't worry about. You won't need to update your existing document.

    As other have written using an id attribute on an element is a valid way doing the same thing. This is the convenience method we include in the Headings tab of linking to headings in the document. This will include a link and place an id attribute on the heading you've selected. So the resultant mark up of linking a piece of text would something like this

    <a href="#foo">Link to foo</a>

    // More text and markup here

    <h1 id="foo">Foo</h1>

    Our editor has some built in functionality to prevent the insertion of some attributes, so we don't allow you to place an id attribute on just any element. But this does work for headings.

    I believe this should answer your question. Let me know if i can provide further detail.

    Thanks!

    0
  • Ryan McGrew
    Acciones de comentarios Permalink

    Stephen,

    To your first question. You inserted 

    <a name=ZendeskNewAnchor></a><p>Zendesk new anchor</p><p>Heading for Zendesk New ANchor</p>

    And the source view added <p> tags wrapping it. This is expected behavior.

    You then linked to it via the link dialog. And it created an element like this

    Click <a href="#ZendeskNewAnchor" target="_self">this</a> to go to ZD new link

    That's it, there's nothing else to do at this point. We added back the same workflow that the editor previously had. There's no need to touch name or id attributes for these thinks. There's no conversion and the editor will continue to recognize the name attribute. Please follow the same workflow you were using before if you were using this behavior.

    If you use the link to heading functionality that we've added in the editor, it will generate an id attribute on the heading you've selected and insert an anchor tag with a link to it. 

    If you are writing this yourself in the source code editor, the href in the link needs to match the id of the element you're targeting with a # in front

    So if you have a heading with an id attribute of "important-heading"

    <h1 id="important_heading">Some heading text here</h1>

    Then your anchor link targeting that attribute would be

    <a href="#important-heading">Some link text here</a>

    In this example, I could choose any text I would want for the id attribute. The corresponding anchor link's href just needs to match. In my previous example, foo is just a programming term that stands in for any arbitrary text or value. Please disregard.

    To your last question about "Open in new tab", this will work for any kind of link.

    I'd recommend brushing up on some of HTML syntax and behavior. These seem to be good resources

     

    0
  • Stephen A Kairys
    Acciones de comentarios Permalink

    Ryan,

    I want to post the following in an email to my team. Please review for inaccuracies. (Anyone else reading this, please ignore until Ryan approves. Thanks.

    -------------

    If you'e inserted an anchor link e.g.

     

    <a name=AnotherNewAnchor></a>

     

    You now (within the same doc) link to it as follows.

     

     

    1) If you have click here "Click here to test"

    2) Highlight "here" and click on the (link icon) on the ribbon, you will see the following screen

     

     

    3) Click HEADING and the following screen will display,.


     

     

     

    4) Click NEWAANCHORFORMAT being sure to click the instance that displays "Anchor" below it.

     

    5) Clink "LINK"

     

    6) Test your link in Preview mode.

    ------------

    Ryan, if you have a better instruction set I can convey to my team, please post here. Thanks.

    0
  • Ryan McGrew
    Acciones de comentarios Permalink

    Stephen,

    This looks fine. Thanks!

    0
  • Nicky Lilja
    Acciones de comentarios Permalink

    Hi Everyone. Thanks to your comments I now get Anchor links to work. 

    However I am still struggling with the link jumping further down than the text. See Gif

    How can I fix this? 

    I use <a href="#C4">Jump to Chapter 4</a> 

    then 

    <a id="C4"></a>Chapter 4

     

    I now also found that in the Source Code editor it looks like: 

    But in the editor mode in articles (before clicking preview where it works as the gif illustrates) I see: 

    Why does it change like this? I am assuming I am doing something wrong with the code?

    Thanks!

    0
  • Annie Ashenfelter
    Acciones de comentarios Permalink

    Hi Nicky, I have the same problem where my anchor links do not accommodate the height of the "topbar" element of the page.  

    It looks like this has been raised in another post ... I've just added my Vote and Follow here, and I encourage you to do the same in order to give this more attention!

    https://support.zendesk.com/hc/en-us/community/posts/360033452434-Top-banner-blocking-anchor-links

    0
  • Nicky Lilja
    Acciones de comentarios Permalink

    Hi Annie. Thank you for letting me know. I didn't see that post. 

    I have voted and i'm following that post as well now in hopes of seeing a solution. 

    Thank you again. :)

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk