Vditor 使用体验纪要

本贴最后更新于 1776 天前,其中的信息可能已经天翻地覆

故事背景

蛮早期就有关注到由黑客派所出品的 Vditor:一款为未来而构建的下一代 Markdown 编辑器。然,现而今市面上所存在的 Markdown 编辑器,或多或少都存在一些问题(或功能不全,或高级功能收费...),因此基于自身所需,加之 Vditor 的强大,就诞生了做一款在线 Markdown 编辑器的念头;取其名曰:Arya,个中原由,有在观《权利的游戏》感记一文有做记载。

最近因为频繁用到关于 Markdown,就断续利用一些业余时间,基于 VueVditor,将之前的想法给实践了下。这便是现在的 Arya - 在线 Markdown 编辑器;关于 Arya 的更多讯息,有在 https://hacpai.com/article/1558270349379 这一帖子中加以陈述;新开这篇帖子,在于记录一些关于 Vditor 使用的一些体验感受(陆续陆续记录 @Vanessa )。

  • 预览:这边想实现 About Arya 页面,翻越了 https://hacpai.com/article/1549638745630 ,并没有发现相关功能设定,就只好在页面渲染完毕后,将 Textarea 给隐藏来实现,代码见: markdown-online-editor;这相对会比较麻烦些,如果自带这个功能就更好了。
  • 编辑器左侧 md 语法高亮:有用户提到想要这个功能,个人觉得这个也是蛮有用,且会极大提升使用体验; @Vanessa 可以考虑注入这个功能么?(目前编辑区域基于 textarea 的话,不太好实现这个功能)。
  • 表格中代办事项:在有些场景下,表格中加入 代办事项 的功能,还是蛮有用的;目前看来是没有做解析,是不是可以考虑加上呢( @Vanessa ),如下语法示例:
