Arya - 在线 Markdown 编辑器

本贴最后更新于 378 天前,其中的信息可能已经物是人非

Arya 在线 Markdown 编辑器

Arya,是一款基于 VueVditor,所构建的在线 Markdown 编辑器,轻量且强大:内置粘贴 HTML 自动转换为 Markdown,支持流程图、甘特图、时序图、任务列表,可导出携带样式的图片、PDF、以及转换 Markdown 成微信公众号特制的 HTML 等;另外支持实时预览本地存储、字符计数,提供常用快捷键(Tab),及代码块添加复制等功能。

aryamarkdown.png

Arya 另一大优点在于:编辑内容只会在您本地进行保存,不会上传您的数据至服务器,绝不窥测用户个人隐私,可放心使用;GitHub 源码:markdown-online-editor,部分功能仍在开发 🚧,敬请期待。

背景初衷 📝

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

功能支持 🎉

关于定位 📌

众所周知,早在几年前,市面上就充盈百余种不同的 Markdown 编辑器;其中不乏很多功能强大,体验良好的 Markdown 神器;在 倾城之链 | Markdown 标签中,也是收录了些 Markdown 相关工具。但,就如在 初衷 中提及的,那些工具或多或少都存在一些问题比如:功能不全,使用不便,体验不佳,或高级功能收费等;对于 Arya,无意让她在 Markdown 的江湖逐鹿中原,目前给其设定就是:轻盈且强大免费又安全。关于 Arya 能做的,可参见 Arya Markdown 功能支持;当然,那并不是 Arya 最终形态,如果您有更多关于 Markdown 相关的诉求或建议,欢迎 👏提给我(可以通过各种渠道),这边会尽最大努力满足您。

https://quickapp.lovejade.cn/arya-markdown-online-editor/

于 2019 年 5 月 19 号,深圳。福田。

