fix(component): 编辑器组件封装
This commit is contained in:
ronger
parent
0da7dc9f91
commit
b634714851
@ -13,12 +13,21 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
contentEditor: null,
|
||||
tokenURL: {}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
initValue: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
cacheId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -46,7 +55,7 @@ export default {
|
||||
'insert-before',
|
||||
'insert-after',
|
||||
'|',
|
||||
// 'upload',
|
||||
'upload',
|
||||
// 'record',
|
||||
'table',
|
||||
'|',
|
||||
@ -65,24 +74,29 @@ export default {
|
||||
}]
|
||||
return new Vue.Vditor(data.id, {
|
||||
toolbar,
|
||||
mode: 'sv',
|
||||
mode: _ts.mode,
|
||||
tab: '\t',
|
||||
cdn: apiConfig.VDITOR,
|
||||
cache: {
|
||||
enable: this.$route.params.article_id ? false : true,
|
||||
id: this.$route.params.article_id ? this.$route.params.article_id : '',
|
||||
enable: !_ts.cacheId,
|
||||
id: _ts.cacheId,
|
||||
},
|
||||
after() {
|
||||
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||
|
||||
},
|
||||
typewriterMode: true,
|
||||
hint: {
|
||||
emoji: Vue.emoji
|
||||
},
|
||||
preview: {
|
||||
hljs: {
|
||||
enable: true,
|
||||
lineNumber: true,
|
||||
style: 'github'
|
||||
},
|
||||
markdown: {
|
||||
toc: true,
|
||||
autoSpace: true
|
||||
},
|
||||
math: {
|
||||
inlineDigit: true
|
||||
@ -101,38 +115,55 @@ export default {
|
||||
cdn: apiConfig.VDITOR_CSS
|
||||
}
|
||||
},
|
||||
upload: {
|
||||
max: 10 * 1024 * 1024,
|
||||
url: _ts.tokenURL.URL,
|
||||
linkToImgUrl: _ts.tokenURL.linkToImageURL,
|
||||
token: _ts.tokenURL.token,
|
||||
filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
|
||||
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
|
||||
replace('/\\s/g', '')
|
||||
},
|
||||
height: data.height,
|
||||
counter: 102400,
|
||||
resize: {
|
||||
enable: data.resize,
|
||||
},
|
||||
lang: this.$store.state.locale,
|
||||
// placeholder: data.placeholder,
|
||||
placeholder: data.placeholder,
|
||||
})
|
||||
},
|
||||
editValue() {
|
||||
console.log('我被执行了')
|
||||
let data = this.contentEditor.getValue();
|
||||
this.$emit('editValue', data)
|
||||
contentValue() {
|
||||
return this.contentEditor.getValue();
|
||||
},
|
||||
editHtml() {
|
||||
let data = this.contentEditor.getHTML();
|
||||
this.$emit('editHtml', data)
|
||||
async contentHtml() {
|
||||
return await this.contentEditor.getHTML()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.contentEditor = this._initEditor({
|
||||
async mounted() {
|
||||
let _ts = this;
|
||||
const responseData = await _ts.$axios.$get('/api/upload/token');
|
||||
if (responseData) {
|
||||
_ts.$store.commit('setUploadHeaders', responseData.uploadToken);
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: responseData.uploadToken || '',
|
||||
URL: responseData.uploadURL || '',
|
||||
linkToImageURL: responseData.linkToImageURL || ''
|
||||
})
|
||||
}
|
||||
_ts.contentEditor = _ts._initEditor({
|
||||
id: 'contentEditor',
|
||||
mode: 'both',
|
||||
height: 480,
|
||||
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||
resize: false,
|
||||
value: this.initValue
|
||||
value: _ts.initValue
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less">
|
||||
@import "~vditor/src/assets/less/index.less";
|
||||
|
||||
</style>
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
</el-form-item>
|
||||
<br>
|
||||
<el-form-item label="作品集介绍">
|
||||
<content-editor @editValue="editValue" :initValue="portfolio.portfolioDescription||''"
|
||||
v-if="isLoading" @editHtml="editHtml"
|
||||
<content-editor mode="sv" :cacheId="'portfolio-' + (portfolio.idPortfolio || '')"
|
||||
:initValue="portfolio.portfolioDescription||''" v-if="isLoading"
|
||||
ref="contentEditor"></content-editor>
|
||||
</el-form-item>
|
||||
<el-form-item class="text-right">
|
||||
@ -160,12 +160,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editValue(data) {
|
||||
this.contentValue.portfolioDescription = data
|
||||
},
|
||||
editHtml(data) {
|
||||
this.contentValue.portfolioDescriptionHtml = data
|
||||
},
|
||||
realTime(data) {
|
||||
this.cropImg = data;
|
||||
},
|
||||
@ -204,17 +198,15 @@ export default {
|
||||
// _ts.$refs.cropper?.replace(this.result);
|
||||
}
|
||||
},
|
||||
handleSubmitData() {
|
||||
async handleSubmitData() {
|
||||
let _ts = this;
|
||||
_ts.$set(_ts, 'loading', true);
|
||||
|
||||
_ts.$refs.contentEditor.editValue();
|
||||
_ts.$refs.contentEditor.editHtml();
|
||||
let data = _ts.portfolio;
|
||||
data.portfolioDescription = _ts.contentValue.portfolioDescription;
|
||||
data.portfolioDescriptionHtml = _ts.contentValue.portfolioDescriptionHtml;
|
||||
data.headImgType = 0
|
||||
if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
|
||||
data.portfolioDescription = _ts.$refs.contentEditor.contentValue();
|
||||
data.portfolioDescriptionHtml = await _ts.$refs.contentEditor.contentHtml();
|
||||
data.headImgType = 0;
|
||||
data.headImgUrl = _ts.headImgUrl;
|
||||
if ((data.portfolioDescription || undefined) === undefined || (data.portfolioDescriptionHtml || undefined) === undefined) {
|
||||
this.$message.error('请输入必填信息');
|
||||
return false
|
||||
}
|
||||
@ -222,10 +214,8 @@ export default {
|
||||
},
|
||||
async submitData() {
|
||||
let _ts = this
|
||||
let data = this.handleSubmitData()
|
||||
let data = await this.handleSubmitData()
|
||||
let id = _ts.idPortfolio;
|
||||
|
||||
data.headImgUrl = _ts.headImgUrl
|
||||
let title = id ? '更新' : '添加';
|
||||
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
||||
if (res && res.message) {
|
||||
@ -245,7 +235,6 @@ export default {
|
||||
|
||||
},
|
||||
async updatePortfolio() {
|
||||
console.log('我怎么一直在执行')
|
||||
let _ts = this
|
||||
let data = this.handleSubmitData()
|
||||
let id = _ts.idPortfolio;
|
||||
@ -338,17 +327,6 @@ export default {
|
||||
});
|
||||
let _ts = this;
|
||||
_ts.$store.commit("setActiveMenu", "portfolio-post");
|
||||
this.$axios.$get('/api/upload/simple/token').then(function (res) {
|
||||
if (res) {
|
||||
|
||||
_ts.$store.commit('setUploadHeaders', res.uploadToken);
|
||||
_ts.$set(_ts, 'tokenURL', {
|
||||
token: res.uploadToken || '',
|
||||
URL: res.uploadURL || '',
|
||||
linkToImageURL: res.linkToImageURL || ''
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
let portfolioContent = '';
|
||||
if (_ts.idPortfolio) {
|
||||
@ -360,7 +338,6 @@ export default {
|
||||
_ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl);
|
||||
portfolioContent = _ts.portfolioDetail.portfolioDescription;
|
||||
}
|
||||
|
||||
} else {
|
||||
this.isEdit = false
|
||||
}
|
||||
@ -370,7 +347,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "~vditor/src/assets/less/index.less";
|
||||
|
||||
.button_box {
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user