1.9 Bun环境下，还有类似Quill这样的Web编辑器应用实例么？

在 Bun 环境下，你还可以使用其他类似 Quill 的 Web 编辑器，例如 CKEditor、TinyMCE 等。下面是一个使用 CKEditor 的实例，演示如何在 Bun 环境中构建一个 Web 应用。

使用 CKEditor 的实例

CKEditor 是一个强大的开源富文本编辑器，可以轻松集成到任何 Web 应用中。以下步骤展示了如何在 Bun 环境下使用 CKEditor 构建一个简单的应用。

项目结构

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

1. 初始化项目

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

bun init ckeditor-app
cd ckeditor-app

2. 安装依赖

安装 Hono 和 CKEditor：

bun add hono

创建一个 package.json 文件并添加 CKEditor 的 CDN 地址：

{
  "dependencies": {
    "hono": "^2.2.2"
  },
  "devDependencies": {
    "typescript": "^4.6.2"
  },
  "scripts": {
    "build": "tsc",
    "start": "bun run dist/index.js"
  }
}

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 中编写 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CKEditor</title>
  <script src="https://cdn.ckeditor.com/ckeditor5/36.0.0/classic/ckeditor.js"></script>
  <style>
    #editor-container {
      height: 375px;
    }
  </style>
</head>
<body>
  <div id="editor-container">
    <textarea name="content" id="editor"></textarea>
  </div>
  <button id="save-button">Save</button>
 
  <script src="/js/editor.js"></script>
</body>
</html>

5. 创建前端脚本

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

document.addEventListener('DOMContentLoaded', () => {
  const editorContainer = document.getElementById('editor-container');
  if (editorContainer) {
    ClassicEditor
      .create(document.querySelector('#editor'))
      .then(editor => {
        (window as any).editor = editor;
 
        document.getElementById('save-button')?.addEventListener('click', async () => {
          const content = editor.getData();
          await fetch('/save', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ content })
          });
        });
      })
      .catch(error => {
        console.error(error);
      });
  }
});

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>CKEditor</title>
      <script src="https://cdn.ckeditor.com/ckeditor5/36.0.0/classic/ckeditor.js"></script>
      <style>
        #editor-container {
          height: 375px;
        }
      </style>
    </head>
    <body>
      <div id="editor-container">
        <textarea name="content" id="editor"></textarea>
      </div>
      <button id="save-button">Save</button>
 
      <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 和 CKEditor 构建了一个简单的 Web 编辑器应用。这个示例展示了如何设置后端服务器、配置前端视图和脚本，并实现简单的内容保存功能。你可以进一步扩展这个应用，添加更多功能和优化来适应实际需求。

Woodman's Second Brain | 第二大脑

探索