Vditor v1.5.12 发布,图表支持及性能改进

本贴最后更新于 1992 天前,其中的信息可能已经事过境迁

v1.5.12 简介

该版本主要对长篇幅的文本粘贴和渲染做了改进;使用 echarts 对图表进行了支持,具体写法可参见 帮助,展示如下:

{"backgroundColor":"#2c343c","title":{"text":"Customized Pie","left":"center","top":20,"textStyle":{"color":"#ccc"}},"tooltip":{"trigger":"item","formatter":"{a} <br/>{b} : {c} ({d}%)"},"visualMap":{"show":false,"min":80,"max":600,"inRange":{"colorLightness":[0,1]}},"series":[{"name":"访问来源","type":"pie","radius":"55%","center":["50%","50%"],"data":[{"value":235,"name":"视频广告"},{"value":274,"name":"联盟广告"},{"value":310,"name":"邮件营销"},{"value":335,"name":"直接访问"},{"value":400,"name":"搜索引擎"}],"roseType":"radius","label":{"normal":{"textStyle":{"color":"rgba(255, 255, 255, 0.3)"}}},"labelLine":{"normal":{"lineStyle":{"color":"rgba(255, 255, 255, 0.3)"},"smooth":0.2,"length":10,"length2":20}},"itemStyle":{"normal":{"color":"#c23531","shadowBlur":200,"shadowColor":"rgba(0, 0, 0, 0.5)"}},"animationType":"scale","animationEasing":"elasticOut"}]}

v1.5.12 变更记录

  • 73 iframe 添加 max-width enhancement
  • 72 当编辑器父元素为 position: fix 时 hit 计算错误 bug
  • 71 new 之前应保证该 id 元素在 html 中已经渲染 question
  • 70 建议删除 CDN 和代码中的 Dynamic Import invalid
  • 69 Assets 文件夹介绍 question
  • 67 长文本粘贴性能改进 enhancement
  • 66 上传按钮问题 bug
  • 65 options.upload.linkToImgUrl 配置错误提示 enhancement
  • 64 表情太多需要滚动条 enhancement
  • 63 粘贴时 html2md 和 md2html 保持一致 bug
  • 62 升级 highlight.js 到 9.15.8 development
  • 58 添加图表支持 feature

历史版本变更请浏览这里

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • jeffjade 1

    👍 🎉 👏

  • jeffjade

    中午的时候,有将 Vditor 的版本升级至 1.5.12;按照 https://hacpai.com/guide/markdown 的示例写法,发现渲染出来有报如下错误:

    echarts render error:  
    SyntaxError: Unexpected token b in JSON at position 4
    

    特意确认了下,所拷贝的 JSON 是 OK 的,请问是我的使用姿势哪里有问题么?


    等等,应该是我这边的问题,使用时是做了一个配置,而图表 string 其中部分应该是有些需要转义(直接考虑到输入框是 👌 的)。

    1 回复
  • 需要使用严格的 JSON 格式。可以使用 JSON.stringify(data) 把对象传换一下已得标准数据

    1 回复
  • jeffjade 1 评论

    是的,刚才这边也排查了下发现用的不是标准 JSON 格式导致的。话说这个点儿了,还没休息么?

    没上班,作息时间就不太标准了。。。
    Vanessa
  • jeffjade

    昨个儿,有将 Vditor 更新至 1.5.12,使得现在的版本支持 echarts 图表 📈,整体的体验蛮不错的 👍。


    不过倒有一点没弄明白的是,当为 饼图 设置颜色(饼),目测不能够生效;有所查看,并未得到结果。略感奇怪 🤔( https://markdown.lovejade.cn/ );
    image.png

    1 回复
  • 他好像是按照比率来进行颜色深浅来渲染的。你里面有几个数字太大了,改成三位数好像就可以了。

    1 回复
  • jeffjade

    嗯嗯,感谢 ❤️ 。修改了下,确实可以引起它的变化(试了几次,发现那组数字倍数相差一大,就不能按照预期渲染。使用官方的例子(都是三位数)可以正常显示)。

    image.png

  • 你好,是否可以不集成 echarts?

    1 回复
  • 可以问一下不想集成的原因么?

    echarts 是动态加载的,你不写相关的语法就可以当作没有集成 trollface

    1 回复
  • 好哒,厉害 👍

    因为用不到所以不太想集成,echarts 怪大的

  • image.png 感觉目前这个大小还好,也可以直接用 https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.min.js , 现在这个社区就是直接用的这个。

    1 回复
  • 那好的,这个大小确实完全可以接受的,多谢指教

请输入回帖内容 ...
Vanessa MOD
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明

推荐标签 标签

  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 1 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖
  • Love2D

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

    14 引用 • 53 回帖 • 537 关注
  • Tomcat

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

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

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 401 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 419 关注
  • danl
    146 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    409 引用 • 1246 回帖 • 587 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 319 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 559 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    196 引用 • 540 回帖 • 1 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 387 关注
  • 面试

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

    325 引用 • 1395 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 5 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 391 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 73 关注
  • 导航

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

    42 引用 • 175 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • OnlyOffice
    4 引用 • 3 关注