How to change the color of every hypertext link ?

Ask the community
,
1

Hi,
I’ve recently implemented the rich text editor on my website for users to submit their data which are displayed publicly afterwards on a specific page. Thing is, links on my website appear same as the rest of the text : plain black, and non underlined.

I’d like links to have a recognizable color, such as blue, on the entire website.

I tried looking for a code that would do that but couldn’t find any.

Thanks !

1 Like
2

Hey Tristan!

Here’s a quick solution for the specific rich text editor:

$w.onReady(function () {
  $w("#html1").onMessage( (event) => {
    $w('#text1').html = event.data.replace(/\<a/g, `<a style="color:#0782C1;text-decoration:underline"`)
  }); 
});

This will make the links generated by the rich text editor have the given color, with an underline.

A more comprehensive solution for the specific problem will be coming soon.

J.

3

Hi,

Thanks for the answer, where should I put the code ?

Here is the HTML code for the text editor, on the submit page

#html1 :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">   
    <script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js"></script>  
    <script type="text/javascript">
     function init() {       
         window.onmessage = (event) => {  
         if (event.data == "save") {
            window.parent.postMessage(CKEDITOR.instances.CK1.getData(),"*"); 
         } else {
            CKEDITOR.instances.CK1.setData(event.data);
            window.parent.postMessage("set","*");
         }
       }
     }
     </script>
  </head>
  <body onload="init();">
    <textarea placeholder ="test" name="editor1" id="CK1"></textarea> 
    <script>
        CKEDITOR.replace("editor1"); 
        window.parent.postMessage("ready", "*");
    </script>
  </body>
</html>

I want the link to be recognizable on the “content” page (as I said, it works just like a forum, there is a page to post the message, then a page to see your post.)

4

Hey Tristan,

The snippet I wrote above doesn’t go in the HTML code, but in the page code, on the bottom of the screen in your editor (part of setting up the rich text editor required a snippet there)

Let me know if you have any more questions!

J.

5

Where should I paste it ?
Also, when I paste the code in the code editor, it shows “text1” as an error.

1366×768 80 KB

6

Hey Tristan,

The reason it shows “text1” as an error, is probably because you don’t have a component with that name. You should change the name to fit your site, in this specific case just read on.

Before I talk about fixing the styles, I’d like to point out that you should probably take the whole “onMessage” clause (lines 20 - 27) and move that to after line 10. All the function calls named “onMessage” should be called only once. (The current implementation says that every time you click button15, you add an additional response to the html component, which I assume is not what you want to do, and rather just define the response behavior to the html component once)

Now for where to stick the code snippet. Line 23 says: “use the event data from the HTML component to set the field value descriptionmod in the dataset”. If I understand correctly what you’re trying to do, it’s that event data that you want to tweak. Replace line 23 with the following two lines:

 const dataWithFixedLinkStyles = event.data.replace(/\<a/g, `<a style="color:#0782C1;text-decoration:underline"`);
 $w('#dataset1').setFieldValue("descriptionmod", dataWithFixedLinkStyles);

I think that should do the trick.

Let me know how it went :slight_smile:

J.

7

Thanks, it seems to work !

Just one request, is it possible for a link to be automatically converted into a clickable link when pasted ? by default the link is not clickable.

Also, when I try to do as you recommended, I get this error

1366×768 80.7 KB

8

Hi,

I believe you are missing a }); before the button click function declaration.

9

Perfect, thanks, it works now !

I have other requests regarding this bit of code, if you could help me that would be much appreciated :slight_smile:

The most important one is for the page to redirect to the item page, that the user just posted, right after he clicked on the button, since now it doesn’t do anything after the data is sent to the data base.

10

Has a clearer solution been published now? I am slightly lost in this post’s instructions.

11

I want to change links site-wide, adding color and removing the underline. Is there a setting or code snippet for this?

12

See Binyamin’s post Change color of all hyperlinks .