Image tool does not work #13

Awilum · 2019-06-05T13:17:13Z

Included

And

   tools: {
     image: {
       class: SimpleImage,
       inlineToolbar: ['link'],
     },

but I can't insert images, tool is not displaying.

The text was updated successfully, but these errors were encountered:

mylastore · 2019-07-27T03:45:53Z

same here image tool is not displaying this the error I get

Module Tools was skipped because of TypeError: Cannot read property 'prepare' of undefined

` ``
image: {
class: SimpleImage,
inlineToolbar: true
}

neSpecc · 2019-10-03T06:04:29Z

Can't reproduce. Is it still happen?

avdkishore · 2019-11-02T15:23:23Z

Can't reproduce. Is it still happen?

Yes, it is still happening. Unable to get the image tool option to work.

jimjones26 · 2019-11-11T21:06:51Z

I am unable to get it to work either. I define it in the tool list, everything runs fine and no errors are produced in the console, but the image tool icon does not show up in the toolbar.

neSpecc · 2019-11-11T21:09:25Z

@jimjones26 this tool does not have a Toolbar Icon. See Image Tool if you need file uploading.

jimjones26 · 2019-11-11T22:00:12Z

I have the following in the tools section of the config:
image: { class: SimpleImage, inlineToolbar: true },
But I see nothing on the UI. I also tried this:
image: { class: SimpleImage, inlineToolbar: ["link"] },
And again no indication anywhere in the ui of how to add an image.

To be clear I do have other plugins working fine, the SimpleImage plugin is the only one I cannot get working.

Using:
"@editorjs/editorjs": "^2.15.1", "@editorjs/simple-image": "^1.3.3",

jimjones26 · 2019-11-13T04:11:08Z

I'm at a loss guys, I'm not sure how to get the Simple Image plugin to work.

hong-duc · 2019-11-22T08:20:51Z

Ah I get it, all I need is to paste a image link to the editor then it will appear.
example: https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg 🤦‍♂️

The readme don't say anything about it, and I have to watch the gift very closely to understand the magic 🤣

Also if the link contain param https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500 will not work

jimjones26 · 2019-11-25T19:08:54Z

@hong-duc Thanks! I feel like an idiot! Pasting an image in works perfectly!

I think maybe this issue is a non issue with functionality, but maybe the docs could be updated to indicate a url must be pasted in first?

edmundmunday · 2020-05-28T10:33:50Z

@jimjones26 - don't feel like an idiot, this behavior is incredibly unintuitive. Had exactly the same problem until I found this thread.

chrish2 · 2020-06-20T04:38:40Z

Still haven't figured out? The SimpleImage tool does not display !

c0b41 · 2020-06-20T09:29:09Z

@Codth read the comment #13 (comment)

SohaibShafiq1 · 2021-01-06T16:36:07Z

https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg

can you please paste you code here. I still not able to see the option in toolbar

Siddharth2207 · 2021-02-09T15:57:06Z

Ah I get it, all I need is to paste a image link to the editor then it will appear.
example: https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg

The readme don't say anything about it, and I have to watch the gift very closely to understand the magic

Also if the link contain param https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500 will not work

Thank you

Ashik590 · 2021-09-02T07:34:03Z

Is it a good idea pasting link of img?

edricgalentino · 2022-04-21T09:08:55Z

But now, the new issue was the image url is using base64 url so it take so many memory and also makes my program get slower. It took quite long to see the image or even open the program. Any idea?

kumawat30rahul · 2023-07-18T12:42:14Z

my image upload or directly pasting to the editor is also not working,:

import Embed from "@editorjs/embed";
import Table from "@editorjs/table";
import Paragraph from "@editorjs/paragraph";
import List from "@editorjs/list";
import Warning from "@editorjs/warning";
import Code from "@editorjs/code";
import LinkTool from "@editorjs/link";
import Image from "@editorjs/image";
import Raw from "@editorjs/raw";
import Header from "@editorjs/header";
import Quote from "@editorjs/quote";
import Marker from "@editorjs/marker";
import CheckList from "@editorjs/checklist";
import Delimiter from "@editorjs/delimiter";
import InlineCode from "@editorjs/inline-code";
import SimpleImage from "@editorjs/simple-image";
import VideoTool from "simple-video-editorjs";

export const EDITOR_JS_TOOLS = {
// NOTE: Paragraph is default tool. Declare only when you want to change paragraph option.
// paragraph: Paragraph,
header: Header,
table: Table,
list: List,
warning: Warning,
code: Code,
linkTool: LinkTool,
embed: {
class: Embed,
config: {
services: {
// Specify supported embed services (e.g., YouTube, Twitter, etc.)
youtube: true,
twitter: true,
// Add more services as needed
},
},
},
image: Image,
raw: Raw,
quote: Quote,
marker: Marker,
checklist: CheckList,
delimiter: Delimiter,
inlineCode: InlineCode,
simpleImage: SimpleImage,
};

this the error i am getting:
{body: '\n\n\n<meta char…cess/task_queues.js:82:21)\n\n\n', code: 404, headers: {…}}
body
:
"\n<html lang="en">\n\n<meta charset="utf-8">\n<title>Error</title>\n\n\n

NotFoundError: Not Found
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\server\/app.js:48:8
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:646:15
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:265:14)
    at Function.handle (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:175:3)
    at router (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:47:12)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at middleware (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\webpack-hot-middleware\middleware.js:38:48)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\server\/app.js:24:3
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at cookieParser (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\cookie-parser\index.js:71:5)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at urlencodedParser (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\body-parser\lib\types\urlencoded.js:82:7)
    at Layer.handle [as handle_request] (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:346:12)
    at next (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\express\lib\router\index.js:280:10)
    at C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\body-parser\lib\read.js:137:5
    at AsyncResource.runInAsyncScope (async_hooks.js:197:9)
    at invokeCallback (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\raw-body\index.js:231:16)
    at done (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\raw-body\index.js:220:7)
    at IncomingMessage.onEnd (C:\Users\Aaqib\Documents\GitHub\pallet_backoffice_ui\node_modules\raw-body\index.js:280:7)
    at IncomingMessage.emit (events.js:387:35)
    at endReadableNT (internal/streams/readable.js:1317:12)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)

\n\n\n"
code
:
404
headers
:
access-control-allow-headers
:
"Origin, X-Requested-With, Content-Type, Accept"
access-control-allow-origin
:
"http://localhost:3001"
connection
:
"keep-alive"
content-length
:
"6161"
content-security-policy
:
"default-src 'none'"
content-type
:
"text/html; charset=utf-8"
date
:
"Tue, 18 Jul 2023 12:38:10 GMT"
keep-alive
:
"timeout=5"
x-content-type-options
:
"nosniff"
x-powered-by
:
"Express"
[[Prototype]]
:
Object
[[Prototype]]
:
Object

can anybody solve this.

Laktus · 2024-04-26T16:44:20Z

For some reason i get a 500 when i try to upload, care to explain why?

neSpecc mentioned this issue Jul 26, 2020

Is this example still valid #26

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image tool does not work #13

Image tool does not work #13

Awilum commented Jun 5, 2019 •

edited

mylastore commented Jul 27, 2019 •

edited

neSpecc commented Oct 3, 2019

avdkishore commented Nov 2, 2019 •

edited

jimjones26 commented Nov 11, 2019

neSpecc commented Nov 11, 2019

jimjones26 commented Nov 11, 2019 •

edited

jimjones26 commented Nov 13, 2019

hong-duc commented Nov 22, 2019 •

edited

jimjones26 commented Nov 25, 2019 •

edited

edmundmunday commented May 28, 2020 •

edited

chrish2 commented Jun 20, 2020

c0b41 commented Jun 20, 2020

SohaibShafiq1 commented Jan 6, 2021

Siddharth2207 commented Feb 9, 2021

Ashik590 commented Sep 2, 2021

edricgalentino commented Apr 21, 2022

kumawat30rahul commented Jul 18, 2023 •

edited

Laktus commented Apr 26, 2024

Image tool does not work #13

Image tool does not work #13

Comments

Awilum commented Jun 5, 2019 • edited

mylastore commented Jul 27, 2019 • edited

neSpecc commented Oct 3, 2019

avdkishore commented Nov 2, 2019 • edited

jimjones26 commented Nov 11, 2019

neSpecc commented Nov 11, 2019

jimjones26 commented Nov 11, 2019 • edited

jimjones26 commented Nov 13, 2019

hong-duc commented Nov 22, 2019 • edited

jimjones26 commented Nov 25, 2019 • edited

edmundmunday commented May 28, 2020 • edited

chrish2 commented Jun 20, 2020

c0b41 commented Jun 20, 2020

SohaibShafiq1 commented Jan 6, 2021

Siddharth2207 commented Feb 9, 2021

Ashik590 commented Sep 2, 2021

edricgalentino commented Apr 21, 2022

kumawat30rahul commented Jul 18, 2023 • edited

Laktus commented Apr 26, 2024

Awilum commented Jun 5, 2019 •

edited

mylastore commented Jul 27, 2019 •

edited

avdkishore commented Nov 2, 2019 •

edited

jimjones26 commented Nov 11, 2019 •

edited

hong-duc commented Nov 22, 2019 •

edited

jimjones26 commented Nov 25, 2019 •

edited

edmundmunday commented May 28, 2020 •

edited

kumawat30rahul commented Jul 18, 2023 •

edited