-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Link without target - how to? #1139
Comments
You can override the link format with a custom format that doesn't create the target attribute. You can't have two formats acting on the same A tag name. |
@benbro thank you for the hint. But I would really need two kind of links:
What about inserting the html programmatically? Is this the way to go? (and how would I do this?) |
Remove the target attribute only from you inner app links: |
@benbro great - now I get it how I can do it basically. The only one remaining problem is how to translate this in typescript (because of MyLink extends Link which is imported in a non module specific manner) |
The link is exported as a normal Javascript class. |
@benbro in this Typescript definition there is no Link definition. So I do not know how to use this and I have also no idea how tho write one (at least in this constellation) The problem, from my point of view, is the import of the Link class which acts as base class for the sublclass.
I would rather expect something like:
I had to go the "hard" way. Which means translation of the es6 source code with babel and manually inserting the result in my typescript project. (135 lines of ugly code ) |
We have to use ES5 exports at that moment since if we use ES6, you can't do |
@jhchen yes you are right, browsers don't suppport import. But that's why we have to use babel / typescript and so on... |
Yes not everyone is using Babel or Typescript. Many build systems are just using ES5 style imports. |
Something like this const Link = Quill.import('formats/link')
class linkType extends Link {
static create (value) {
let node = super.create(value)
value = this.sanitize(value)
if (validations.isNumeric(value)) {
node.setAttribute('href', 'tel:' + value)
node.className = 'link--tel'
}
if (validations.isEmail(value)) {
node.setAttribute('href', 'mailto:' + value)
node.className = 'link--mail'
}
if (value.startsWith('https://') || value.startsWith('http://')) {
node.className = 'link--external'
} else {
node.removeAttribute('target')
}
return node
}
}
Quill.register(linkType) |
In Link extension you have to add format() method. So link editing (not only creation) works https://codepen.io/Poky85/pen/PQoPrV |
I used a tricky way, to support dynamic way adding target="_blank", by adding parameters in URL: // after adding url in custom way
this.editor.focus()
this.editor.updateContents([
{ retain: this.editor.getSelection().index },
{
// An image link
insert: 'quill',
attributes: {
link: 'https://quilljs.com?isBlank=true',
target: '_blank'
}
}
]) and in setup: (which is *.js file under plugins, that I used Nuxt.js) import Vue from 'vue'
import VueQuillEditor, { Quill } from './vue-quill/ssr'
const isTargetBlankRegex = /\?isBlank=true/
const Link = Quill.import('formats/link')
class MyLink extends Link {
static create(value) {
const isTargetBlank = isTargetBlankRegex.test(value)
let node = Link.create(value)
value = Link.sanitize(value).replace('?isBlank=true', '')
node.setAttribute('href', value)
if (!isTargetBlank) {
node.removeAttribute('target')
}
return node
}
format(name, value) {
super.format(name, value)
if (name !== this.statics.blotName || !value) {
return
}
if (!isTargetBlank) {
node.removeAttribute('target')
}
}
}
Quill.register(MyLink)
Vue.use(VueQuillEditor) I edited @Poky85 's code from codepens, check url from constructor and set target="_blank" if "isBlank=true" exist. Hope someone will think useful 😄 |
hey @letanure , this one looks great. do you know how to do that in ES5 environment? :) |
Could you explain please what exactly case will not work without format override? |
I got this working in Typescript by simply using this:
|
How can I add an additional link behaviour with no target '_blank':
Do I have to develop my own "Blot"?
Can anybody give a hint?
The text was updated successfully, but these errors were encountered: