登录 注册

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

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

  • Vditor

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

    354 引用 • 1823 回帖 • 1 关注
  • Q&A

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

    8442 引用 • 38438 回帖 • 154 关注
深圳 位置
20 悬赏
8 回帖
3
3
2
423 198 107 2 1 113

相关帖子

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

近期热议

推荐标签 标签

  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 141 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 17 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 393 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 2 关注
  • 创造

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

    178 引用 • 997 回帖
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 210 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    132 引用 • 795 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    946 引用 • 943 回帖
  • Google

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

    49 引用 • 192 回帖
  • SOHO

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

    7 引用 • 55 回帖 • 7 关注
  • 招聘

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

    190 引用 • 1057 回帖
  • gRpc
    11 引用 • 9 回帖 • 69 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    126 引用 • 169 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3190 引用 • 8214 回帖 • 1 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    574 引用 • 3533 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 5 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 6 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 8 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 748 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 76 关注
  • 黑曜石

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

    A second brain, for you, forever.

    16 引用 • 130 回帖

最新标签