master
管理员 8 months ago
parent 7090c6e4c7
commit 40e7e5aa96

@ -1,36 +1,51 @@
<template>
<div>
<el-upload
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
class="editor-img-uploader"
name="file"
:show-file-list="false"
:headers="headers"
style="display: none"
ref="uploadRef"
v-if="type == 'url'"
>
<div style="width: 100%;">
<el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess"
:on-error="handleUploadError" class="editor-img-uploader" name="file" :show-file-list="false" :headers="headers"
style="display: none" ref="uploadRef" v-if="type == 'url'">
</el-upload>
<div class="editor">
<quill-editor
ref="myQuillEditor"
v-model:content="content"
contentType="html"
@textChange="(e) => $emit('update:modelValue', content)"
:options="options"
:style="styles"
/>
<div v-if="!source">
<quill-editor ref="myQuillEditor" v-model:content="content" contentType="html"
@textChange="(e) => $emit('update:modelValue', content)" :options="options" :style="styles" />
</div>
<el-input v-if="source" class="source-textarea" :style="{ height: height + 'px',width:'100%' }" type="textarea"
v-model="content" />
<div style="padding-top: .2em; display: flex; justify-content: flex-end;">
<el-radio-group v-model="source" @change="changeSource">
<el-radio-button label="编辑视图" :value="false" />
<el-radio-button label="源码视图" :value="true" />
</el-radio-group>
</div>
</div>
</div>
</template>
<script setup>
import { QuillEditor, Quill } from '@vueup/vue-quill';
// import ImageResize from 'quill-image-resize-module';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { getToken } from "@/utils/auth";
import { ref, computed, onMounted, getCurrentInstance } from 'vue'
// Quill.register(ImageResize)
const source = ref(false)
const height = ref(100)
onMounted(async () => {
await proxy.$nextTick()
height.value = myQuillEditor.value.editor.clientHeight + 42;
})
const changeSource = () => {
if (!source.value) {
console.debug(myQuillEditor.value.editor.clientHeight);
}
}
const props = defineProps({
/* 编辑器的内容 */
@ -61,12 +76,16 @@ const props = defineProps({
type: {
type: String,
default: "url",
},
server: {
type: String,
default: "/system/oss/upload"
}
});
const { proxy } = getCurrentInstance();
//
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/system/oss/upload");
const uploadUrl = computed(() => import.meta.env.VITE_APP_BASE_API + props.server);
const headers = ref({ Authorization: "Bearer " + getToken() });
const myQuillEditor = ref();
@ -80,14 +99,14 @@ const options = ref({
container: [
["bold", "italic", "underline", "strike"], // 线 线
["blockquote", "code-block"], //
[{ list: "ordered" }, { list: "bullet"} ], //
[{ list: "ordered" }, { list: "bullet" }], //
[{ indent: "-1" }, { indent: "+1" }], //
[{ size: ["small", false, "large", "huge"] }], //
[{ header: [1, 2, 3, 4, 5, 6, false] }], //
[{ color: [] }, { background: [] }], //
[{ align: [] }], //
["clean"], //
["link", "image", "video"] //
["link", "image"] //
],
handlers: {
image: function (value) {
@ -132,7 +151,7 @@ function handleUploadSuccess(res, file) {
//
let length = quill.selection.savedRange.index;
// res
quill.insertEmbed(length, "image", res.data.url);
quill.insertEmbed(length, "image", res.data);
//
quill.setSelection(length + 1);
proxy.$modal.closeLoading();
@ -164,16 +183,20 @@ function handleUploadError(err) {
</script>
<style>
.editor, .ql-toolbar {
.editor,
.ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
.quill-img {
display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
@ -188,14 +211,17 @@ function handleUploadError(err) {
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
@ -205,26 +231,32 @@ function handleUploadError(err) {
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
@ -234,12 +266,21 @@ function handleUploadError(err) {
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
.source-textarea textarea.el-textarea__inner {
resize: none;
height: 100%;
width: 100%;
}
</style>

@ -38,7 +38,7 @@ public class ${entity.toUpperName()}Api {
*/
@GetMapping("/{id}")
@SaCheckPermission("${moduleName}:${entity.toSimpleLowerName()}:query")
public ${entity.toUpperName()} id(@NotNull(message = "编号不能为空") @PathVariable Long id) {
public ${entity.toUpperName()} id(@NotNull(message = "编号不能为空") @PathVariable ${entity.id.clazz.getSimpleName()} id) {
return findById(${entity.toUpperName()}.class, id);
}
@ -113,7 +113,7 @@ public class ${entity.toUpperName()}Api {
@SaCheckPermission("${moduleName}:${entity.toSimpleLowerName()}:delete")
@Log(title = "${entity.name}", businessType = BusinessType.DELETE)
@DeleteMapping("/{ids}")
public void remove(@NotEmpty(message = "编号不能为空") @PathVariable Long[] ids) {
public void remove(@NotEmpty(message = "编号不能为空") @PathVariable ${entity.id.clazz.getSimpleName()}[] ids) {
doRemove(${entity.toUpperName()}.class, conditions().put("_id$in", ids).query());
}

Loading…
Cancel
Save