editor-js / link Goto Github PK
View Code? Open in Web Editor NEWLink Tool for Editor.js 2.0
License: MIT License
Link Tool for Editor.js 2.0
License: MIT License
Пожалуйста, обновите для версии 2.0
Hi,
is it also possible to put an async function as the endpoint instead of haveing a URL ?
Great software, thank you so much. Just what i need. Better yet, looks like I can change what I need.
When entering a link, I would love a choice of layouts. Maybe a big image above, maybe a caption underneath. Maybe image on the left. A drop down menu to select which layout I want to use.
I will be reading the code more closely in the future. Maybe you even have a collection of layouts I can select from in the config file.
And then the read-only version could display that layout. Maybe eventually the html generators would understand it as well. Unil then, I will be trying to grab the html from the read-only version. Wish me luck.
If you paste url that don't contains preview image. php backend of editorjs can't validate whole URL block, because url field is empty, but string is required.
Hi,
The @codexteam/ajax
library have changed the way data is returned in ajax.get()
method. This is breaking the main functionality of the link pluging. This commit made the change.
Here is the code:
Lines 363 to 386 in f076c97
Best.
Related PR: #83
Just in case it's better to have an issue to follow the PR up. Please close it if not required.
I have modified the existing link tool to get rid of backend depedency in order to fulfill my project requirements. May I share my work?
I think that extracting meta data from url could be implemented in this extension.
But according to the guide, users should implement that logic in their own server.
I am just curious that there is some reason like security or something.
For a valid link block, can any of the link
or meta
properties under any circumstances (now or in the future) be null
or omitted? For the meta
object, I assume any of its elements can be omitted, but for the meta.image
object, will url
always be present and non-null? Are any of the aforementioned properties guaranteed to always be present and non-null
for this block to be valid?
Context: I'm a back-end .NET developer needing to parse Editor.js documents. The readme lists all of the aforementioned properties but does not explicitly guarantee that they will always be present and non-null. Back-end deserialization/parsing in strongly typed languages would be easier with some guarantees about which properties can and can not be null/omitted. (Ideally, any such guarantees should be added to the readme to ensure they are formalized and kept in the future.)
I'm using Next JS 14, but even after using dynamic importing Link Tool is showing this error. All other tools are working fine.
⨯ node_modules\@editorjs\link\dist\link.mjs (289:5) @ window ⨯ ReferenceError: window is not defined
This tool was built in JavaScript to be a simplest example of Editor.js Tools API usage. Right now further enhancements requires more modern stack.
We need to migrate this project to TypeScript and provide type declarations. Make sure types for the plugin are available when using it in TypeScript project with Editor.js
const tool = {
image: {
class: Image,
shortcut: 'CMD+I',
config: {
uploader: {
async uploadByFile(file) {
// console.log(file);
const fileData = await FiletoBase64(file);
// console.log(fileData);
const res = await uploadImage({ image: fileData });
if (res.success === 1) {
return res;
}
},
inlineToolbar: true,
},
},
linkTool: {
class: LinkTool,
inlineToolbar: true,
config: {
async endpoint(url): await axios.get(`/getMeta/${url_will_be_here_just like_image}`)
},
},
},
}; ilke this or something
when I post link with endpoint, how can I get the link fields on backend? (PHP)
i means "methods"
For example I entered url http://kripipasta.com/story/9630
It redirects to https://kripipasta.com/story/9630-276-j-kilometr.html
So I want to add url
to meta data:
{
"success": 1,
"meta": {
"url": "https://kripipasta.com/story/9630-276-j-kilometr.html",
"title": "276-й километр",
"description": "Получилось длинно.\r\nЯ работаю на железной дороге, занимаю должность помощника машиниста тепловоза.",
"image": {
"url": "https://kripipasta.com/images/gif/42.gif"
}
}
}
And I expect the link to be updated.
I've created a backend API that receives a URL and uses the "url-metadata" tool to get the meat-data from the URL and send it back to your tool.
The thing is when I return a dummy static data from the backend which returns fast. your tool works fine and displays the data normally. check the Image
And you can check my backend response The Static One using this image
However, when I use the tool in the backend it will return the exact same data but it will be late a little bit. (and that convenience, It's an HTTP request after all). your tool gives me "Can not get this link data, try another"
Here is the image for the response data when am using the backend tool - when you give an error
And here is the image for the data when I return a quick static response from the backed - when your tool works fine
Clearly the responses are 100% the same. the time of getting a response is the only difference. So is there any way to change the timeout from your side, because I can't control the response time from the backend nor the internet speed.
Thank you In advance
add-Media
Image-based media
Will neSpecc be able to add a link URL in the image?
This is helpful.
thank you.
Could you support insert link mode rel="nofollow"; target="_blank" ?
Example:
<a href="https://google.com" rel="nofollow" target="_blank">Google Search</a>
Thank you !
When in the link tool if facebook.com is entered and not https://www.facebook.com, the link is stored as an internal link and not an external one. Anyway to have a way to accept the simple url as well ?
I am trying something in this way to configure tools.
tools: {
...
linkTool: {
class: LinkTool,
config: {
endpoint: 'http://localhost:8008/fetchUrl',
headers: {
common: {
'X-Org': 1,
},
},
},
}
Like Example:
https://api.example.com/link?q=https%3A%2F%2Fdomain.com%2Fblog%2Farticle-title
If yes then what is the query param name
OR
https://api.example.com/link/https%3A%2F%2Fdomain.com%2Fblog%2Farticle-title
Please update the code to be more capable of creating links.
For example, there is an option Open link in a new tab.
thank you
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://pravosleva.ru/express-helper/url-metadata/editorjs?url=https%3A%2F%2Fgoogle.com. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
How can I implement security logic in endpoint config?
Blocks will be generated even if no link is entered:
{
"type": "linkTool",
"data": { "link": "", "meta": {} }
}
I think that blocks with no link must not exist.
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.