Simditor Vue 是一個基于 Vue.js 和 Simditor 富文本編輯器的組件,提供豐富的富文本編輯功能,支持圖片上傳和鏈接插入等功能,方便用戶在前端頁面快速編輯和發布內容。
使用 Simditor Vue 首先需要安裝依賴,可以通過 NPM 或者 Yarn 安裝。安裝完成后,在需要使用編輯器的 Vue 組件中引入 Simditor Vue,然后在模板中加入組件標簽。
// 安裝依賴
npm install simditor-vue --save
// 引入組件
import SimditorVue from 'simditor-vue'
// 在模板中使用
<SimditorVue v-model="content" />
Simditor Vue 提供了多種配置選項,例如可以設置編輯器的語言、上傳圖片的接口地址等。同時還可以自定義工具欄、編輯器樣式等。
<SimditorVue
v-model="content"
:lang="'zh_CN'"
:upload="{
url: '/uploadImg',
params: { token: 'abc' }
}"
:toolbar="[
'title',
'bold',
'italic',
'underline',
'strikethrough',
'color',
'ol',
'ul',
'blockquote',
'table',
'link',
'hr',
'indent',
'outdent',
'alignment'
]"
:defaultImage="/default.png"
:class-name="['my-editor']"
/>
除了基本的使用和配置,Simditor Vue 還提供了多種事件和方法,例如可以在上傳圖片完成后執行回調函數,也可以通過 setText 方法設置編輯器的內容。
<SimditorVue
...
@imageUploaded="onImageUpload"
/>
methods: {
onImageUpload(response) {
console.log('image uploaded:', response.url)
},
showContent() {
console.log('content:', this.$refs.editor.getText())
}
}
總之,Simditor Vue 是一個功能全面、易用靈活的富文本編輯器組件。如果你需要在 Vue.js 項目中添加富文本編輯功能,不妨試試 Simditor Vue。