You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.4 KiB
105 lines
2.4 KiB
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import { Search, Plus, Memo } from "@element-plus/icons-vue";
|
|
import ClassicEditor from "ckeditor5-custom-build/build/ckeditor.js";
|
|
|
|
import { getArticle, updateArticle } from "@/api/article.js";
|
|
|
|
const editor = ClassicEditor;
|
|
const editorContent = ref("");
|
|
const editorConfig = ref({
|
|
simpleUpload: {
|
|
// The URL that the images are uploaded to.
|
|
uploadUrl: 'https://prodio.zltest.com.tw/adminapi/article/uploadImage',
|
|
// // Headers sent along with the XMLHttpRequest to the upload server.
|
|
headers: {
|
|
'X-CSRF-TOKEN': 'CSFR-Token',
|
|
'Authorization' : `${sessionStorage.getItem('token')}`
|
|
}
|
|
},
|
|
image: {
|
|
resize: true,
|
|
toolbar: [
|
|
"imageTextAlternative",
|
|
"|",
|
|
"imageStyle:alignLeft",
|
|
"imageStyle:alignRight",
|
|
"|",
|
|
"imageStyle:alignBlockLeft",
|
|
"imageStyle:block",
|
|
"imageStyle:alignBlockRight",
|
|
],
|
|
styles: [
|
|
'full',
|
|
'alignLeft',
|
|
'alignRight',
|
|
],
|
|
},
|
|
});
|
|
|
|
onMounted(async () => {
|
|
let res = await getArticle(1);
|
|
if (res.code === 200) {
|
|
editorContent.value = res.data.content;
|
|
}
|
|
});
|
|
|
|
const submitForm = async () => {
|
|
let res = await updateArticle({
|
|
id: 1,
|
|
content: editorContent.value
|
|
});
|
|
|
|
if (res.code === 200) {
|
|
// editorContent.value = res.data.content;
|
|
return ElMessage({
|
|
message: '更新成功',
|
|
type: 'success',
|
|
});
|
|
}
|
|
|
|
return ElMessage({
|
|
message: '更新失敗',
|
|
type: 'error',
|
|
});
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="main">
|
|
|
|
<!-- Breadcrumb: Start -->
|
|
<div class="breadcrumb-section">
|
|
<div>
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item> 經銷系統 </el-breadcrumb-item>
|
|
<el-breadcrumb-item><a href="/">公司簡介</a></el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
</div>
|
|
<!-- Breadcrumb: End -->
|
|
|
|
<el-card :body-style="{ padding: '0px' }">
|
|
<div :style="{ padding: '10px' }">
|
|
<ckeditor :editor="editor" v-model="editorContent" :config="editorConfig"></ckeditor>
|
|
</div>
|
|
<div class="card-footer">
|
|
<el-button type="primary" @click="submitForm()">確認</el-button>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.card-footer {
|
|
background-color: #f5f7fa;
|
|
border-top: 1px solid #ebeef5;
|
|
padding: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
:deep(.ck-editor__editable_inline) {
|
|
height: calc(100vh - 315px);
|
|
}
|
|
</style> |