phanan / vue-linkify Goto Github PK
View Code? Open in Web Editor NEWA simple Vue directive to turn URL's and emails into clickable links
A simple Vue directive to turn URL's and emails into clickable links
How can I use the directive so HTML is escaped like here: http://soapbox.github.io/linkifyjs/docs/linkify-string.html ?
<span v-if="message.message" v-html="message.message" v-linkified:options="{ events: { click: event => { alert('click') } } }" > {{ message.message }} </span>
I tried this plugin with Nuxt.js. Everything works fine except SSR - plugin works only on client side.
Can vue-linkify prepare HTML on server side? Thanx.
plugins/vue-linkify.js:
import Vue from 'vue'
import linkify from 'vue-linkify'
Vue.directive('linkified', linkify)
template:
<p v-html="studio.text" v-linkified:options="{ nl2br: true }"></p>
This work great for most scenarios however I am required to also linkify some custom app schemas which are failing to linkify currently.
For example these work:
www.examplesite.com
examplesite.com
https://examplesite.com
This half works:
custom-scheme://examplesite.com
A custom schema only half works - by that i mean the text 'custom-scheme:' is not part of the link but '//examplesite.com' is linkified.
Is there any way to solve this, or a way to update to ensure the whole text is linkifed?
Does this plugin support mentions as linkifyjs?
When I use this plugin on a DIV which has something like
<div v-linkified>{{ item.summary }}</div>
the vue-linkify plugin breaks reactivity of Vue.
When I update item.summary it is not reflected in the div.
How can I best fix this?
Does this library support the enabling of linkify plugins (like hashtag, mentions, etc.)? If so, what is the process for enabling them?
Hello there,
I have a string that i want to display with linkify. In it there are newline characters "\n". Unfortunally this doesn't insert these in the text. My code:
<div
class="mx-10"
v-linkified
v-html="nextEventTime.announcement"
></div>
I have tried using {{}}
but this breaks reactivity. Any ideas to fix this?
Hi, thank you very much for this awesome library!
Although this works with many cases, I found a situation where v-linkified
component does not re-render after changes via props, data, computed, etc.
Demo:
https://vue-linkify-not-working-demo.vercel.app/
Source Code:
https://github.com/yuichkun/repro-vue-linkify-bug
I guess this bug derives from the fact that this library gets text values from el.innerHTML
, so if there's a way to get text from vNode
, it could avoid referencing the old value??
I'm not too familiar with Vue.js but if @phanan is busy, I'm up for trying making up a fix PR myself :)
The way the library works via v-html
allows someone to inject arbitrary html if they can control the input string to linkify. An example is here
The linkify notes on this are available here:
I'm not sure any code changes are necessary, but a disclaimer that only trusted strings should be passed in the Readme might be appropriate. Vue obviously makes this disclaimer in their documentation, but I think it is worth reiterating it in this project just because it is likely that users of this library would want to use it with untrusted strings of text.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.