1.2.11 • Published 2 years ago
dolinks v1.2.11
dolinks
Not tested with Vue3
Vue directive to make links clickable in chosen HTML component, preserving newlines symbols of your text.
Installation
$ npm i dolinks
Import
// import dolinks in your project root
import dolinks from 'dolinks'
// pass it to Vue.use() method
Vue.use(dolinks);
Additional options object:
interface IOptions {
urlRegEx?: RegExp,
target?: '_self' | '_blank' | '_parent' | '_top',
disableWarnings?: boolean,
}
Pass options object as a Vue.use() parameter:
Vue.use(dolinks, options);
Usage examples
dolinks assumes that you'll pass your text to the template using the Vue "Mustache" syntax.
1. Mark you HTML tag with v-dolinks
directive:
2. Pass text using {{ yourText }}
Preserve your \n symbols:
Input:
<template>
<p v-dolinks :style="{'white-space': 'pre-wrap'}">
{{ yourText }}
</p>
</template>
<script>
data() {
return {
yourText: 'Some \n splited \n https://achievki.io \n here'
}
}
</script>
Output:
<p style="white-space: pre-wrap;">
"Some splited"
<a href="https://achievki.io" target="_blank">https://achievki.io</a>
" here"
</p>
Sanitizes all other HTML tags:
Input:
<script>
data() {
return {
yourText: 'https://example.com Let`s try to pass some <script> with <a href="https://google.com">GOOGLE LINK</a> <\/script>'
}
}
</script>
Output:
<p style="white-space: pre-wrap;">
<a href="https://example.com" target="_blank">https://example.com</a>
" Let`s try to pass some <script> with <a href=""
<a href="https://google.com" target="_blank">https://google.com</a>
"">GOOGLE LINK</a> </script>
</p>
Options
urlRegEx
Should be valid RegExp. By this expression, dolinks will deside what text should be transformed to an <a> tag. Text, matched this regex, also will be used as a value for href atribute.
Default:
/https?:\/\/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b[-a-zA-Z0-9@:%._\+~#=\/]{0,2048}/
target
The value for target atribute of an <a> tag. Should be a valid value for target:
- _self
- _blank (default)
- _parent
- _top
disableWarnings
If true - disables all dolinks warnings and errors. Default - false.
Known issues
- If text inside your tag with v-dolinks directive needs to be reactive, you should re-render component on each text update (e.g. use
<p v-dolinks :key="yourText">{{ yourText }}</p>
).update
andcomponentUpdated
Vue directive hooks not working correctly with 1.2.0 and disabled for 1.2.1.
License
MIT © vladhutsal