登录 注册

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

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

  • Vditor

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

    345 引用 • 1784 回帖 • 3 关注
  • Q&A

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

    7736 引用 • 35226 回帖 • 185 关注
深圳 位置
20 悬赏
8 回帖
3
3
2
276 147 50 1 76

相关帖子

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

欢迎来到这里！

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

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

    ![](https://图片地址)

    <video controls>
  <source src="视频地址.mp4" type="video/mp4" />
</video>

    试试这个

    2 回复
  • qingyun1029 •
    作者

    还真可以，感谢大佬。

    //插入图片
let name = imgData.FileName;
let path = encodeURI(imgData.Path)

let insertText = `![${name}](${path})`; // Markdown 格式的图片插入文本
that.vditor.insertValue(insertText);

//插入视频
name = videoData.FileName;
path = encodeURI(videoData.Path)

insertText = `<video controls>
                <source src="${path}" type="video/mp4" />
              </video>`; // Markdown 格式的图片插入文本
that.vditor.insertValue(insertText);
  • qingyun1029 •
    作者

    请问该如何居中对齐呢？或者视频大小如何设置呢？

    1 回复
  • wilsons •
    付费者 捐赠者

    居中最简单的方式就是加 <center> 标签，比如 <center><video>...</video></center>

    大小可以使用样式，比如 <video style="width:500px;height:400px;">...</video>

    1 回复
  • qzx •

    但是初始化又不居中了

    1 回复
  • wilsons • • 1 赞同
    付费者 捐赠者

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

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

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

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

    1 回复
  • qzx •

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

  • 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

近期热议

推荐标签 标签

  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 51 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 617 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 35 关注
  • H2

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

    11 引用 • 54 回帖 • 654 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    12 引用 • 101 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    5 引用 • 26 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 346 关注
  • 招聘

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

    190 引用 • 1057 回帖
  • 分享

    有什么新发现就分享给大家吧！

    246 引用 • 1788 回帖 • 4 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 624 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 457 关注
  • 倾城之链
    23 引用 • 66 回帖 • 137 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • 负能量

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

    88 引用 • 1235 回帖 • 419 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 707 关注
  • Google

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

    49 引用 • 192 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 65 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 376 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    727 引用 • 1322 回帖 • 21 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    38 引用 • 207 回帖 • 1 关注
  • HBase

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

    17 引用 • 6 回帖 • 66 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    26 引用 • 222 回帖 • 160 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 391 关注

最新标签