zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-03-14 13:07:02 +08:00
parent ea39eee9b7
commit aea244c5f8
2 changed files with 258 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/views/modules/course/course-add-or-update.vue
View File

@@ -118,8 +118,11 @@
</el-table>
</div>
<div style="text-align:center; margin-bottom:15px" ><el-button @click="showProTable" size="mini" type="primary">添加关联书籍</el-button></div>
<el-form-item label="课程介绍" prop="sort" style="margin-bottom: 140px;">
<div style="height: calc(620px - 120px)">
<el-form-item label="课程介绍" prop="sort" style="margin-bottom: 140px;" v-loading="uploadLoading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<div style="height: calc(620px )">
<el-upload
class="chapter-avatar-uploader"
:action="baseUrl + '/oss/fileoss'"
@@ -129,6 +132,7 @@
>
</el-upload>
<quill-editor
v-model="dataForm.content"
ref="myQuillEditor"
:options="editorOption"
@@ -136,7 +140,7 @@
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
class="chapter_editor"
style="height: 100%;"
style="height: calc(100% - 100px);"
>
</quill-editor>
</div>
@@ -152,6 +156,7 @@
<script>
import global from "../../common/common.vue"; //引入共用组间
import { quillEditor } from "vue-quill-editor";
import axios from "axios";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
@@ -188,12 +193,16 @@ export default {
},
data() {
return {
quillEditorIndex: 0,
uploadLoading: false,
editorOption: {
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: false
}, clipboard: {
matchers: [["img", this.handlePasteImg]]
},
toolbar: {
container: toolbarOptions,
@@ -379,6 +388,120 @@ export default {
})
},
methods: {
handlePasteImg(node, delta) {
this.uploadLoading = true;
var that = this;
let ops = [];
delta.ops.forEach(async (op, index) => {
if (op.insert && typeof op.insert !== "string") {
// 如果粘贴了图片，这里会是一个对象
if (op.insert.image) {
if (op.insert.image.includes(";base64")) {
let file = that.dataURLtoFile(
op.insert.image,
`paste-${Math.random()
.toString(36)
.slice(-8)}.jpg`
);
console.log("file at line 397:", file);
// key 值可以自己用当前日期生成
let key = `detail/${new Date().getTime()}${Math.random()
.toString(36)
.slice(-8)}.jpg`;
let formdata = new FormData();
formdata.append("file", file);
formdata.append("fileName", key);
formdata.append("key", key);
console.log("🚀 ~ handleRequest ~ formdata:", formdata);
axios
.post(this.baseUrl + "/oss/fileoss", formdata)
.then(res => {
console.log("🚀 ~ this.$axios.post ~ res111:", res);
if (res.data.code == 0) {
// 如果上传成功
if (res.data.url) {
// 获取光标所在位置
var quill = that.$refs.myQuillEditor.quill;
var length = this.quillEditorIndex;
console.log("length at line 397:", length);
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.data.url);
// 调整光标到最后
quill.setSelection(length + 1);
this.uploadLoading = false;
} else {
// 提示信息，需引入Message
this.$message.error("图片插入失败！");
this.uploadLoading = false;
}
} else {
this.$message.error("图片插入失败！");
this.uploadLoading = false;
}
})
.catch(err => {
this.$message.error("图片插入失败！");
this.uploadLoading = false;
console.log(err);
});
// const [res, err] = await apiService.getUploadToken();
// if (err) return false;
// let origin = res.data.picture.origin;
// const fd = new FormData();
// fd.append("key", key);
// fd.append("token", res.data.picture.token);
// fd.append("origin", origin);
// fd.append("time", new Date().getTime());
// fd.append("file", file);
// apiService
// .uploadImage(fd)
// .then(res => {
// console.log(res, "res");
// let quill = this.$refs.myQuillEditor.quill; // 获取富文本对象
// let length = quill.getSelection().index; // 获取编辑器光标位置
// quill.insertEmbed(length, "image", `${origin}/${res.key}`); // 插入图片 图片地址
// quill.setSelection(length + 1); // 光标后移一位 调整光标到最后
// })
// .catch(err => {
// console.log(err);
// });
} else {
console.log("op.insert.image at line 407:", op.insert.image);
// 获取光标所在位置
var quill = that.$refs.myQuillEditor.quill;
var length = this.quillEditorIndex;
console.log("length at line 397:", length);
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", op.insert.image);
// 调整光标到最后
quill.setSelection(length + 1);
this.uploadLoading = false;
}
}
}
});
delta.ops = ops; // 不加会报错
return delta;
},
dataURLtoFile(dataurl, name) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], name, { type: mime });
},
delPro(i){
console.log('i',i)
// this.$emit('delPro',i)
@@ -394,7 +517,7 @@ export default {
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
let length = this.quillEditorIndex;
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
@@ -410,7 +533,9 @@ export default {
},
// 获得焦点事件
onEditorFocus(quill) {
//console.log('editor focus!', quill)
var index = quill.getSelection().index;
this.quillEditorIndex = index;
console.log("quill at line 839:", this.quillEditorIndex);
},
// 准备富文本编辑器
onEditorReady(quill) {

133
src/views/modules/courseSettings/chapter-add-or-update.vue
View File

@@ -1,6 +1,9 @@
<template>
<div style="height: 100%;">
<div style="height: calc(100% - 120px);margin-bottom: 80px;">
<div style="height: calc(100% - 60px);margin-bottom: 20px;" v-loading="uploadLoading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<el-upload
class="chapter-avatar-uploader"
:action="baseUrl + '/oss/fileoss'"
@@ -17,7 +20,7 @@
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
class="chapter_editor"
style="height: 100%;"
style="height: calc(100% - 80px);"
>
</quill-editor>
</div>
@@ -32,6 +35,7 @@
<script>
import global from "../../common/common.vue"; //引入共用组间
import axios from "axios";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
@@ -66,7 +70,8 @@ const toolbarOptions = [
export default {
props: ["dataInfo", "type"],
data() {
return {
return { quillEditorIndex: 0,
uploadLoading: false,
baseUrl: global.baseUrl,
// 富文本编辑器配置
editorOption: {
@@ -75,6 +80,8 @@ export default {
delay: 1000,
maxStack: 50,
userOnly: false
}, clipboard: {
matchers: [["img", this.handlePasteImg]]
},
toolbar: {
container: toolbarOptions,
@@ -122,14 +129,127 @@ export default {
},
created() {},
mounted() {},
methods: {
methods: { handlePasteImg(node, delta) {
this.uploadLoading = true;
var that = this;
let ops = [];
delta.ops.forEach(async (op, index) => {
if (op.insert && typeof op.insert !== "string") {
// 如果粘贴了图片，这里会是一个对象
if (op.insert.image) {
if (op.insert.image.includes(";base64")) {
let file = that.dataURLtoFile(
op.insert.image,
`paste-${Math.random()
.toString(36)
.slice(-8)}.jpg`
);
console.log("file at line 397:", file);
// key 值可以自己用当前日期生成
let key = `detail/${new Date().getTime()}${Math.random()
.toString(36)
.slice(-8)}.jpg`;
let formdata = new FormData();
formdata.append("file", file);
formdata.append("fileName", key);
formdata.append("key", key);
console.log("🚀 ~ handleRequest ~ formdata:", formdata);
axios
.post(this.baseUrl + "/oss/fileoss", formdata)
.then(res => {
console.log("🚀 ~ this.$axios.post ~ res111:", res);
if (res.data.code == 0) {
// 如果上传成功
if (res.data.url) {
// 获取光标所在位置
var quill = that.$refs.myQuillEditor.quill;
var length = this.quillEditorIndex;
console.log("length at line 397:", length);
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.data.url);
// 调整光标到最后
quill.setSelection(length + 1);
this.uploadLoading = false;
} else {
// 提示信息，需引入Message
this.$message.error("图片插入失败！");
this.uploadLoading = false;
}
} else {
this.$message.error("图片插入失败！");
this.uploadLoading = false;
}
})
.catch(err => {
this.$message.error("图片插入失败！");
this.uploadLoading = false;
console.log(err);
});
// const [res, err] = await apiService.getUploadToken();
// if (err) return false;
// let origin = res.data.picture.origin;
// const fd = new FormData();
// fd.append("key", key);
// fd.append("token", res.data.picture.token);
// fd.append("origin", origin);
// fd.append("time", new Date().getTime());
// fd.append("file", file);
// apiService
// .uploadImage(fd)
// .then(res => {
// console.log(res, "res");
// let quill = this.$refs.myQuillEditor.quill; // 获取富文本对象
// let length = quill.getSelection().index; // 获取编辑器光标位置
// quill.insertEmbed(length, "image", `${origin}/${res.key}`); // 插入图片 图片地址
// quill.setSelection(length + 1); // 光标后移一位 调整光标到最后
// })
// .catch(err => {
// console.log(err);
// });
} else {
console.log("op.insert.image at line 407:", op.insert.image);
// 获取光标所在位置
var quill = that.$refs.myQuillEditor.quill;
var length = this.quillEditorIndex;
console.log("length at line 397:", length);
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", op.insert.image);
// 调整光标到最后
quill.setSelection(length + 1);
this.uploadLoading = false;
}
}
}
});
delta.ops = ops; // 不加会报错
return delta;
},
dataURLtoFile(dataurl, name) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], name, { type: mime });
},
contentUploadSuccess(res, file) {
// console.log(res)
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
let length = this.quillEditorIndex;
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
@@ -145,6 +265,9 @@ export default {
},
// 获得焦点事件
onEditorFocus(quill) {
var index = quill.getSelection().index;
this.quillEditorIndex = index;
console.log("quill at line 839:", this.quillEditorIndex);
//console.log('editor focus!', quill)
},
// 准备富文本编辑器