Can you add a href link around an image file?

[ald183s]

I am wondering if EditorJs has the functionality to add a href link around an image file in Editor.js? I am able to select an image but I like to be able to add an external link to that image file so it renders in data blocks. I want to be able to save this as a JSON file.

Right now it only outputs the image file like below. I want add a link to this output. It doesn't seem to have a place to add a link to an image

https://cdn.jsdelivr.net/npm/@editorjs/image@latest

Basically I like to prompt an alert box with an input field to enter the external url and attach it to that image after the image file is selected. This should be inserted into the JSON output as well.

{ "id" : "nyCVy7Sf9U", "type" : "image", "data" : { "file" : { "url" : "example.jpg" }, "caption" : "", "withBorder" : false, "stretched" : false, "withBackground" : false } },

[megasteve19]

I'm not quite sure but you can try custom actions for block: https://github.com/editor-js/image#tools-settings

[ald183s]

Thank you but i tried this part already. I am able to add a button in the toolbox to prompt a text input with actions but not sure on how to insert that input field value into the image type JSON output.

{ "type" : "image", "data" : { "file": { "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg" }, "caption" : "Roadster // tesla.com", "withBorder" : false, "withBackground" : false, "stretched" : true } }

I don't see anywhere in the documentation that this is even possible. Even if its in there this script https://cdn.jsdelivr.net/npm/@editorjs/image@latest needs to be customized for it to retrieve that value. It is possible to add links on text but not on images. I wonder why.

[azterizm]

I have found a way. This is surely not beautiful solution but more like a hack. This does get the job done. It was important for me for SEO purposes. We could write the plugin from scratch but it was difficult for me.

Note that you will need a server with database to execute this solution.

Create an action that gets block index and sets it as index.

  const selectedLinkImageBlock = useHookstate({
    selectedBlockIndex: null as null | number,
    input: '',
    openInNewTab: false,
  })
...
        image: {
          class: Image,
          config: {
            endpoints: {
              byFile: `${API_ENDPOINT}/blog/upload_image/${user?.id}`,
              byUrl: `${API_ENDPOINT}/blog/fetch_url/${user?.id}`,
            },
            actions: [
              {
                name: 'insert_link',
                icon:
                  '<svg style="width:14px;height:14px;" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#000000" viewBox="0 0 256 256"><path d="M136.37,187.53a12,12,0,0,1,0,17l-5.94,5.94a60,60,0,0,1-84.88-84.88l24.12-24.11A60,60,0,0,1,152,99,12,12,0,1,1,136,117a36,36,0,0,0-49.37,1.47L62.53,142.55a36,36,0,0,0,50.92,50.92l5.94-5.94A12,12,0,0,1,136.37,187.53Zm74.08-142a60.09,60.09,0,0,0-84.88,0l-5.94,5.94a12,12,0,0,0,17,17l5.94-5.94a36,36,0,0,1,50.92,50.92l-24.11,24.12A36,36,0,0,1,120,139,12,12,0,1,0,104,157a60,60,0,0,0,82.3-2.43l24.12-24.11A60.09,60.09,0,0,0,210.45,45.55Z"></path></svg>',
                title: 'Insert link',
                toggle: false,
                action: () => (selectedLinkImageBlock.selectedBlockIndex.set(
                  editor.blocks.getCurrentBlockIndex(),
                ),
                  fade.show()),
              },
            ],
          },
        },

Show a modal based on the selected block index.

      {selectedLinkImageBlock.selectedBlockIndex.value !== null
        ? (
          <div className='fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-600 text-white p-8 rounded-lg z-101'>
            <h2>Insert link to image</h2>
            <p>Add your link below</p>
            <input
              placeholder='https://...'
              className='text-lg p-2 rounded-lg'
              type='text'
              value={selectedLinkImageBlock.input.value}
              onChange={(e) => selectedLinkImageBlock.input.set(e.target.value)}
            />
            <label
              htmlFor='open_in_newtab'
              className='flex items-center gap-2 mt-2'
            >
              <input
                type='checkbox'
                name='open_in_newtab'
                id='open_in_newtab'
                onChange={(e) =>
                  selectedLinkImageBlock.openInNewTab.set(e.target.checked)}
              />
              <span>Open in new tab</span>
            </label>
            <div className='flex items-center gap-2 mt-8 justify-end'>
              <button
                onClick={() => (selectedLinkImageBlock.set({
                  input: '',
                  selectedBlockIndex: null,
                  openInNewTab: false,
                }),
                  fade.hide())}
                className='text-white bg-transparent'
              >
                Cancel
              </button>
              <button className='bg-gray-800' onClick={onAddLinkToImage}>
                Submit
              </button>
            </div>
          </div>
        )
        : null}

When information is taken from modal, submit like this. This will get the block element from DOM and wrap it with anchor tag.

  const imagesSrcWithLinks = useHookstate<IPost['imagesSrcWithLinks']>(
    [],
  )
...
  function addLinkToEditorImage(
    input: {
      blockIndex?: number
      imageSrc?: string
    },
    href: string,
    openInNewTab?: boolean,
  ) {
    let imageEl: HTMLImageElement | null = null

    if (
      typeof input.blockIndex !== 'undefined'
    ) {
      const blocksEl = document.querySelectorAll('.ce-block')
      const selectedBlockEl = blocksEl[input.blockIndex] as HTMLDivElement
      imageEl = selectedBlockEl?.querySelector('img')
    } else if (input.imageSrc) {
      imageEl = document.querySelector(`img[src="${input.imageSrc}"]`)
    }

    if (!imageEl) return

    const anchor = document.createElement('a')
    anchor.href = href
    if (openInNewTab) anchor.target = '_blank'
    else anchor.target = '_self'
    const clonedImageEl = imageEl.cloneNode() as HTMLImageElement
    anchor.appendChild(clonedImageEl)
    imageEl.replaceWith(anchor)
    imagesSrcWithLinks.set((e) =>
      _.uniqBy([...e, {
        link: href,
        imageSrc: clonedImageEl.src,
        openInNewtab: openInNewTab,
      }], 'imageSrc')
    )
  }

Submit your article with imagesSrcWithLinks state to your server database.

    form.append(
      'document',
      JSON.stringify({
        ...,
        imagesSrcWithLinks: imagesSrcWithLinks.value,
      }),
    )

    const { data } = await axios.post(`${API_ENDPOINT}/blog/create`, form, {
      withCredentials: true,
    })

When editing such blog post or reading, use onReady callback with images with link data from your server API. Use same function to modify DOM and wrap it with anchor tag.

      onReady: () => {
        postData?.imagesSrcWithLinks.forEach((item) => {
          addLinkToEditorImage(
            { imageSrc: item.imageSrc },
            item.link,
            item.openInNewtab,
          )
        })
      },

Here you have it. Images with link.