Change the color of links withing the Rich Text Box

Hi!

I want to automatically detect and set links to show a in a certain color when displayed on the website.

I already have this bit of code which was related to the CK Editor, but now I’ve changed for the Wix Rich Text Input.


const dataWithFixedLinkStyles = event.data.replace(/\<a/g, `<a style="color:#006bd7; text-decoration: underline;"`);
 
$w('#dataset3').setFieldValue("commentRich", dataWithFixedLinkStyles);

Any idea how to apply this to the rich text input?

Thanks!

bump!

Basically the same;

let richTextVal = $w("#richText1").value.replace(/*etc*/);

I tried it, and it didn’t work.

On second thought, I want to change the way I apply this code to the links. I want the code to modify the text once it’s displayed in the page, not upon submission.

So basically, I want the code to “read”/“scan” the said text, and replace the color if it contains a link.

I tried this :

   $w("#dynamicDataset").onReady(() => {
        $w("#repeater2").onItemReady(() => {

$w("#text88").text.replace(/<a/g, `<a style="color:#006bd7; text-decoration: underline;"`);

// [...]

but it didn’t work (I did not get any error mind you.)

Here is an example to illustrate my idea :

In the description, you can see that the word “Auchan” contains a link (that’s the default style from the database), well I want it to be in this one blue color, and also to open in a new tab (which is not the case with the default setting provided by the Wix Database)

@tristan-breon-1 You need to make an assignment and use the html property:

$w("#text88").html = $w("#text88").text.replace(/<a/g,`<a style="color:#006bd7; text-decoration: underline;"`);

Or using split-join:

$w("#text88").html = $w("#text88").text.split("<a").join(`<a style="color:#006bd7; text-decoration: underline;"`);

Hi, sorry for the late reply, but this doesn’t work. It shows the text in really small case on the live version of the website, and doesn’t show any result in changing anything about hyperlinks.

As you can see here:


Normal text (prior to inserting your code) :