1.8 Bun环境下，使用类似Quill这样的Web编辑器的应用实例

在 Bun 环境下构建一个使用 Quill 编辑器的 Web 应用可以包括以下步骤。我们将使用 Bun 来初始化项目，并使用 Hono 作为后端框架。Quill 将用于前端的富文本编辑器。

1. 初始化项目

首先，初始化一个新的 Bun 项目：

bun init quill-editor-app
cd quill-editor-app

2. 安装依赖

安装 Hono、Quill 以及其他必要的依赖：

bun add hono quill

创建项目结构如下：

quill-editor-app/
├── src/
│   ├── index.ts
│   ├── editor.ts
│   ├── routes.ts
│   ├── views/
│       ├── index.html
│       └── editor.html
├── public/
│   ├── css/
│   ├── js/
├── tsconfig.json
├── bunfig.toml
└── package.json

3. 配置 TypeScript

在项目根目录创建 tsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"]
}

4. 创建前端视图

创建 src/views/index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quill Editor</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <style>
    #editor-container {
      height: 375px;
    }
  </style>
</head>
<body>
  <div id="editor-container"></div>
  <button id="save-button">Save</button>
 
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  <script src="/js/editor.js"></script>
</body>
</html>

创建 src/views/editor.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quill Editor</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <style>
    #editor-container {
      height: 375px;
    }
  </style>
</head>
<body>
  <div id="editor-container"></div>
  <button id="save-button">Save</button>
 
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  <script src="/js/editor.js"></script>
</body>
</html>

5. 创建前端脚本

在 src/editor.ts 文件中编写前端逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const editorContainer = document.getElementById('editor-container');
  if (editorContainer) {
    const quill = new Quill(editorContainer, {
      theme: 'snow'
    });
 
    document.getElementById('save-button')?.addEventListener('click', async () => {
      const content = quill.root.innerHTML;
      await fetch('/save', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content })
      });
    });
  }
});

6. 配置 Hono 路由

在 src/routes.ts 中定义路由：

import { Hono } from 'hono';
import { serveStatic } from 'hono/serve-static.module';
 
const app = new Hono();
 
app.use('/js/*', serveStatic({ root: './public/js' }));
app.use('/css/*', serveStatic({ root: './public/css' }));
 
app.get('/', (c) => {
  return c.html('<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Quill Editor</title><link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"><style>#editor-container {height: 375px;}</style></head><body><div id="editor-container"></div><button id="save-button">Save</button><script src="https://cdn.quilljs.com/1.3.6/quill.js"></script><script src="/js/editor.js"></script></body></html>');
});
 
app.post('/save', async (c) => {
  const { content } = await c.req.json();
  console.log('Saved content:', content);
  return c.text('Content saved');
});
 
export default app;

7. 创建主文件

在 src/index.ts 中启动服务器：

import { serve } from 'bun';
import app from './routes';
 
serve(app.fetch);

8. 编译前端脚本

将 TypeScript 编译为 JavaScript 并放入 public/js 目录：

bun run tsc src/editor.ts --outDir public/js

9. 运行应用

编译并运行应用：

bun run src/index.ts

总结

通过上述步骤，你已经使用 Bun、Hono 和 Quill 构建了一个简单的 Web 编辑器应用。这个示例展示了如何设置后端服务器、配置前端视图和脚本，并实现简单的内容保存功能。你可以进一步扩展这个应用，添加更多功能和优化来适应实际需求。

Woodman's Second Brain | 第二大脑

探索