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

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

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
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明

推荐标签 标签

  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 398 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 605 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 614 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 589 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    4 引用 • 55 回帖 • 9 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 417 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 13 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • 安全

    安全永远都不是一个小问题。

    189 引用 • 813 回帖
  • IBM

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

    16 引用 • 53 回帖 • 123 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 23 关注
  • Ngui

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

    7 引用 • 9 回帖 • 345 关注
  • SSL

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

    69 引用 • 190 回帖 • 495 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 609 关注
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • Gitea

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

    4 引用 • 16 回帖 • 1 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 25 关注
  • Thymeleaf

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

    11 引用 • 19 回帖 • 319 关注
  • MyBatis

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

    170 引用 • 414 回帖 • 429 关注
  • TGIF

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

    284 引用 • 4481 回帖 • 653 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    169 引用 • 799 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    941 引用 • 1458 回帖 • 151 关注
  • 导航

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

    37 引用 • 168 回帖 • 1 关注
  • Elasticsearch

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

    116 引用 • 99 回帖 • 268 关注
  • Flutter

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

    39 引用 • 92 回帖 • 7 关注