Nodejs Node-webkit写的桌面markdown编辑器

Nodejs Node-webkit写的桌面markdown编辑器

前段时间写的一个东西，目前只支持windows平台，偷个懒 ，，直接从github把介绍贴上来 :D
欢迎试用啊~~

Rock MarkDown Editor ###Rock! MarkDown是什么 基于 Node-webkit 实现，快速的markdown文档编辑器

Rock MarkDown Editor

###Rock! MarkDown有哪些功能

  • 编辑和预览，所见即所得，Ctrl+F12快速浏览器预览
  • N多的快捷键，快速写文档，让时间飞一会儿
  • 多标签功能，N多文档不用愁
  • 便利地工具栏，忘记markdown格式也不怕
  • 支持webstorm风格的部分常用快捷键
  • 方便的导入导出功能
    • 将.markdown .md .txt格式的文件拖到编辑器即可
    • 将当前内容导出为一个HTML文件
  • 邮件发送功能，直接将HTML内容发送到指定邮箱
  • 自动记忆记住上次退出时的状态
  • 完整的历史记录功能
  • 无任何依赖环境，直接安装即可运行

更多功能开发中 …

下载

最新版本：Beta V0.1.2

PS：以上32位版本，在64位系统上测试通过是可以使用的，不过不排除某些情况下失效，原因未知。

github：https://github.com/superRaytin/Rock_Markdown

另外，如果你使用的时候，正好又在逛淘宝，正好又安装了360等安全软件，可能会报提示说程序有风险，建议关闭之类的，请忽略之


29 回复

Nodejs Node-webkit写的桌面markdown编辑器

前段时间写的一个东西，目前只支持Windows平台，偷个懒，，直接从GitHub把介绍贴上来 :D
欢迎试用啊~~

Rock Markdown Editor

Rock! Markdown 是什么

基于 Node-webkit 实现，快速的markdown文档编辑器。

Rock Markdown Editor

Rock! Markdown有哪些功能

  • 编辑和预览：所见即所得，Ctrl + F12 快速浏览器预览。
  • 快捷键：快速写文档，让时间飞一会儿。
  • 多标签：多个文档无需切换窗口。
  • 工具栏：忘记markdown格式也不怕。
  • WebStorm风格快捷键：提高效率。
  • 导入导出：
    • 支持 .markdown, .md, .txt 文件拖拽导入。
    • 将当前内容导出为 HTML 文件。
  • 邮件发送：直接将HTML内容发送到指定邮箱。
  • 自动记忆：记住上次退出时的状态。
  • 历史记录：完整的历史记录功能。
  • 无依赖环境：直接安装即可运行。

更多功能开发中…

示例代码

下面是一个简单的Node-webkit应用的示例代码，用于创建一个基本的Markdown编辑器：

// main.html
<!DOCTYPE html>
<html>
<head>
    <title>Rock Markdown Editor</title>
    <script src="node_modules/node-webkit/nw.gui"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="editor-container">
        <textarea id="editor"></textarea>
        <iframe id="preview"></iframe>
    </div>
    <script src="app.js"></script>
</body>
</html>

// app.js
const editor = document.getElementById('editor');
const preview = document.getElementById('preview').contentWindow.document;

editor.addEventListener('input', () => {
    const markdownText = editor.value;
    preview.body.innerHTML = marked(markdownText);
});

document.addEventListener('DOMContentLoaded', () => {
    if (localStorage.getItem('markdown')) {
        editor.value = localStorage.getItem('markdown');
        preview.body.innerHTML = marked(editor.value);
    }
});

/* styles.css */
#editor-container {
    display: flex;
    height: 100%;
}

#editor {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
}

#preview {
    width: 50%;
    height: 100%;
}

下载

最新版本：Beta V0.1.2

PS：以上32位版本，在64位系统上测试通过是可以使用的，不过不排除某些情况下失效，原因未知。