33 回帖
请输入回帖内容...
  • Vanessa

    我想给 Vditor 加几个简单的 VIM 或者 IDEA 的快捷键功能:删除行、复制行、跳转到行/单词/整个文本头尾之类的。

    1 回复
  • jeffjade

    Wow,这个功能很棒耶,回去体验下。

    这几天自己用的时候,发现“选中 ☑️整个文档中相同的字符串”,不是很方便,还想着要加下(就是一般编辑器中 Ctrl D 功能),如果 Vditor 中能够内置,就更棒啦 ❤️ 。

    1 回复
  • Vanessa

    呃,只是随便想象,还没写呢。

    选中相同字符串怕是有点难,我这个只是个 textarea,臣妾怕是做不到呀。

    1 回复
  • jeffjade

    嗯,如果是基于 textarea 的话,不太可能实现这个;

    但,是不是可以用 div (contenteditable) 来实现编辑区来做这个呢?可以借鉴下在线编辑器:codesandbox;它是支持这个功能的。有了这个功能,编辑(尤其是修改)就更加方便了。

    image.png

    1 回复
  • Vanessa

    嗯。有空了要好好改造下

    1 回复
  • jeffjade

    感谢,辛苦。期待。❤️

  • jeffjade

    已经将 Vditor 更新至 1.5.12,使得现在的版本支持 echarts 图表 📈,欢迎各路朋友体验:Arya - 在线 Markdown 编辑器

  • jeffjade

    近期有加最新功能,欢迎品评:
    ✨ 注入 RevealJs,增设对 PPT 预览支持。

    1 回复
  • Vanessa

    怎么分页呢?

    1 回复
  • jeffjade

    --- 水平方向分页;
    -- 在垂直方向分页。

    1 回复
  • Vanessa

    这个 Markdown 好像会识别为 h2

    1 回复
  • jeffjade

    目测大部分解释都会识别为 h2, 所以在 --- 上一行 or 下一行,需要是空白行才行(vditor 好像也是如此)。

  • yixiangblog 2 评论

    滚动位置差不多,但编辑区和预览的位置对不上,这算不算 bug?

    arya.png

    这个目前还没想到什么好的算法,现在是粗暴的按照百分比来的。
    Vanessa
    88250
  • jeffjade

    @Vanessa 在使用 vditor 时候会有两个困惑;

    1. 我复制 VsCode 代码至 vditor 编辑器,感觉每行代码间被增加了一个空白行;如下图:

    image.png

    image.png

    这是什么缘由所致呢?是这边打开方式有问题么?

    1. 另一个问题就是 Ctrl Z 撤销,编辑区域记录的撤销,目测与我操作,似不能完全匹配。
    1 回复
  • Vanessa

    修改成 div 的时候产生了不少 bug,你换成 1.7.14 看一下 https://github.com/b3log/vditor/blob/master/CHANGELOG.md

    2 回复
  • jeffjade

    可以,我中午回去更新下试试。现在用的版本是 1.7.9

  • jeffjade

    中午有将 vditor 升级至 1.7.15,这两个问题看起来还是存在的。

    2 回复
  • Vanessa

    社区也是这样么?
    麻烦 F12 输入以下,然后复制 IDE 里面的代码块,然后点击页面任意位置 ctrl+v,把输出的 string 发我看看。

    document.addEventListener("paste", async(event)=>{
        const textHTML = event.clipboardData.getData("text/html");
        const textPlain = event.clipboardData.getData("text/plain");
        console.log(textHTML);
        console.log(textPlain)
    })
    

    代码块专门处理了一下,应该生成 ``` 包裹着才对

     // process copy from IDE
        const tempElement = document.createElement("div");
        tempElement.innerHTML = textHTML;
        const pres = tempElement.querySelectorAll("pre");
        if (pres.length === 1 && pres[0].className !== "vditor-textarea" && !pres[0].nextElementSibling
            && ((pres[0].previousElementSibling && pres[0].previousElementSibling.tagName === "META")
                || !pres[0].previousElementSibling)) {
            return "```\n" + (textPlain || textHTML) + "\n```";
        } else {
            return markdownStr;
        }
    
  • Vanessa

    我用 IDEA 在你编辑器上是正常的,虽然有个小错误

    image.png

  • Vanessa

    不用麻烦了,我的 Visual Studio Code 也可以重现,谢谢。
    这是个 bug,请关注 https://github.com/b3log/vditor/issues/104

    1 回复
    2 操作
    Vanessa 在 2019-08-23 16:33:29 更新了该回帖
    Vanessa 在 2019-08-23 16:33:08 更新了该回帖
  • jeffjade

    好的,辛苦了 ❤️ 。

  • gaoyoubo

    大神,你有使用过 Nuxt.js 吗? 我在 Nuxt.js 中使用 Vditor 一直报错。

    1 回复
  • jeffjade 2 评论

    请问报的错具体信息是?

    因为是服务端渲染说 window undefined
    gaoyoubo
    @gaoyoubo 嗯嗯,因为 window 是浏览器特有的,在服务端渲染报这个错误是正常的。如果你想从首屏渲染 & SEO 考量,可以使用其他的方式,如借助 nginx,后者预渲染等。
    jeffjade
  • zonghua

    😂 高产似母猪

    1 回复
  • jeffjade

    如果能把游戏 & 看视频的习惯给戒了,那trollface ~ 欢迎体验下最新的 arya 系工具:arya-jarvis

  • 88250

    是时候更新同步一波 Vditor 了 trollface 我已在 Arya 项目 issues 上反馈了一些可同步的点。特别是即时渲染编辑模式(类似 Typora)可以考虑作为 Arya 默认的编辑模式。

    2 回复
  • jeffjade 1 评论

    @88250 @Vanessa

    嗯,原本的版本都好着。最近一直在尝试更新,但用新的版本( 3.1.* ),会有些问题呢(可能是这边打开姿势存在问题),比如这个:

    TypeError: Cannot create property 'id' on boolean 'true'

    image.png

    或者是,开发环境没有问题,但正式环境的包,渲染会紊乱掉。一时间还没解决。

    这个的话,开发也应该有问题才对
    Vanessa
  • jeffjade 1 评论

    image.png

    app.37872592.js:formatted:12816 TypeError: Cannot create property 'id' on boolean 'true'

    喔,如上报错,原来是 cache 配置错误导致的(先前没细看文档,原来这里修改了)。

    image.png

    哦,这个是 3.0.x 里面修改的。
    Vanessa
  • jeffjade 1 评论

    @Vanessa 嗯呢,这个问题开发环境,的确是有的。
    另一个问题是,会报: Lute is not defined.

    正常 build 是没有问题的。这个服务部署在 GitHub pages,您知道那里不支持 SPA,为了方便这边有采用本地 prerender 得到静态的 HTML。但,最新版本(刚试了),经过 prerender 之后,将会报出这个错误;即便有以 script 形式在线引入 vditor,也不行耶。

    初始化有一个 options.after 回调。把相关的方法放在里面就可以了
    Vanessa
  • jeffjade 1 评论

    options.after 回调中,是推荐放置哪些内容呢?


    经过测试,初步断定为「时序」问题;预渲染,有发起 lute、 highlight 相关的请求,如果提前请求完毕,或者将下面这句代码,做一个延时,就不会出现 Lute、highlight is not defined 的问题了。我想,我应该熟读下最新的文档了。

    this.vditor = new Vditor('vditor', options)
    
    嗯。以前是同步请求,现在是异步的。所以需要
    Vanessa
  • jeffjade

    @Vanessa 请问如对于这个异步有什么建议处理下么?这边有两个办法是:

    1. 基于 ServerLess(或服务器用 nginx) 部署一套 SPA 应用;
    2. 在现有代码上修改,做一个延迟处理后再 初始化 Vditor(试了下可行);

    先前有提到说在 after 回调中处理,在这种情况下目测不能很好处理呢。

    1 回复
  • Vanessa
    1. 没太明白 SPA 和异步的关系
    2. 延迟貌似不太优雅

    after 有什么问题?

    1 回复
  • jeffjade
    1. SPA 跟异步没什么关系;但,经过预渲染后,总报出 Lute or hljs 没有定义的错误(具体原因还没查清);
    2. 延迟确实很不优雅。

    所以最后采取的一个 Hack 的办法,就是提前发起了 Lute 相关库的请求;从测试来看,能够解决问题,目前已经发布 https://markdown.lovejade.cn/

请输入回帖内容 ...