• ArthurSlog

• SLog-78

• Year·1

• Guangzhou·China

• September 19th 2018

不尚贤 使民不争 不贵难得之货 使民不为盗 不见可欲 使民心不乱 是以圣人之治 虚其心 实其腹 弱其志 强其骨 常使民无知无欲 使夫智者不敢为也 为无为 则无不治

开发环境MacOS(High Sierra 10.13.6 (17G65))

需要的信息和信息源：

开始编码

• 本篇是把ArthurSlog.com网站上的Markdown编辑器本地化了

• 使用的是Electron，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库

• 目前已经完成基本功能

• 完整源码已上传至 Github：

git clone

cd ArthurSlogMarkdownEditor

sudo npm i --unsafe-perm=true

sudo npm run start

• 启动rthurSlogMarkdownEditor

• 使用Markdown语法书写，测试成功！

• 对于electron来说，他主要是负责两件事情：

1. 使用nodejs负责操作系统与界面之间的交互，称为主函数

2. 调用浏览器渲染（例如V8、webkit、等）引擎负责界面的交互，成为渲染函数

• 顾名思义，主函数是一切的开始：

~/Desktop/ArthurSlogMarkdownEditor/main.js

const { app, BrowserWindow } = require('electron')let winfunction createWindow() {    win = new BrowserWindow({        width: 800,        height: 600,    })    win.loadFile('index.html')    //win.webContents.openDevTools()    win.on('closed', () => {        win = null    })}app.on('ready', createWindow)app.on('window-all-closed', () => {    if (process.platform == 'darwin') {        qpp.quit()    }})app.on('activate', () => {    if (win == null) {        createWindow()    }})复制代码

• 具体函数的作用，下次再补充了，因为我现在还有更重要的事要去做

• 再来看一下配置文件 package.json:

~/Desktop/ArthurSlogMarkdownEditor/package.json

{  "name": "ArthurSlogBrowser_Nodejs",  "version": "0.0.1",  "description": "This is a Browser by Nodejs",  "main": "main.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "electron  ."  },  "keywords": [],  "author": "ArthurSlog",  "license": "ISC",  "devDependencies": {    "electron": "^2.0.9"  },  "dependencies": {    "markdown-it": "^8.4.2"  }}复制代码

• 当然，界面文件index.html也需要更新一下：

        
        
    
        
             
     
            
      
                
       
Arthur
                
       
Slog
                
       
创作中心
            
      
            
      
            
      
                
       
building...
            
      
        
     
        
     
            
                  
      
            
      
            
                  
      
        
     
    
    
        复制代码

• ok，文件结构比较简单，后面在来构建指定平台的可执行文件

• 至此，ArthurSLogMarkdownEditor编辑器本地化第一阶段 GET！。

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