Comments (13)
In case somebody is interested. I'm using this to help the user and insert https:// for them:
function prependProtocol(urlField) {
if(urlField.value.indexOf('http') != 0) {
urlField.value = "https://" + urlField.value
}
}
document.addEventListener('trix-initialize', event => {
let linkButton = event.target.toolbarElement.querySelector('input[value="Link"]')
let urlField = event.target.toolbarElement.querySelector('input[name="href"]')
urlField.addEventListener('keydown', (e) => {
if(e.key == 'Enter') {
prependProtocol(urlField)
}
})
linkButton.addEventListener('click', () => {
prependProtocol(urlField)
})
})
from trix.
I think it's important to be able to create relative links. I was confused when testing the editor and tried entering "/contact-us" to see what happened and it wouldn't let me create a link.
from trix.
The link input is an <input type="url">
and is validated by the browser natively. The lack of feedback for invalid URLs is a result of our default styles. I'll make sure to fix them up, and in the meantime you're free to override them in your app or not include them at all.
Firefox doesn't appear to be affected and correctly highlights the field as invalid:
If you want to change the element to allow any input, you could change it to a text field:
input = Trix.config.toolbar.content.querySelector("input[type=url]")
input.type = "text"
Customizing the toolbar like this is undocumented currently because it's likely to change, but it should work fine for now.
from trix.
👍
from trix.
I see the problem, the problem is the pattern, that is this:
matchingSelector = "a:not(#attachmentSelector})" in text_attributes.coffe
If you put a letter and then ":" always works. The pattern should be corrected
from trix.
I reproduced this when integrating Trix into a project of mine as well. Excellent project, btw - very easy to work with and does exactly what it says on the tin. 👍
from trix.
@javan thx!
from trix.
I fixed up the invalid link input styles in the latest release, 0.9.1.
from trix.
It's still bad UX for an editor to not allow someone to type something more friendly like google.com
and have it auto-add the prefix.
from trix.
@philfreo, totally agree. I'd be happy to review a PR that improves things.
from trix.
What about using autolinker.js. It seems to work pretty fine.
Maybe even easier would be to make this a plugin which makes links automatically as you type. So through the toolbar you have to enter a precise URL. But if you enter it in the text, like type it in, it auto-links it.
from trix.
When link created: clicking on it do nothing! Its possible to open link only via browser menu (right mouse click)
from trix.
since Trix has changed the suggested fix no longer works (the feedback works fine). here's how I did it
const { toolbarElement } = event.target;
const urlInput = toolbarElement.querySelector('input[name=href]');
urlInput.type = 'text';
// Beware the double escape. since we pass regex as a string we have to double escape the backslashes
urlInput.pattern = '^((?:https?:\\/\\/)?[^./]+(?:\\.[^./]{2,})+(?:\\/.*)?)$';
from trix.
Related Issues (20)
- Backport CVE-2024-34341 to trix v1 HOT 8
- Is there a way to reinitialize the instance of trix? HOT 1
- Ability to convert an image file before upload HOT 11
- Deprecation of DefaultProps HOT 3
- Version 2.1.1 is removing the img from previews HOT 4
- Support for embedded attachments with expiring url? HOT 2
- Problems with trix sanitization HOT 1
- 在块级元素上设置class或style属,插入编辑器中无效
- Function getClientRectAtPosition produces incorrect results
- Autofocus can not be disabled in Node/ExpressJS and EJS
- Issue with rails hotwire trix textarea resize
- Trix Text Display challenge
- How to insert text into editor after menu button is clicked?
- Uncaught TypeError: element.editor is undefined
- Upload to Active Storage when paste images with CTRL + V HOT 1
- Code samples in official documentation work for 1.3.1 but not for 2.1.3
- How to clone Trix default link button, so I have modal and insert text into editor?
- Inconsistent breaks when pasting content with format due to CSS margin setting
- When using the Trix editor with Rails' Turbo Frames, attempting to insert/edit any hyperlinks after the first doesn't render the link properly
- Trix no longer adds dataset attributes on inserted attachments in 2.1.4 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from trix.