RichEditor > Link > Add "target" attribute

[Ator9]

Hi,

I'm wondering if there is a way to add the target attribute to the RichEditor > Add Link > Target > "_blank".

I switched from plain Textarea to RichEditor to write content and that functionality is useful when you need to add links for an external page.

If there is a hack/quickfix I will take it too :)

Thanks for the help!

Regards,
Sebas

[WillianDamasceno]

Yeah, I need this functionality, but it seems like it's not possible yet.

A quick fix would be a JS script that inserts the target="_blank" attributes on page load.

I solved it with the following script:

const links = document.querySelectorAll('.prose a')
links.forEach(link => link.setAttribute('target', '_blank'))

But it applies to all links, maybe it's not what you need.

You can change the selector for the links in the .querySelectorAll() method.

It would be nice to have this option built in, my clients often report it as a bug when they try to access the links and it does not opens in a new tab.

This is a very old discussion, I hope this is implemented some day.

[Earn717]

I achieved this using event handlers but it would be nice to have it built in.

   <script> // opens the trix editor content links in a new window
        // main content page
        $(document).ready(function() {
            $(".txt a").click(function(e) {
                $(this).attr("target","_blank");
            });

            // For the content injected by javascript.
            // sidebar modal
            $("#rightModal").on('click', '.txt a', function(e) {
                $(this).attr("target","_blank");
            });
        });
    </script>

[ue-cthompson]

Not sure if this will help anyone, but figured I would share.

We had the same issue when creating links for an item in a relation manager. Obviously, this can be adapted to be on the parent component, but it is done on save as opposed to changing it on the front-end. "content" is the name we assigned on the form component in filament. The main idea is to change the form data before it is saved to the database or as it is being used.

CreateAction::make()
    ->mutateFormDataUsing(function (array $data): array {
          if (isset($data['content'])) {  //-- Make all links in content open in a new tab
                $data['content'] = str_replace('<a href="', '<a target="_blank" href="', $data['content']);
            }
            return $data;
        }),

[jocahdj]

You could do something like this on your model, assuming your field is called content:

public function geContentAttribute($value): string { return preg_replace('/<a\b/i', '<a target="_blank"', $value); }

[WillianDamasceno]

The problem with this is that if you edit the record again, it will add the target attribute over and over again into the anchor. I think it's better to add the target attribute using JS in the frontend.