Trix: Open in New Window option for links does not exist

Created on 22 Oct 2015  路  19Comments  路  Source: basecamp/trix

Most helpful comment

IMO, Workaround suggest to post-process is poor. I might want to create links to external content and internal content.

All 19 comments

+1

In the context menu? Shows up for me in Safari 8.0.8.

Edit: I'm not a smart person.

@codeclown I鈥檓 guessing @Quirksmode means an option in the editor to add target="_blank" to a link.

That's correct @adamschwartz, whilst I don't agree it's best practice, I am yet to meet a client who doesn't want the ability to open their links in a new window. A simple checkbox below the input where you add the url would suffice :-)

@Quirksmode Absolutely I think it鈥檚 a very reasonable suggestion. :+1:

Yes please!

Thanks for the feature request, but I don鈥檛 think we鈥檒l be adding this to Trix. If you need to add a target attribute to links, I鈥檇 suggest post-processing the HTML when you render it in your application.

This would be a great, and trivial feature to add, while adding post-processing to any application that would like this feature is definitely more complex.

Would you reconsider?

You could also handle this client side instead of post-processing your HTML:

// Open all external links in a new window
addEventListener("click", function(event) {
  var el = event.target

  if (el.tagName === "A" && !el.isContentEditable && el.host !== window.location.host) {
    el.setAttribute("target", "_blank")
  }
}, true)

IMO, Workaround suggest to post-process is poor. I might want to create links to external content and internal content.

+1 yeah - i'll need this one too

If anyone is looking for a quick way to fix this in rails. Here's what you can do:
(needs nokogiri)

module TrixHelper
  # found at stack overflow: https://stackoverflow.com/a/41557234/244089
  def change_a_target(body)
    doc = Nokogiri::HTML(body)
    doc.css('a').each do |link|
      link['target'] = '_blank'
      # To avoid window.opener attack when target blank is used
      # https://mathiasbynens.github.io/rel-noopener/
      link['rel'] = 'noopener'
    end
    doc.to_s
  end

  def sanitize_trix_html(html)
    sanitize(change_a_target(html), tags: %w(strong a), attributes: %w(href target rel))
  end
end

Then in your view you can:
<%= sanitize_trix_html(@post.body_html) %>

as the usage is growing, I am facing limitations with trix and this is one of them. The other one is inability to set constraints like required for the input boxes.

+1 on this one... it's a _very_ common use-case, and doing this outside the editor (post-processing) seems like a hack. It seems a a strange decision to reject it outright like this.

Adding my +1 to make this feature part of Trix.

+1

Is there a philosophical reason this is not to be developed? As in, if a PR were to come in for this, would it be rejected?

+1

Post process only handle trix html after, we also need it to target blank when editing.

FYI, at last I add it works for editor and show trix content.

$(document).ready(function() {
    $(".trix-content a").click(function(e) {
        $(this).attr("target","_blank");
    });
});

@RicottaZhang this workaround works well. Thank you. All Trix links are opened in a new tab.

Was this page helpful?
0 / 5 - 0 ratings