editor-js / image Goto Github PK
View Code? Open in Web Editor NEWImage Block for Editor.js
License: MIT License
Image Block for Editor.js
License: MIT License
Hi There,
I'm trying to store the image locally with pouchDB, which is working, but I can't find a way to retrieve the image from the db, there is no 'url' just an id.
Where is the logic which actually loads the image? If I can override that i'll be fine.
Thanks for a great plugin!
I am new to Editor.js and not sure if this is plugin-specific or not. Is it possible to disable specific settings (caption, withBorder, withBackground, stretched) or disable settings at all? I don't need a background variant, so the user shouldn't be able to choose it in the first place.
Thank you very much, I appreciate your work!
I am trying to upload image by URL but when I paste valid URL with image extensions like ( jpg/jpeg), I cannot find that same url anywhere in my req object. Uploads by file is working fine but when uploading by url , I am having this issue.
router.post('/fetchUrl', (req,res) => {
// console.log(Object.keys(req))
console.log(req.body)
// undefined
console.log(req.params)
//{ }
console.log(req.query)
//{ }
})
//My post routers
router.post('/uploadImage', upload.single('image') , async (req,res) => {
const image = new Image({image: req.file.buffer})
await image.save()
const uploaderRes = {
success: 1,
file: {
url:'http://localhost:3000/' + image._id + '/image'
}
}
res.send(uploaderRes)
})
router.post('/fetchUrl', (req,res) => {
console.log(req.body)
})
//My Editor instance
const editor = new EditorJS({
holder: 'editorjs',
tools: {
header: {
class: Header,
inlineToolbar: ['link']
},
list:{
class: List,
inlineToolbar: true
},
embed:{
class: Embed,
inlineToolbar: false,
config:{
services: {
youtube: true,
coub: true,
}
}
},
image: {
class: ImageTool,
config: {
endpoints: {
byFile: '/uploadImage',
byUrl: '/fetchbyurl',
}
}
}
}
})
Inline toolbar icon is hardcoded, but I want to upload file by paste-action only (by url/file).
The response has file->url but still error uploading message
When the image block is removed, is there a possibility to specify an endpoint where the image url can be sent to? Would be a useful way of deleting the image server side if removed from the editor.
Hi guys,
I am trying to integrate with image and https://github.com/stfy/react-editor.js,
But I am not sure how to do it.
Let me know your thoughts.
Thanks,
It seems it doesn't get neither the caption nor the image style properties (stretched, withBackground, withBorder) that I'm passing with the response.
This is the code of my response.
return response()->json([
"success" => 1,
"file" => [
"url" => "http://localhost:8000/storage/rte-images/" . $cleanedFilenameWithExtension
],
"caption" => "this is the caption",
"withBorder" => false,
"withBackground" => false,
"stretched" => true
]);`
When I look into the outputData, the caption is always an empty string and the image properties (stretched, withBackground, withBorder) are all false.
I get an image - all is ok, but want to make it inside a paragraph. To bypass an image with some text. Is it possible?
Can I embed a link to Image.
Can you add handlers
to endpoints.
If you look at the backend side, yes, it's easier to just specify the url and line up the backend with the format you want. But if you look at it from the frontend side, it is easier to manage the process of sending a file to the backend.
For cases when graphql is used as a transport instead of rest.
For cases when it is more convenient to use your api layer than to adjust to your api.
Something like that
{
handlers: {
byFile (file, done) {
/// magic code
done(url)
},
byUrl (url, done) {
/// magic code
done(urlFromBackend)
},
},
}
// or promise
{
handlers: {
async byFile (file) {
// magic code
return url;
},
async byUrl (url) {
// magic code
return urlFromBackend;
},
},
}
When is this feature due? Or does anyone have tips how to implement this feature myself?
This happens because the editorjs api instance has not yet initialized, so it's currentBlockIndex
starts at -1
making it stretch currentBlockIndex() - 1
by mistake.
Hi,
I configured the image plugig and it's partially working. Basically after I upload an image, I get a never ending loader without the tag with the url being created.
this is the image tool config:
`image: {
class: ImageTool,
config: {
endpoints: {
byFile: '/api/images/image-handler' + '?api_token=' + this.isLogged.apiToken,
}
}
}`
This is the response from the backend (static url just for the example)
`return response()->json([
"success" => 1,
"file" => "http://localhost:8000/storage/rte-images/rose-small.jpg",
]);`
and this is the outputData
that I'm console logging onChange
{ file: "http://localhost:8000/storage/rte-images/rose-small.jpg", caption: "", withBorder: false, stretched: false, withBackground: false }
It's all correct. The image is properly added to the JSON with the url I'm passing in the response. And I get no errors of any kind. So it's actually working except for the fact that the image preloader keeps spinning forever and no tag is added.
Maybe I miss something?
When dragging and dropping an image on editor it fires the byFile
endpoint but the request data on the backend side is empty.
Works fine when using the actual upload image button from the toolbar.
Now I can upload image to backend, but when I clicked remove block from toolbar, the image won't delete in our database, how can I call my delete api when I clicked the button ?
Good day guys,
I have a summary of my concern below
const EDITOR_JS_TOOLS = {
image: {
class: Image,
config: {
endpoints: {
byFile: 'http://localhost:3001/api/uploads'
},
field: 'image',
types: 'image/*'
}
}
}
const CommentEditor = () => {
return <EditorJs tools={EDITOR_JS_TOOLS} />
}
When my react sends request to
router.post('/', async (req, res) => {
//when client use this endpoint, console.log can display a message
})
but where is the data?
I look it to req.body but empty
Thank you.
what if i want to store the image in database buffer instead of having the image in a separate folder.
I am trying to use custom uploader, specifically uploadByFile method. This method takes one argument, which is supposed to be the file that we need to upload on the server. What I am getting isa bunch of file properties, but the actual file is missing.
Here is the reference code.
tools: {
image: {
class: ImageTool,
config: {
uploader: {
uploadByFile(file) {
return fetch('http://localhost:3001/api/v1/file_upload', {
method: 'post',
body: JSON.stringify{
file: file,
filename: 'first_img'
})
}).then(function(response) {
return {
success: 1,
file: {
url: 'https://my-photo-gallary.s3.ap-south-1.amazonaws.com/go_that_extra_mile.png'
}
}
})
}
}
}
}
}
Here is what I receive when logging the file argument.
It would be nice if we have a way to change the image after insertion. A typical use-case is that the application presents a template, with a placeholder image, which the user can change by uploading their own image. Currently, it's not easy to discover how to insert an image block; by having the placeholder (and allowing the user to change it), it will make the block much easier to use.
editor.js\example\tools\image>npm run build
ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: ESLint configuration in C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-config-codex\configs\ts.json is invalid:
- Unexpected top-level property "overrides[0].extends".Referenced from: C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-config-codex\index.js
Referenced from: C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image.eslintrc
at validateConfigSchema (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-validator.js:235:15)
at Object.validate (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-validator.js:261:5)
at loadFromDisk (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:544:19)
at load (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:587:20)
at C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:453:36
at Array.reduceRight ()
at applyExtends (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:431:26)
at loadFromDisk (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:551:22)
at load (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:587:20)
at C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:453:36
at Array.reduceRight ()
at applyExtends (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:431:26)
at loadFromDisk (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:551:22)
at Object.load (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config\config-file.js:587:20)
at Config.getLocalConfigHierarchy (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:240:44)
at Config.getConfigHierarchy (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:192:43)
at Config.getConfigVector (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:299:21)
at Config.getConfig (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\config.js:342:29)
at processText (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\cli-engine.js:181:33)
at CLIEngine.executeOnText (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint\lib\cli-engine.js:690:40)
at lint (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-loader\index.js:278:17)
at Object.module.exports (C:\Users\q4rockz\Documents\GitHub\editor.js\example\tools\image\node_modules\eslint-loader\index.js:273:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @editorjs/[email protected] build:webpack --mode production
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @editorjs/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\q4rockz\AppData\Roaming\npm-cache_logs\2020-04-22T04_05_42_945Z-debug.log
I am trying to upload an image using the config.endpoints
function. The very first image I upload is correct, but rest other images following it are the same as the first one. Although, the back end is returning correct URL for the newly update image.
My configuration is as follows -
tools: {
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:3001/api/v1/file_upload'
},
field: 'file',
types: 'image/*',
}
}
I think it would be great if you just allow the calling a function passing the image data as parameter and then will use it to send to backend with custom configs (if the user wants to edit some config). That will make it more efficient for developers to use it...
Hi , how to show the image in dom without uploading to server like in tinymce , I want to upload the content and image at last so please let me know how to do that
Cannot read property 'config' of undefined
Uncaught TypeError: Cannot read property 'holder' of undefined
Uncaught TypeError: Cannot read property 'holder' of undefined
editor.js:22 Uncaught TypeError: Cannot read property 'config' of undefined
editor.js:12 Uncaught TypeError: Cannot read property 'holder' of undefined
this is my code
`<script>
$(document).ready(function () {
const ImageTool = window.ImageTool;
var editor = new EditorJS({
tools: {
header: {
class: Header,
inlineToolbar: true,
config: {
placeholder: 'Header'
},
},
list: {
class: List,
inlineToolbar: true,
},
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
}
}
}
},
holderId: 'edjs'
});
});
</script>`
this is my first time i use Editor Js it is perfect editor i always use TinyMCE but I love This Editor
by the way i downloaded
header and List
header and List Work but Image didn't work
how can i change the filename of the uploaded picture on the server before it get's saved?
i dont like this "upload_09340535023532.png" format.
Im working a couple off days now with the editor which works beautiful! But after some times a online content creator pointed out to me that is not possible to add alt tags to the image. Is this something which is on the roadmap?
If you want to pass the data from editor JS into the data:
value of the editor config, it ignores the stretched value. Im guessing that this is an issue with the render function of this module, rather than an issue with the main editor JS API
See CodePen: https://codepen.io/MrSimmons/pen/QWWYVvy
If you change the boolean of stretched in the data, you can see that the image doesn't resize in the editor. the image in the editor only resizes when you then toggle the stretched value off then on again in the editor.
When saving the blocks, the image block without a selected image doesn't provide an URL parameter under file. When an image is selected, it does. With the URL parameter the validator configuration for the image looks something like this:
{
"tools": {
"image": {
"caption": {
"type": "string"
},
"file": {
"type": "array",
"data": {
"url": "string"
}
},
"stretched": {
"type": "bool",
"canBeOnly": [false]
},
"withBackground": {
"type": "bool",
"canBeOnly": [false]
},
"withBorder": {
"type": "bool",
"canBeOnly": [false]
}
}
}
}
And this configuration works fine if an image is selected. The save data should look something like this:
{
"type": "image",
"data": {
"file": {
"url": "uploads/image14.png"
},
"caption": "This is the 14th image",
"withBorder": false,
"stretched": false,
"withBackground": false
}
}
Unfortunately, when an image isn't selected, the block returns the save data without url parameter, like this:
{
"type": "image",
"data": {
"file": {},
"caption": "",
"withBorder": false,
"stretched": false,
"withBackground": false
}
}
This causes the following error with my validator-configuration:
PHP Fatal error: Uncaught EditorJS\EditorJSException: Not found required param `url` in /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php:96
Stack trace:
#0 /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php(157): EditorJS\BlockHandler->validate(Array, Array)
#1 /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php(55): EditorJS\BlockHandler->validate(Array, Array)
#2 /path/tp/project/vendor/codex-team/editor.js/EditorJS/EditorJS.php(126): EditorJS\BlockHandler->validateBlock('image', Array)
#3 /path/tp/project/vendor/codex-team/editor.js/EditorJS/EditorJS.php(96): EditorJS\EditorJS->validateBlocks()
#4 /path/tp/project/editor/uploadArticleData.php(184): EditorJS\EditorJS->__construct('{"time":1581957...', '{\n"tools": {\n\t"...')
#5 {main}
thrown in /path/tp/project/vendor/codex-team/editor.js/EditorJS/BlockHandler.php on line 96
If I missed something and this is intended behavior, please tell me what I did wrong and how I can fix it. If not, please look into this. Both ways, I thank you for creating this plugin and that you took your time to read my issue.
Sincerely,
Alexander Horner
The icon for the image appears just fine but I get a warning that the image cannot be uploaded. Right now I'm testing on a dev environment and cannot connect to a live server to upload the image.
The problem still happens when I don't pass a config object. Is there a way to test with mock endpoints that will work?
This is my current config for that tool:
image: {
class: ImageTool,
config: {
endpoints: {
byFile: "http://localhost:3000/uploadFile",
byUrl: "http://localhost:3000/fetchUrl"
}
}
}
and this is the error I get in the console.
body: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /uploadFile</pre>\n</body>\n</html>\n"
code: 404
connection: "keep-alive"
"content-length": "150"
"content-security-policy": "default-src 'none'"
"content-type": "text/html; charset=utf-8"
date: "Thu, 27 Feb 2020 17:01:06 GMT"
vary: "Accept-Encoding"
"x-content-type-options": "nosniff"
"x-powered-by": "Express"
This can hinder adoption of the library.
Sorry is this is obvious, but I cannot wrap my head around making custom blocks. I have an existing file manager in a CMS I'm working on. Is there a callback I can use to insert a block with the image I pick from my file manager?
https://github.com/codex-team/ajax/blob/master/src/index.js#L453
Reproduce
Paste image by url
Then all upload request will go with content-type: application/json; charset=utf-8
Hi, this is my current configuration for the tool:
image: {
class: ImageTool,
config: {
endpoints: {
byFile: '/site_content/uploadFile.php',
byUrl: '/site_content/fetchUrl.php'
}
}
}
and my uploadFile.php returns:
{ "success": 1, "file": "https://mywebsite.com/static/uploads/image_name.png" }
The generated url is correct, when i paste it in the browser the image does show up
but still the preloader is turning and no image appears:
Why is this happening? Is there a secret step I missed?
Здравствуйте. :)
Добавьте, пожалуйста, возможность передачи дополнительных параметров при загрузке изображения.
Спасибо. :)
If a custom uploader with uploadByFile is used, the mime type specified with types
is not used, neither is image/*
. Instead, the default of the ajax libary */*
is used. Especially on mobile devices this is annoying since the general file picker instead of the image file picker is opened.
I'm trying to use this tool in Angular Dart but can't do it! Can anyone help me ?
It looks like blocktunes for this plugin are being treated as truthy when their values are set to the string "false".
It looks like this line is probably the culprit:
Line 278 in 70876fd
Sample data to reproduce:
const data = {
"time": "1566499088222",
"blocks": [
{
"type": "image",
"data": {
"file": {
"url": "/path/to/file"
},
"caption": "...",
"withBorder": "false", // these are treated as true by the plugin
"stretched": "false",
"withBackground": "false"
}
},
{
"type": "image",
"data": {
"file": {
"url": "/path/to/file/2"
},
"caption": "...",
"withBorder": false, // these are treated as false
"stretched": false,
"withBackground": false
}
},
{
"type": "image",
"data": {
"file": {
"url": "/path/to/file/3"
},
"caption": "...",
"withBorder": true, // these are treated as true and false correctly
"stretched": false,
"withBackground": false
}
},
],
"version": "2.15.0"
};
I've configured my app with the code from your README but when I try to add a new image block it simply brings me to the file explorer. Is this expected behavior and I'm getting something wrong, or is this a bug I should report in more detail?
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.