編輯游記是游客們記錄旅途點滴的重要方式之一，他們會緊記所到之處的美景和感受，以供自己日后的回憶和分享。而如何制作美觀、易讀的游記是很多人關注的焦點，此時使用 Vue 來輔助編輯游記就是一個不錯的選擇。

在 Vue 中編輯游記可以使用一款名為“Vue-Quill-Editor”的庫，它是基于 Quill.js 設計開發(fā)的編輯器，擁有豐富的功能和美觀的界面，非常適合制作游記。

首先，我們需要通過 npm 安裝 Vue-Quill-Editor 庫。在終端輸入下面的命令：

npm install vue-quill-editor --save

接下來，在項目的 main.js 文件中引入庫，如下所示：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

引入完畢后，我們就可以在組件中使用 Vue-Quill-Editor 編輯器了。在組件中的 template 語法中加入下面的代碼：

<template>
<div>
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
</template>

注意，因為我們使用了 v-model 雙向綁定，所以需要在當前組件的 data 中定義 content 屬性作為編輯器的內(nèi)容。

為了提供更好的用戶體驗，我們還可以自定義編輯器的配置，使得編輯的游記更適合網(wǎng)上展示。下面是一個簡單的例子：

<template>
<div>
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
</template>
<script>
export default {
data () {
return {
content: '',
editorOption: {
theme: 'snow',
placeholder: '請輸入內(nèi)容......',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
]
}
}
}
}
}
</script>

上面的代碼添加了編輯器的主題、占位符和工具欄等配置項。此時，我們就可以在 Vue 中愉快地編輯游記了。