Show HN: ドキュメントアプリの構築に利用可能なオープンソースの .docx エディタ ライブラリです

オープンソースの WYSIWYG.docx エディタ。React および Vue 向け。正規化された OOXML、変更追跡機能、リアルタイムコラボレーションに対応。エージェント対応済み。ライブデモ | ドキュメント

クイックスタート

npm install @eigenpal/docx-editor-react

上記は React 向けのクイックスタートです。

npm install @eigenpal/docx-editor-vue

上記は Vue 向けのクイックスタートです。

npm install @eigenpal/nuxt-docx-editor

上記は Nuxt 向けのクイックスタートです。

パッケージ一覧

@eigenpal/docx-editor-react

@eigenpal/docx-editor-vue

@eigenpal/nuxt-docx-editor

@eigenpal/docx-editor-core

@eigenpal/docx-editor-i18n

@eigenpal/docx-editor-agents

アダプターのフォークを検討されている場合： 保持するフォークの規模は小さく保ってください。パーサー、シリアライザ、レンダリングの修正が自動的にビルドに組み込まれるように、

@eigenpal/docx-editor-core

React

import { useState } from 'react';
import { DocxEditor } from '@eigenpal/docx-editor-react';
import '@eigenpal/docx-editor-react/styles.css';

export function App() {
  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);

  return (
    <>
      <input
        type="file"
        accept=".docx"
        onChange={async (e) => setBuffer((await e.target.files?.[0]?.arrayBuffer()) ?? null)}
      />
      {buffer && <DocxEditor documentBuffer={buffer} mode="editing" />}
    </>
  );
}

Next.js / サーバーサイドレンダリング (SSR)： ダイナミックインポートを使用してください。エディタは DOM を必要とします。完全なドキュメント：

packages/react

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';

const buffer = ref<ArrayBuffer | null>(null);

async function loadFile(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  buffer.value = file ? await file.arrayBuffer() : null;
}
</script>

<template>
  <input type="file" accept=".docx" @change="loadFile" />
  <DocxEditor v-if="buffer" :document-buffer="buffer" mode="editing" />
</template>

完全なドキュメント：

packages/vue

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@eigenpal/nuxt-docx-editor'],
});

@eigenpal/nuxt-docx-editor

<DocxEditor>

<ClientOnly>

packages/nuxt

プラグイン

import { DocxEditor } from '@eigenpal/docx-editor-react';
import { PluginHost, templatePlugin } from '@eigenpal/docx-editor-react/plugin-api';

<PluginHost plugins={[templatePlugin]}>
  <DocxEditor documentBuffer={buffer} />
</PluginHost>;

完全なプラグイン API については プラグインドキュメント を参照してください。

開発環境での構築

bun install
bun run dev        # localhost:5173
bun run build
bun run typecheck

メインツリーのライブプレビューは

latest.docx-editor.dev

サンプルプロジェクト：Vite | Next.js | Remix | Astro | Vue | Nuxt ドキュメント | プロパティとリファメソッド | プラグイン | アーキテクチャ

コントリビュート

コントリビュートをご歓迎いたします。セットアップ、テスト、および一度限りの CLA 署名については

CONTRIBUTING.md

翻訳

エディタをあなたの言語へ翻訳するお手伝いをしてください！完全な i18n コントリビュートガイドについては こちら をご参照ください。

bun run i18n:new de      # ドイツ語のローカライズ用ファイルをスコーラフトする
bun run i18n:status      # 翻訳の進行状況を確認する

商用サポート