# christy-richtext

`christy-richtext` 是一個基於 Vue 3 的富文字編輯器元件，適合用在後台管理系統、文章編輯、公告內容、商品描述等需要輸入格式化文字的場景。

## Features

* 支援 Vue 3
* 支援 TypeScript
* 支援 `v-model`
* 可作為表單輸入元件使用
* 適合 Vite / Vue 專案使用

## Installation

使用 npm 安裝：

```sh
npm install christy-richtext
```

## Basic Usage

```vue
<script setup lang="ts">
import { ref } from 'vue'
import ChristyRichtext from 'christy-richtext'

// 控制富文字編輯器的 HTML 內容
const content = ref('<p>Hello christy-richtext</p>')
</script>

<template>
  <!-- 富文字編輯器，使用 v-model 綁定內容 -->
  <ChristyRichtext v-model="content" />

  <!-- 預覽目前輸出的 HTML 內容 -->
  <div v-html="content"></div>
</template>
```

## Props

| Prop         | Type     | Default | Description    |
| ------------ | -------- | ------- | -------------- |
| `modelValue` | `string` | `''`    | 編輯器目前的 HTML 內容 |

## Emits

| Event               | Payload  | Description |
| ------------------- | -------- | ----------- |
| `update:modelValue` | `string` | 當編輯器內容變更時觸發 |

## Example

```vue
<script setup lang="ts">
import { ref } from 'vue'
import ChristyRichtext from 'christy-richtext'

// 控制公告內容
const announcementContent = ref('')

// 模擬送出公告內容
const submit = () => {
  console.log('公告內容：', announcementContent.value)
}
</script>

<template>
  <section>
    <h2>新增公告</h2>

    <!-- 公告內容輸入區 -->
    <ChristyRichtext v-model="announcementContent" />

    <!-- 送出按鈕 -->
    <button type="button" @click="submit">
      送出
    </button>
  </section>
</template>
```

## Usage in Nuxt

如果你要在 Nuxt 專案中使用，建議使用 `<ClientOnly>` 包起來，避免富文字編輯器在伺服器端渲染時遇到瀏覽器 API 錯誤。

```vue
<script setup lang="ts">
import { ref } from 'vue'
import ChristyRichtext from 'christy-richtext'

// 控制富文字內容
const content = ref('')
</script>

<template>
  <ClientOnly>
    <ChristyRichtext v-model="content" />
  </ClientOnly>
</template>
```

## Development

安裝專案依賴：

```sh
npm install
```

啟動開發環境：

```sh
npm run dev
```

建置專案：

```sh
npm run build
```

執行型別檢查：

```sh
npm run type-check
```

## Project Structure

```txt
christy-richtext/
├─ src/
│  ├─ components/
│  │  └─ ChristyRichtext.vue
│  ├─ index.ts
│  └─ style.css
├─ package.json
├─ README.md
├─ tsconfig.json
└─ vite.config.ts
```

## Notes

如果你在頁面上使用 `v-html` 顯示富文字內容，請注意 HTML 內容來源是否可信。

若內容來自使用者輸入，建議在後端或前端進行 HTML 清理，避免 XSS 攻擊。

## License

MIT
