Electron+React+codeMirror实现Markdown编辑器

原创

已于 2023-07-19 11:17:20 修改 · 907 阅读

标签

#electron #react.js #编辑器

于 2023-07-19 10:58:54 首次发布

本文介绍了如何使用Electron和Vite构建跨平台的Markdown编辑器，详细步骤包括从Vue迁移到React，配置eslint、prettier和typescript，集成CodeMirror6实现代码编辑和高亮，以及添加预览组件和插件功能。最后，文章讨论了打包过程。

实现Markdown编辑器

工具介绍
脚手架
从Vue切换到React
窗口模糊
- 依赖
- 效果
集成 codemirror6
- use-codemirror
- editor
- app
- 效果
预览组件
预览样式-添加代码的高亮
功能扩展-插件的使用
打包
收工

工具介绍

Electron: 用于构建跨平台的桌面应用程序
Vite: 提供快速的开发启动和热重载
TypeScript: 提供类型检查和编译时静态分析
React：构建用户界面的JavaScript库
CodeMirror：在网页实现可定制的代码编辑体验
react-markdown：专门渲染Markdown的React组件

脚手架

vite-electron-builder
使用这个模板
进入工作目录
enter
安装依赖

运行
npm run watch

从Vue切换到React

装包

npm uninstall @vitejs/plugin-vue @vue/compiler-sfc eslint-plugin-vue vue vue-router vue-tsc
npm i react@18.2.0 react-dom@18.2.0
npm i -D @types/react @types/react-dom # 作为开发依赖项，在ts中获得React和 ReactDOM的类型支持
npm i -D eslint eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

配置eslint, prettier, typescript

eslintrc.json配置eslint

packages\renderer\tsconfig.json配置typescript
在这里插入图片描述
创建prettire.config.js文件
代码格式化工具

配置Vite

挪走vue
remove
remove
使用React
Hello

效果
记得写上两个css

窗口模糊

依赖

VS的依赖
npm install electron-acrylic-window
安装成功

效果

集成 codemirror6

在网页中创建和编辑代码编辑器的 JavaScript 库

npm install @codemirror/state @codemirror/commands  @codemirror/view 
npm install @codemirror/language @codemirror/language-data @codemirror/lang-javascript @codemirror/lang-markdown
npm install @codemirror/theme-one-dark @lezer/highlight

use-codemirror

import {
   
   useEffect, useState, useRef} from 'react';
import {
   
   EditorState} from '@codemirror/state';
import {
   
   EditorView,keymap, highlightActiveLine,lineNumbers, highlightActiveLineGutter} from '@codemirror/view';
import {
   
   defaultKeymap, history, historyKeymap}  from '@codemirror/commands';
import {
   
   indentOnInput,bracketMatching, HighlightStyle, syntaxHighlighting} from '@codemirror/language';
import {
   
    tags} from '@lezer/highlight';
import