Nodejs 基于node-webkit的ace离线编辑器。

Nodejs 基于node-webkit的ace离线编辑器。

看了一下node-webkit的写的小程序，可以实现基本的文本编辑。依靠强大的ace编辑器。 GitHub：https://github.com/skyhacker2/nodeace image 支持markdown预览 image


12 回复

Node.js 基于 node-webkit 的 Ace 离线编辑器

背景介绍

node-webkit（现称为 Electron）是一个允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序的框架。结合强大的 Ace 编辑器，我们可以轻松创建一个功能丰富的离线文本编辑器，甚至支持 Markdown 预览。

示例代码

以下是一个简单的示例，展示如何使用 node-webkit 和 Ace 编辑器构建一个基本的离线编辑器。这个例子中包含了一个简单的 Markdown 预览功能。

首先，确保你已经安装了 node-webkit（现在通常使用 Electron）。接下来，你需要将 Ace 编辑器集成到项目中。

项目结构

/nodeace
  /node_modules
  /public
    index.html
    main.js
    style.css
    ace
      ace.js
      mode-markdown.js
      theme-monokai.js
      worker-markdown.js
  package.json

package.json

{
  "name": "nodeace",
  "version": "1.0.0",
  "main": "index.html",
  "scripts": {
    "start": "electron ."
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ace Editor Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="editor"></div>
  <div id="preview"></div>

  <script src="node_modules/ace-builds/src-noconflict/ace.js"></script>
  <script src="node_modules/ace-builds/src-noconflict/mode-markdown.js"></script>
  <script src="node_modules/ace-builds/src-noconflict/theme-monokai.js"></script>
  <script src="node_modules/ace-builds/src-noconflict/ext-language_tools.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

document.addEventListener('DOMContentLoaded', () => {
  const editor = ace.edit("editor");
  editor.setTheme("ace/theme/monokai");
  editor.session.setMode("ace/mode/markdown");

  const previewDiv = document.getElementById('preview');

  // 实时更新预览
  editor.on('change', function() {
    const markdownContent = editor.getSession().getValue();
    const htmlContent = marked(markdownContent);
    previewDiv.innerHTML = htmlContent;
  });

  // 初始化预览
  editor.setValue("# Welcome to Ace Editor\n\nThis is a simple example of how to integrate Ace with Electron and Markdown.", -1);
});

style.css

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#editor, #preview {
  flex: 1;
}

#editor {
  border-right: 1px solid #ccc;
  padding: 10px;
}

#preview {
  padding: 10px;
}

解释

  • HTML: 我们创建了两个主要的 <div>，一个是用于显示和编辑 Markdown 文本的 editor，另一个是用于实时预览的 preview。
  • JavaScript: 使用 Ace 编辑器初始化 Markdown 模式，并设置主题为 monokai。当编辑器内容发生变化时，通过监听 change 事件来实时更新预览区域。
  • Markdown 预览: 使用 marked 库将 Markdown 文本转换为 HTML，并显示在 preview 区域。

总结

通过上述代码，你可以创建一个简单的基于 node-webkit 和 Ace 编辑器的 Markdown 离线编辑器。这只是一个基础示例，你可以根据需要添加更多功能和样式。


支持楼主

支持楼主，不知楼主研究过atom-shell吗？github的atom也是基于类似技术弄的，比ace要高级些

没有看过atom-shell，去看看。咔咔~

刚搭建了一个在线markdown编辑器 http://ditoushe.com/

这是用哪个程序搭建的？

直接用网页不新么？为何要用nw。。。

顶部工具栏，亲自己实现的？

非常赞！！！

我只是觉得好玩。

哇，样式非常好看。赞~

针对“Nodejs 基于node-webkit的ace离线编辑器”这个问题，你可以参考以下示例来实现一个基于node-webkit（现在称为NW.js）和Ace编辑器的离线编辑器。

示例代码

首先，你需要安装NW.js和Ace编辑器。可以通过npm来安装：

npm install nw ace

接下来，创建一个HTML文件（例如index.html），用于加载Ace编辑器并设置编辑区域：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ace Editor in NW.js</title>
    <style>
        #editor { 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
        }
    </style>
</head>
<body>
    <div id="editor">Type your code here...</div>

    <script src="node_modules/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/javascript");
    </script>
</body>
</html>

然后，在项目根目录中创建一个package.json文件来配置NW.js应用的基本信息：

{
  "name": "ace-editor-nwjs",
  "main": "index.html",
  "window": {
    "width": 1024,
    "height": 768,
    "icon": "icon.png"
  }
}

确保你有一个图标文件（例如icon.png）放在项目的根目录中，这样NW.js可以使用它作为应用程序的图标。

运行应用

在项目根目录下运行以下命令启动NW.js应用：

nw .

这将启动一个基于NW.js的应用，并包含一个使用Ace编辑器的简单文本编辑器界面。

解释

  1. HTML结构：通过一个<div>元素定义了Ace编辑器的容器。
  2. CSS样式：将编辑器区域设置为全屏显示。
  3. JavaScript初始化：在脚本中初始化Ace编辑器，并设置了主题和模式。
  4. NW.js配置：通过package.json文件配置了NW.js应用的基本信息，包括窗口大小和图标。

希望这个示例能帮助你实现一个基于NW.js和Ace编辑器的离线编辑器。

回到顶部