Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

插入图片缩小了,如何做成链接点击放大? #870

Open
foxfire881 opened this issue Aug 13, 2024 · 6 comments
Open

插入图片缩小了,如何做成链接点击放大? #870

foxfire881 opened this issue Aug 13, 2024 · 6 comments

Comments

@foxfire881
Copy link

foxfire881 commented Aug 13, 2024

1、插入的图片默认是60%大小看不清楚,能否变成链接形式,点击之后新开窗口打开100%大小的图?如何实现?

2、能否给插入的图片、音频文件加上alt、title等属性,方便鼠标悬停时展示文件名等描述信息?

3、插入file现在渲染出来只是一个超链接,可以在前面加个附件图标方便和普通链接区分

@sunsonliu
Copy link
Collaborator

  1. 可以用超链接+图片语法组合:
    image
    如果不想默认60%宽度,则可以这么配置:
    image
  2. 图片的alt属性是可以自定义的,如下:
    image
    但视频的title属性还没有。。。
  3. 这个也可以通过超链接+图片语法组合来实现哈:
    image

@foxfire881
Copy link
Author

foxfire881 commented Aug 13, 2024

1、那个 {target=_blank} 必须要写吗?很丑陋耶~ 我的意思是能否通过在配置文件或者回调函数里面设置一下,让所有的图片都可以点击打开新页面展示全图?已经在配置中设置了所有的链接都target=_blank了,但是对图片无效。

link: {
              /** 生成的<a>标签追加target属性的默认值 空:在<a>标签里不会追加target属性, _blank:在<a>标签里追加target="_blank"属性 */
              target: "_blank",
              /** 生成的<a>标签追加rel属性的默认值 空:在<a>标签里不会追加rel属性, nofollow:在<a>标签里追加rel="nofollow:在"属性*/
              rel: "",
            },
            autoLink: {
              /** 生成的<a>标签追加target属性的默认值 空:在<a>标签里不会追加target属性, _blank:在<a>标签里追加target="_blank"属性 */
              target: "_blank",
              /** 生成的<a>标签追加rel属性的默认值 空:在<a>标签里不会追加rel属性, nofollow:在<a>标签里追加rel="nofollow:在"属性*/
              rel: "",
              /** 是否开启短链接 */
              enableShortLink: true,
              /** 短链接长度 */
              shortLinkLength: 20,
            }

2、图片的title属性有么?或者能通过回调函数啥的把title属性设置成文件名么?不然图片多了,哪个图对应哪个文件就不知道了,查漏补缺比较麻烦,对着html代码一个个数太累。实在不行只能addEventListener大法对click和window.onload事件进行魔改了。

@foxfire881
Copy link
Author

自己搞定了,写了两个函数,放在哪里好呢?config里有无合适callback的地方?

//替换图片为链接
    let images = Array.from(document.getElementById('content').getElementsByTagName('img'));
    images.forEach(function (img) {
      var link = document.createElement("a");
      link.href = img.src;
      link.target = "_blank"
      link.appendChild(img.cloneNode(true))
      img.parentNode.replaceChild(link, img);
    });


    //鼠标悬停显示链接地址
    document.getElementById('content').addEventListener('mouseover', function (event) {
      if (event.target.tagName === 'IMG') {
        event.target.setAttribute('title', event.target.src)
      } else if (event.target.tagName === 'A') {
        event.target.setAttribute('target', '_blank')
        event.target.setAttribute('title', event.target.href)
      }
    })

@sunsonliu
Copy link
Collaborator

那就用onClickPreview回调函数实现吧,可以参考这里,demo可以在这里体验(在这个demo里点击图片会全屏预览图片,见下图)
image

@foxfire881
Copy link
Author

那就用onClickPreview回调函数实现吧,可以参考这里,demo可以在这里体验(在这个demo里点击图片会全屏预览图片,见下图)

这个效果不错

@sunsonliu
Copy link
Collaborator

嗯嗯,这里的预览组件用的是这个:https://fengyuanchen.github.io/viewerjs/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants