Hi @radmitry, one solution is to use a little jQuery plugin called Linkifyjs: http://soapbox.github.io/linkifyjs/docs/#quick-start
To get this to work on a Webflow site for a rich text box, give the rich text box a class name, like “my-rich-text”:
Next, with the Rich Text Block still selected, go to settings tab and add a custom data attribute:
Name: data-linkify
Value: this
Click Save to close and then open the page settings to insert the linkify custom code in the before body tag:
Assuming the class name of the Rich Text Block is “my-rich-text”, the code to load the plugin and to linkify the text in the Rich Text block would be:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.4/linkify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.4/linkify-jquery.min.js"></script>
<script>
// A $( document ).ready() block.
$( document ).ready(function() {
$('my-rich-text').linkify({
target: "_blank"
});
});
</script>
The script will only render on the published site, links shown in the designer will not be shown:
Editing the collection item:
As shown in the designer:
As shown on the published site:
Here is a link to an example that can be cloned if it helps: https://webflow.com/website/Using-Linkify-jQuery-Plugin
I hope this helps!
Cheers,
Dave
