整个教程不涉及过于深入的知识，通过一系列c操作能够运行一个简单的MarkDown编辑器。在整个过程中体会Electron的作用，对于我来说就是把整个网页和浏览器打包成一个程序了，简单说可能就是我们常说的
大前端。
安装
- 安装npm,详情请参考官网https://nodejs.org/en/
- 创建项目文件夹
mkdir Markdown - 初始化
npm init 初始化后会生成一个项目描述文件package.json，内容(特别注意main何scripts选项)如下：
{
"name": "markdownediter", "version": "1.0.0", "description": "markdownediter", "main": "index.js", "scripts": {
"start": "electron ." }, "keywords": [ "markdown" ], "author": "emperinter", "license": "MIT", "devDependencies": {
"electron": "^14.0.0" } } - 安装electron依赖
npm install --save-dev electron [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-okhC3n7J-26)(https://www.emperinter.info/wp-content/uploads/2021/09/wp_editor_md_782ae4dc278fc686ce39a04493c9f227.jpg)]
如果安装失败切换到淘宝镜像
npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/" - 下载Markdown依赖(用的是Editor.md,我这里用的是自己一个项目旧版本，新版本自己去琢磨)。下载后把JS目录整个移到该项目文件夹下；我整个项目也导报到上面了，不用整个也行，文章末尾有说明。
git clone https://github.com/emperinter/SimpleElectronGuide Markdown配置步骤
- 创建index.html文件,内容如下：
doctype html> <html> <head> <meta charset="utf-8"> <title>Markdown
title> <link href="index.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.slim.min.js">
script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
script>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js">
script> <script src="js/editor.md-master/editormd.min.js">
script>
<link rel="stylesheet" href="js/editor.md-master/css/editormd.css" />
head> <body> <br/> <div align="center"> <form action="" method="POST"> <table border="1" width="95%"> <tr> <div id="test-editor"> <textarea style="display:none;" name="mark"> 关于 Editor.mdEditor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。 > print("hello world !")
textarea>
<textarea class="editormd-html-textarea" name="post">
textarea>
div>
tr>
table>
form>
div> <hr/> <br/> <br/> <br/> <footer class="footer mt-auto py-3"> <div class="container" align="center" style="text-decoration:none;font-size:22px;"> <span class="text-muted">Produced By <a style="text-decoration:none;" href="https://www.emperinter.info">emperinter
a>| <a style="text-decoration:none;" href="https://github.com/emperinter/MessageBoard">Github
a> | <a style="text-decoration:none;" href="mailto:">Email
a>
a>
span>
div>
footer> <script type="text/javascript"> $(function() {
var editor = editormd("test-editor", {
width : "95%", height : 350, path : "js/editor.md-master/lib/", saveHTMLToTextarea : true }); });
script>
body>
html> - index.js配置
//引入模块 const {
app, BrowserWindow } = require('electron') // 创建一个窗口 function createWindow () {
const win = new BrowserWindow({
width:800, height:600 }) win.loadFile('index.html') } // 侦听 app 的ready事件 app.whenReady().then(() => {
createWindow() }) - 运行（可看到项目运行时什么样子的）
npm start 如需了解如何打包成可执行文件，请访问：https://www.emperinter.info/2021/09/06/electron/
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/211840.html原文链接：https://javaforall.net
