vue-ueditor-wrap 是一個基于 Vue 構建的 UEditor 富文本編輯器組件，使用該組件可以實現在 Vue 中方便地使用 UEditor。

<template>
<div>
<ueditor
:height="height"
:initOptions="initOptions"
v-model="content"
/>
</div>
</template>
<script>
import 'vue-ueditor-wrap'  // 引入組件
export default {
data () {
return {
content: '',  // 初始化內容
height: 500,  // 編輯器高度
initOptions: {  // UEditor 初始化配置
// ...
}
}
}
}
</script>

使用 vue-ueditor-wrap 需要先安裝 UEditor，可以使用 npm 或 yarn 安裝。

npm install ueditor --save
// 或
yarn add ueditor

隨后可以在項目中引入 vue-ueditor-wrap。

import UEditor from 'vue-ueditor-wrap'
// ...
components: {
UEditor
}

vue-ueditor-wrap 提供的配置項與原生的 UEditor 配置項大部分相同，在使用時只需要將配置傳遞給組件即可。

在處理富文本內容時，建議將內容轉換為 HTML 格式存儲。在展示時，可以使用 v-html 指令將內容渲染為網頁。

<template>
<div v-html="content"></div>
</template>
<script>
export default {
data () {
return {
content: '<p>這是一段從數據庫中獲取到的富文本內容</p>'
}
}
}
</script>

在使用 vue-ueditor-wrap 時，也可以自定義上傳圖片的方式。組件支持傳遞一個自定義的上傳圖片方法。

<template>
<div>
<ueditor
:initOptions="initOptions"
:uploadImage="uploadImage"
v-model="content"
/>
</div>
</template>
<script>
export default {
methods: {
uploadImage (file) {
// 自定義上傳圖片的邏輯
},
initOptions () {
// 初始化配置
}
}
}
</script>

上面的 uploadImage 方法接收一個 File 對象，該方法將圖片上傳到服務器，并返回上傳成功后的圖片 URL。URL 將會替換原本本地上傳圖片成功后返回的 URL。

vue-ueditor-wrap 支持 Vue 2.x 版本。在使用時需要保證 UEditor 的版本與 vue-ueditor-wrap 兼容。如果需要使用 UEditor 新的特性，請升級 UEditor 的版本，并查看 vue-ueditor-wrap 的更新日志，以保證組件的正常使用。