翻译自《Electron Projects》的 Integrating the editor component
上个文章，我们配置好了一个Electron新项目（链接），
https://my.oschina.net/u/250233/blog/5286682
现在我们为它添加上编辑器组件。
对于我们的项目，我们不需要从头开始建立一切，包括编辑和格式化markdown格式文本的组件。
有很多免费的开源组件，你可以省出时间专注于构建应用程序和向用户提供价值，而不是花几个月时间重新发明轮子。
为了简单起见，我们将使用SimpleMDE组件，它基于SimpleMarkdown Editor。你可以在其主页上找到更多关于这个项目的细节：
https://simplemde.com/
该项目是开源的，采用MIT许可证。按照这些步骤来纳入该组件。
与我们安装 Electron 框架本身的方式类似，您可以使用 NPM 命令将 SimpleMDE 导入您的项目：
npm install simplemde
在安装一个新的库之前，不要忘记停止应用程序。
像其他典型的JavaScript组件一样，SimpleMDE组件带有一个JavaScript文件和一个CSS样式表，这样我们就可以与网页整合。
译者注：此时的 package.json 的 dependencies 里会加上simplemde的信息
在index.html文件中的head块底部添加以下几行:
<link rel="stylesheet" href="./node_modules/simplemde/dist/
simplemde.min.css">
<script src="./node_modules/simplemde/dist/
simplemde.min.js"></script>
注意我们是如何从index.html页面引用node_modules文件夹的。现在，要将SimpleMDE组件更新到一个新的版本，你只需要再次运行npm install simplemde。不需要每次都更新网页；只要你构建和运行应用程序，它就会使用更新的库。
现在，让我们在Electron shell中运行新安装的组件。根据该组件的要求，我们需要在页面上定义一个空的textarea元素，以及一个script块，在运行时将该元素变成一个markdown编辑器。请看下面的代码，它显示了这个的基本实现:
<textarea id="editor"></textarea>
<script>
var editor = new SimpleMDE({
element: document.getElementById('editor')
});
</script>
在这一点上，你的应用程序的HTML页面的内容应该如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
<title>Document</title>
<link rel="stylesheet" href="./node_modules/simplemde
/dist/simplemde.min.css">
<script src="./node_modules/simplemde/dist
/simplemde.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
var editor = new SimpleMDE({
element: document.getElementById('editor')
});
</script>
</body>
</html>
同样的，运行：
# 如果下面start没反应， 再运行一次 npm install
npm start
你应该看到一个窗口，中间是markdown编辑器组件，工具栏上有一组用于格式化文本的默认按钮，底部是字数和行数计数器标签:
SimpleMDE组件提供了一个很好的实时格式化功能，这样你的终端用户就可以看到最终的格式化和markdown的语法。要看到这个功能，在编辑器中输入一些内容，然后按工具栏上的H按钮。这将使该块变成一个标题或<h1>元素。
译者注：发现第一次运行时需要连网显示控制按钮需要，之后断网不再影响。朋友们如果有不同情况，欢迎留言。
你可以自由地试验这些控制，看看它们是如何影响文本的。检查格式化选项和预览模式，它可以让你看到最终的文件在渲染成HTML标记时的样子。
还有许多其他选项和功能，你可以启用或定制。请务必在这里查看SimpleMDE的文档：
https://github.com/sparksuite/simplemde-markdown-editor
。开箱即用的部分的体验是非常基本的，你可能想在以后切换其他设置。
你需要解决的最重要的事情之一是将你的网络应用程序保持在Electron窗口内。让我们看看如何使内容与屏幕尺寸相匹配。