利用marked.js写个简单Markdown编辑器(1)

Markdown的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多人用它写博客。
最近想自己动手写一个博客系统,然后查了下博客系统一般构造,发现目前大部分博客把Markdown作为博客的标配了。网上有很多markdown的解析插件,我一开始用的事markdown-js.js,但这个插件实在太坑了,代码块和表格都不能很好的处理;然后又用了strapdown.js,只能说这个插件太好了,它会给你一些不想要的东东。所以对比下来我选择了marked.js。这个插件用起来很简单,调用marke("md")就能解析你的markdown文本。

第一步:实现markdown编写实时预览

为了让页面好看,采用了bootstrap框架,实现左栏textarea写代码,通过监听键盘按下事件keyup和失去焦点事件blur,向右栏div实时插入解析的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
  • 10
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要用Java开发一个Markdown编辑器,可以使用JavaFX图形化界面库来实现。而要集成Editor.md,可以在JavaFX中嵌入WebView组件,然后加载Editor.md的HTML页面即可。 以下是实现步骤: 1. 在JavaFX中创建一个WebView组件 ``` WebView webView = new WebView(); ``` 2. 通过WebView组件加载Editor.md的HTML页面 ``` String htmlContent = "<html><head><link rel=\"stylesheet\" href=\"https://pandao.github.io/editor.md/css/editormd.min.css\"/></head><body><textarea id=\"editor\"></textarea><script src=\"https://pandao.github.io/editor.md/lib/marked.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/prettify.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/raphael.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/underscore.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/sequence-diagram.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/flowchart.min.js\"></script><script src=\"https://pandao.github.io/editor.md/lib/jquery.min.js\"></script><script src=\"https://pandao.github.io/editor.md/editormd.min.js\"></script><script type=\"text/javascript\">var testEditor = editormd(\"editor\", {});</script></body></html>"; webView.getEngine().loadContent(htmlContent); ``` 3. 将WebView组件添加到JavaFX的场景中 ``` Scene scene = new Scene(webView); stage.setScene(scene); stage.show(); ``` 这样就可以实现一个简单Markdown编辑器,并集成了Editor.md的功能。当然,还需要实现一些逻辑来获取编辑器中的内容并进行解析和保存等操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值