2

I want to automatically make links (e.g. https://xmpp.org/) into the text of a Text element clickable, so the link can be opened in a browser (without manually copying the link).

I can't add e.g. <a href="https://xmpp.org/"></a> manually in my code, because the input comes directly from users.

Has Qt a simple solution for this in QtQuick/QML?

LNJ
  • 304
  • 2
  • 13
  • 1
    What kind of element are you using ?, Are you using TextEdit or another element? – eyllanesc Aug 15 '17 at 11:03
  • If you know how to create a link in a label, just use regex to recognize whether the input is URL. – The Quantum Physicist Aug 15 '17 at 11:17
  • Have a look at https://stackoverflow.com/questions/8427446/making-qlabel-behave-like-a-hyperlink – JLev Aug 15 '17 at 11:36
  • For clarification: You want the user to input a link then turn that link into a hyperlink? Using a `QLabel`? – Error - Syntactical Remorse Aug 15 '17 at 14:31
  • If you're using a QLabel, you can do something like `myLabel->setText(myLabel->text().replace("https://xmpp.org/", "");`. – Donald Duck Aug 15 '17 at 14:57
  • I'm using QML for the GUI (not QWidgets). – LNJ Aug 15 '17 at 15:18
  • I'm developing an instant messaging client, and I want to make all links in my chat highlighted and clickable. – LNJ Aug 15 '17 at 15:20
  • @LNJ If you tell us what element you are using in your chat we could help you, but the question will be closed because it is broad. – eyllanesc Aug 15 '17 at 20:32
  • 1
    @eyllanesc op told us in the title and in the body of the question, `Label` and `Text` are Qt Quick components used in QML. This question is very clear. – GrecKo Aug 16 '17 at 07:38
  • @GrecKo Thanks. :) I use a special Label (from Kirigami), but it is just changes some simple design properties of the Qt Quick Templates Label, that is based on the normal `Text` element. The answer hasn't to be for this special case, one for the normal Qt Quick `Text` element is enough! – LNJ Aug 16 '17 at 10:18

2 Answers2

3

You can use something like that(Regex is from this answer); 

Text {
   property string text2: "http://www.google.com"
   text: isValidURL(text2) ? ("<a href='"+text2+"'>"+text2+"</a>") : text2
   onLinkActivated:{
       if (isValidURL(text2)){
          Qt.openUrlExternally(text2)
       }
   }
   function isValidURL(str) {
      var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
      return regexp.test(str);
   }
}
bmeric
  • 1,124
  • 1
  • 17
  • 27
1

You can use TextArea or TextEdit components, set textFormat property to TextEdit.RichText and listen to onLinkActivated signal.

E.g.

TextArea {
  id: ...
  
  textFormat: TextEdit.RichText 

  onLinkActivated: Qt.openUrlExternally( link )
}

Note: in order the link in browser you need to use Qt.openUrlExternally

One hint, in order to make the component not editable (so that user can not type in), DO NOT set enabled property (inherited from Item) to false, use readOnly property instead. Setting enabled would make link unclickable.

tomas
  • 106
  • 4
  • This is a good option, but unfortunately it does not automatically turn "http://…" text into links as well. – ratijas Jun 26 '22 at 11:19