GitHub: https://github.com/superRaytin/Rock_Markdown

另外，如果你使用的时候，正好又在逛淘宝，正好又安装了360等安全软件，可能会报提示说程序有风险，建议关闭之类的，请忽略之。


这个赞的～

不过木有Linux版QAQ

话说这个应该是可以跨平台的额…

我勒个擦，碉堡了，学习下，mark

嗯 node-webkit本身是跨平台的， 后续可能会出一个linux版本~~

http://pad.haroopress.com/

推荐一个基于node-webkit 的markdown编辑器…

good

=。= 谢谢~

看了下，不错的，有很多的东西可以借鉴~

不过，貌似没有开源啊

Excellent!

可以用在网站里面写博客的吗

只有桌面版的吗

你是想用markdown写文章么 可以用 showdown 或者 marked等markdown解释库，如果你用wordpress写博客，也有插件的

是的…

3Q~

很好的参考价值，最近也在搞node-webkit，希望楼主提供一个简单的项目，把整体框架给搭建出来，对于我们这边的新手学习起来就更加快啦

官方提供了几个有参考价值的demo，可以看看

https://github.com/zcbenz/nw-sample-apps

64位的win8下，一直在转圈，进不去

请问只用了html+css+js吗？ 如何打包exe呢？

提取码是什么呢

提取码是：8b68，360云盘近期貌似对所有分享默认都加上了提取码

阿里的同学？

一直觉得MarkDown最纠结的就是图片的链接和表格。对了，如果支持css挺不错的

Node还能做桌面程序？

上面下载URL已失效 … 新的下载地址是 http://aqgwgfzbcb.l3.yunpan.cn/lk/Q4snBywaHAEEk 提取码8b68

node本身不能，node-webkit可以，几乎node的方法都能用上，以及你所了解的几乎所有web技术，坛子已经有不少介绍帖了 …

嗯，再过段时间就是了 …

基于Node-webkit（现已更名为NW.js）实现一个桌面版Markdown编辑器是一个非常有趣且实用的项目。下面提供一个简单的Markdown编辑器实现思路及关键部分的代码示例，帮助你理解如何开始构建这样一个应用。

基本结构

首先，你需要确定你的应用由哪些主要部分组成：

  • HTML界面：用于用户输入和显示Markdown的实时预览。
  • CSS样式：美化界面。
  • JavaScript逻辑：处理Markdown语法渲染、键盘快捷键以及与用户的交互。

示例代码

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Markdown Editor</title>
    <style>
        /* 在这里添加一些基本的样式 */
    </style>
</head>
<body>
    <div id="editor">
        <textarea id="markdownInput"></textarea>
        <div id="preview"></div>
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript (app.js)

const nw = require('nw.gui');
const fs = require('fs');

// 实时预览Markdown
function updatePreview() {
    const markdownText = document.getElementById('markdownInput').value;
    const previewDiv = document.getElementById('preview');
    previewDiv.innerHTML = marked(markdownText); // marked是解析Markdown的库
}

document.getElementById('markdownInput').addEventListener('input', updatePreview);

// 快捷键处理
let shortcutManager = new nw.ShortcutManager(nw.Window.get());
shortcutManager.register({
    key: 'F12',
    active: true,
    modifiers: ['ctrl'],
    type: 'application'
}, function () {
    // 切换预览模式
    document.getElementById('preview').style.display = 
        document.getElementById('preview').style.display === 'none' ? 'block' : 'none';
});

说明

  • 使用marked库来解析Markdown文本并生成HTML。
  • 通过监听textarea的input事件来实时更新预览。
  • 使用NW.js的ShortcutManager注册快捷键，如Ctrl + F12用于切换预览模式。

这个简单的示例涵盖了Markdown编辑器的基本功能。你可以在此基础上添加更多特性，如多标签支持、自动保存、文件导入导出等功能。希望这个示例能够帮助你起步！

回到顶部