---
tags: Vue 直播班 - 2022 冬季班
---

# 第七週：文字編輯器、多國語系
* [Vite 模版](https://github.com/hexschool/vite-template)

## 文字編輯器 ckeditor5+Vue3([官方文件](https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/vuejs-v3.html))

// .env
VITE_APP_URL=https://vue3-course-api.hexschool.io/
VITE_APP_PATH=casper-hexschool

### 安裝方法

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

1. `@ckeditor/ckeditor5-vue`：提供了一個 CKEditor5 Vue 元件，您可以在 Vue 模板中使用它，並使用相應的屬性來自訂編輯器。

2. `@ckeditor/ckeditor5-build-classic` ：是一個經典版本的 CKEditor5 基本 UI 庫與相關常用插件設定，以及默認的編輯器使用者介面。可以直接使用無需進行額外的配置。

### 載入 Vue3+Vite 流程

在 `main.js` 全域加入 `@ckeditor/ckeditor5-vue`：

import { createApp } from 'vue'
// 加入 CKEditor 
import CKEditor from '@ckeditor/ckeditor5-vue'

import App from './App.vue'
import router from './router'

const app = createApp(App)
// 載入元件
app.use(CKEditor)

app.use(router)
app.mount('#app')

### 在需要的 `.vue` 檔案載入 `@ckeditor/ckeditor5-build-classic`
* [config 設定](https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/vuejs-v3.html#config)

<template>
  <h1>This is About page.</h1>
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
  <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
export default {
  data () {
    return {
      editor: ClassicEditor,
      editorData: '<p>Hello world!!</p>',
      editorConfig: {
        toolbar: ['heading', '|', 'bold', 'italic', 'link']
      }
    }
  }
}
</script>

<style scoped>
</style>

### 從 API 載入到 ckedior

<template>
  <h1>This is About page.</h1>
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
  <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
<script>
import axios from 'axios'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
const { VITE_APP_URL, VITE_APP_PATH } = import.meta.env
export default {
  data () {
    return {
      editor: ClassicEditor,
      editorData: '',
      editorConfig: {
        toolbar: ['heading', '|', 'bold', 'italic', 'link'],
        dataProcessor: {
          writer: {
            enter: '<br>'
          }
        }
      }
    }
  },
  mounted () {
    this.fetchProduct()
  },
  methods: {
    fetchProduct () {
      axios
        .get(`${VITE_APP_URL}/v2/api/${VITE_APP_PATH}/product/-MucepnBq3-jnRqY0pNx`)
        .then(response => {
          if (response.data.success) {
            this.editorData = response.data.product.content.replace(/\n/g, '<br>')
          } else {
            console.error('找不到產品編號！')
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<style scoped>
</style>

## 多國語系 [vue-i18n-next](https://github.com/intlify/vue-i18n-next)

npm install vue-i18n@9

### 新增語系檔
在 Vue3 建立一個 languages 文件夾，增加中英語系 JSON，分別是 en.json 和 zh-TW.json 兩個文件

// en.json
{
  "menu.aboutUs": "About Us",
  "menu.productContent": "Product Content",
  "menu.blog": "Blog",
  "menu.faq": "FAQ"
}

// zh-TW.json
{
  "menu.aboutUs": "關於我們",
  "menu.productContent": "產品內容",
  "menu.blog": "部落格",
  "menu.faq": "常見QA"
}

* Main.js

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import zh from './languages/zh-TW.json'
import en from './languages/en.json'
import './style.css'
import App from './App.vue'
import router from './router'
const i18n = createI18n({
  legacy: false, // 啟用新的 Vue3 選項
  locale: 'en', // 設置默認語言
  messages: {
    en,
    'zh-TW': zh // 引入 zh-TW.json 文件
  }
})
const app = createApp(App)
app.use(i18n)
app.use(router)
app.mount('#app')

* AboutView

<template>
  <h1>This is About page.</h1>
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
    <div>
      <button @click="switchToEnglish">English</button>
      <button @click="switchToChinese">中文</button>
    </div>
    <h1>{{ $t('menu.aboutUs') }}</h1>
    <h1>{{ $t('menu.productContent') }}</h1>
    <h1>{{ $t('menu.blog') }}</h1>
    <h1>{{ $t('menu.faq') }}</h1>
</template>
<script>
export default {
  methods: {
    switchToEnglish () {
      this.$i18n.locale = 'en'
    },
    switchToChinese () {
      this.$i18n.locale = 'zh-TW'
    }
  }
}
</script>

<style scoped>
</style>