1.10 Bun环境下，使用TinyMCE的实例

在 Bun 环境下使用 TinyMCE 构建一个 Web 应用，可以通过以下步骤完成。TinyMCE 是一个流行的开源富文本编辑器，易于集成到各种 Web 应用中。以下示例将演示如何在 Bun 环境中设置和使用 TinyMCE。

项目结构

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

1. 初始化项目

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

bun init tinymce-app
cd tinymce-app

2. 安装依赖

安装 Hono：

bun add hono

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>TinyMCE Editor</title>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea id="editor"></textarea>
  <button id="save-button">Save</button>
 
  <script src="/js/editor.js"></script>
</body>
</html>

5. 创建前端脚本

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

document.addEventListener('DOMContentLoaded', () => {
  tinymce.init({
    selector: '#editor',
    setup: (editor) => {
      document.getElementById('save-button')?.addEventListener('click', async () => {
        const content = editor.getContent();
        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>TinyMCE Editor</title>
      <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    </head>
    <body>
      <textarea id="editor"></textarea>
      <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 和 TinyMCE 构建了一个简单的 Web 编辑器应用。这个示例展示了如何设置后端服务器、配置前端视图和脚本，并实现简单的内容保存功能。你可以进一步扩展这个应用，添加更多功能和优化来适应实际需求。

Woodman's Second Brain | 第二大脑

探索