登录 注册

Vditor 编辑器中如何插入图片、视频地址？

做了一个自定义上传图片、视频的功能，上传完成后，后台接口返回一个连接地址，请问如何把这种网络图片、视频插入到编辑器中？谢谢！

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    351 引用 • 1811 回帖 • 2 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8074 引用 • 36880 回帖 • 162 关注
深圳 位置
20 悬赏
8 回帖
3
3
2
352 180 75 1 1 93

相关帖子

8 回帖
Vditor 编辑器中如何插入图片、视频地址？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons • • 1 赞同
    付费者 捐赠者

    应该和这条代码无关，你初始化时把代码加入了吗？或者是否受到其他样式影响。

    你的问题必须精确到具体的问题点别人才好回复。

    这好比，有人问，女朋友为什么不理我了，别人很难回答到点子上，不过是盲猜而已。

    如果，把最近和女朋友发生的一些事具体描述下呢，就不一样了，可能有高手一眼能看出问题出在哪里。

    1 回复
  • 其他回帖
  • qzx •

    你得把这些内容存起来吧，现在这个插件只能以 html,或者 md 存，但是假如你以 html 存，center 标签确实存进去了,但是渲染的时候，使用 md = this.contentEditor.html2md(data); 这个已经把 center 去掉了，生成纯 md 格式的，你根本不知道在哪一个位置加上 center 标签，所以根本不行。如果你使用 html 渲染，但是，这样编辑体验太差了

  • qzx •

    但是初始化又不居中了

    1 回复
  • qingyun1029 • • 2 评论
    作者

    组件无法正常加载（显示）或者无法及时加载的问题，使用浏览器无痕模式，打开使用了 vditor 组件的页面，发现输入框大概需要 3-5s 才能正常显示，于是 f12 查看了一下请求，发现 vditor 请求地址包含了“unpkg.com”的好几个相关请求，并且有些差不多 2s 了，请问下，如何把这些包放到本地？

    33333.png

    已经搞定了，参考；https://cloud.tencent.com/developer/article/2393844
    qingyun1029 •
    vue2.6，实例化的时候，配置 cdn 为空，然后把 node_modules/vditor/dist 整个文件夹赋值到 public 文件夹下面
    qingyun1029 •
  • 查看全部回帖
qingyun1029
深圳
回帖
9
 帖子
2
 积分
422

近期热议

推荐标签 标签

  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 5 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 20 关注
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 26 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 653 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    153 引用 • 3783 回帖
  • 招聘

    哪里都缺人，哪里都不缺人。

    190 引用 • 1057 回帖 • 5 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 334 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 8 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖 • 5 关注
  • 导航

    各种网址链接、内容导航。

    39 引用 • 170 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 41 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • 创业

    你比 99% 的人都优秀么？

    84 引用 • 1399 回帖
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    179 引用 • 995 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    287 引用 • 4484 回帖 • 668 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 74 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 166 关注
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 528 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 209 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 414 关注

最新标签