Hyperlink in Editor

mhshinde

Suppose I have given a hyperlink say ‘www.google.com’ to a text in quasar editor. After submitting, when I click on that text, It takes me to ‘localhost:8080/www.google.com’ i.e, on the same page. as a result, it gives an error.
I want this link to open in a new tab. And the link is taking current API as a prefix, I don’t want that to happen.
So if anyone can help me with this, I will be very grateful to him or her.

priya2995

You need to import openUrl from quasar.
<template>
<q-btn @click.native=“openURL(‘https://twitter.com/quasarframework’)”>quasar</q-btn>
</template>
<script>
import { openURL } from ‘quasar’

export default {
name: ‘MyLayout’,
methods: {
openURL
}
}
</script>

mhshinde

@priya2995 , I think I was not clear with my question.
I have a Quasar Editor in my project.

<q-editor
      v-model="model"
      toolbar-text-color="white"
      toolbar-toggle-color="yellow-8"
      toolbar-flat
      toolbar-bg="primary"
       :toolbar="[
           ['bold', 'italic', 'underline'],
           ['link'],
           ['print', 'fullscreen']"
/>

Suppose I wrote some text in that editor and set a hyperlink say ‘www.google.com’ to some text using the hyperlink button which is a functionality provided by quasar editor. After submitting, I am displaying that message on a page and it also contains that hyperlinked text.
Now, when I click on that text, I want that it should redirect me to ‘www.google.com’ in a new tab. but it is taking me to ‘localhost:8080/www.google.com’ i.e, the link is taking current API as a prefix that in the same tab.
I Have no idea how to do this. Any help would be great.
Thanks!

priya2995

follow this link.
https://github.com/quasarframework/quasar-play/blob/master/src/pages/showcase/forms/editor.vue
https://quasar-framework.org/quasar-play/android/index.html#/showcase/forms/editor
in 2nd link make read only toggle enable.

digiproduct

@priya2995 Is the editor itself made up of Quasar components?

If it is, then wouldn’t it be possible to add additional functionality to those components?

For example, a toggle could be added on the URL bar for “Open in a new window”

qyloxe

@digiproduct the Quasar editor is quite OK for most tasks. It is possible to extend it easily, because HTML editor as a concept is an ancient one, and there are tons of examples in net how to insert images, change selections etc. HTML user inputs needs unfortunately some advanced processing (security, xss) on the server side, so I would argue, that in most cases, what user really needs is something different.

In cases where user needs just SOME formatting than I would suggest one of the many Vue markdown editors.

In cases, where users needs a whole new level of editing experience I would strongly suggest this:

https://tiptap.scrumpy.io/

I just hope, that it will be integrated with Quasar as an app extension, as soon as possible, before any other Vue framework will claim this acquisition into itself

digiproduct

@qyloxe That is VERY nice.

I hope that @rstoenescu or someone else from the team see this and decide to add it into the Quasar Framework.

digiproduct

@qyloxe The Collaboration feature is absolutely amazing!

@s-molinari Have you or any of the other team members seen this? https://tiptap.scrumpy.io/

priya2995

@digiproduct I just gave the example that already have on quasar-framework.org.

No More Posting New Topics!

Hyperlink in Editor