| TODO | DOING | DONE |
| :---: | :---: | :---:  |
| - [ ] TODO | - [ ] DOING | - [x] DONE |
TODO DOING DONE
- [ ] TODO - [ ] DOING - [x] DONE
2 操作
jeffjade 在 2019-06-11 22:54:37 更新了该帖
jeffjade 在 2019-05-30 23:32:45 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 你看一下 https://hacpai.com/article/1549638745630#toc_h3_13 的静态方法,这样就不用去渲染编辑器了。

    • 使用 md2html 把 md 转换为 html
    • 使用 mathRender 转换数学公式
    • 使用 mermaidRender 转换图表
    • 使用 codeRender 为代码添加复制功能
    2 回复
  • jeffjade
    作者

    Wow,好的,我回去抽空体验下 👍👍👍。

  • jeffjade
    作者

    话说例如 md2html 这些静态方法,该如何使用呢?(查看了文档 & 粗略的看了下源码,并没有发现更多讯息来告知如何使用这个静态方法 😂 )。

    1 回复
  • 直接 Vditor.md2html('#hi')

    2 回复
  • jeffjade
    作者

    嗯,其实一上来,就有如此试过,但会报错:“vditor__WEBPACK_IMPORTED_MODULE_0___default.a.md2html is not a function”,所以~

    "vditor": "^1.3.5",

    我方才看了下,npm 上的版本已经到 1.4.4 了,我更新下看看(昨晚看 github releases 上的版本才 1.3.5)。

    1 回复
  • jeffjade
    作者

    嗯,果然是版本没跟上所致;更新到 1.4,4 可以了(建议可以在说明中,为属性 or 方法,加上对应的支持版本信息)。

    不过,会有如下一个报错;
    image.png
    可看了下源码, $toolTipBg 这个 css 变量是有定义的~

  • GitHub 上凑足几个 issue 才会 release 一个版本。$tooltipBg 这个改过大小写 trollface

    1 回复
  • jeffjade
    作者

    原来如此,了解了 👌 。$tooltipBg 这个变量,我这边使用时小做兼容下就好了。

  • jeffjade
    作者

    @Vanessa 受这个仓库的启发,markvis,Vditor 是不是也可以注入这些功能(暴露接口出来),使得用户可以在 markdown 中进行可视化呢。

    1 回复
  • 不错呀,vditor 现在还不支持 chart 呢。话说我可以不用查看其他的,直接使用你给的这个 markvis 么?

    1 回复
    2 操作
    Vanessa 在 2019-05-31 18:48:05 更新了该回帖
    Vanessa 在 2019-05-31 18:47:43 更新了该回帖
  • jeffjade 1
    作者

    我觉得这个,看起来还可以(当然,目前还没遇到过更多类似的封装)。

  • jeffjade
    作者

    编辑器左侧 md 语法高亮:有用户提到想要这个功能,个人觉得这个也是蛮有用,且会极大提升使用体验; @Vanessa 可以考虑注入这个功能么?(目前编辑区域基于 textarea 的话,不太好实现这个功能)。

    1 回复
  • 呃。这样的话可能要重新写了,多选什么的也就可以了。当初看了 GitHub 的 issue 也是个 textarea,然后就。。。。

    1 回复
  • jeffjade 1 评论
    作者

    嗯,那目前是如何计划的呢?❤️

    目前继续做小需求和细节完善。换 textarea 估计要下个月了
    Vanessa
  • DeskZq

    请问 Vditor 可以自定义 Markdown Css 样式么?

    1 回复
  • 88250

    实现 GFM 规范的 Markdown 解析器应该都不支持 表格中待办事项。因为表格虽然是块级元素但不是块容器,所以它不能容纳其他块级元素:

    Block-level elements cannot be inserted in a table

    具体规范细节可参考这里

    1 回复
  • markdown css 语法是什么?

  • jeffjade 1
    作者

    嗯嗯,如果费点气力的话,可以考虑用 Div 实现表格,应该就可以实现这个功能了。当然,这个功能并不是刚需,可以优先更加有意义的功能。

    1 操作
    jeffjade 在 2019-08-11 17:40:54 更新了该回帖
  • SXX19950910

    嘿嘿嘿

    1 回复
  • jeffjade
    作者

    ✋ 🤝 😋

  • huaxie2017 1 评论

    请问我调用 setValue('11')报错15737851791122.jpg

    你是紧接着 new 方法后调用么?如果是需要在 options.after 中进行调用
    Vanessa
  • huaxie2017

    是在编辑器初始化之后 其他操作需要给编辑器设置内容

  • huaxie2017

    大佬 我想请教下 编辑器编辑的文本保存后 怎么在页面上渲染出来呢

    1 回复
  • jeffjade
    作者

    指的是用 Vditor 么? “怎么在页面上渲染出来呢”,对于这句我可能没弄明白(Vditor 是可以直接渲染出来的)。

    1 回复
  • huaxie2017

    我的意思是编辑器提交的文本 需要在页面上输出 用的是 preview 在页面显示的内容

    1 回复
  • jeffjade
    作者

    意思是像这样个页面: https://markdown.lovejade.cn/about-arya ,只显示 Preview 内容,而不展示其他是么?

    如果是这样的话,我这边采取的办法是隐藏 Vditor 的 textarea,具体代码见:https://github.com/nicejade/markdown-online-editor/blob/15a3492a2ad19c0d902d47563a2611e2a5d8f55c/src/helper/utils.js#L93-L113

    1 回复
  • huaxie2017

    是的 保存的内容在页面渲染出来 已解决 谢谢大佬

    1 回复
  • jeffjade
    作者

    好的。 🤝 🤝

请输入回帖内容 ...
jeffjade
在职程序员,晚晴幽草轩轩主,倾城之链开发者 深圳

推荐标签 标签

  • gRpc
    10 引用 • 8 回帖 • 54 关注
  • 快应用

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

    15 引用 • 127 回帖
  • JetBrains

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

    18 引用 • 54 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Love2D

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

    14 引用 • 53 回帖 • 513 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 24 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • 七牛云

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

    25 引用 • 215 回帖 • 164 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    491 引用 • 1383 回帖 • 372 关注
  • CSS

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

    180 引用 • 447 回帖 • 2 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    57 引用 • 22 回帖 • 4 关注
  • Hprose

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

    9 引用 • 17 回帖 • 598 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 683 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    106 引用 • 152 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    164 引用 • 407 回帖 • 526 关注
  • Hibernate

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

    39 引用 • 103 回帖 • 684 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    19 引用 • 73 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 454 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 1 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 223 关注
  • NGINX

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

    311 引用 • 546 回帖 • 34 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 8 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Q&A

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

    6531 引用 • 29359 回帖 • 247 关注