Arya - 在线 Markdown 编辑器

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

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 解析器都拥有的基本功能;
  • ✨ 支持流程图甘特图时序图任务列表
  • 🏁 支持粘贴 HTML 自动转换为 Markdown
  • 💃🏻 支持插入原生 Emoji、设置常用表情列表;
  • 🚑 支持编辑内容保存本地存储,防止意外丢失;
  • 📝 支持实时预览,主窗口大小拖拽,字符计数;
  • 🛠 支持常用快捷键(含 Tab),及代码块添加复制;
  • 🚧 支持免费导出携带样式 PDF、PNG、JPEG 等;
  • 🚧 支持转换 Markdown 成公众号特制的 HTML
  • 🚧 内置多种漂亮样式,并且支持用户自定义

关于定位 📌

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 社区也是这样么?
    麻烦 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;
        }
    
  • 其他回帖
  • jeffjade
    作者

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

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

    image.png

    1 回复
  • jeffjade 1 评论
    作者

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

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

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

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

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

    image.png

    image.png

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

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