herenshan112
9 months ago
11 changed files with 5438 additions and 83 deletions
@ -0,0 +1,121 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-03-07 08:45:16 |
|||
@ 备注: Quill 富文本 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { ref } from 'vue'; |
|||
// 引入富文本编辑器与样式 |
|||
import { Quill, QuillEditor } from '@vueup/vue-quill' |
|||
import '@vueup/vue-quill/dist/vue-quill.snow.css' |
|||
// 引入缩放图片的插件 |
|||
import BlotFormatter from 'quill-blot-formatter' |
|||
Quill.register('modules/blotFormatter', BlotFormatter) |
|||
// 全局引入样式 |
|||
import 'quill/dist/quill.core.css'; |
|||
import 'quill/dist/quill.snow.css'; |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue: string |
|||
placeholder?: string |
|||
width?: string |
|||
height?: string |
|||
blobUrl?: string |
|||
imgUrl?: string |
|||
config?: any |
|||
type?: number |
|||
}>(), |
|||
{ |
|||
modelValue: '', |
|||
placeholder: '请输入内容', |
|||
width: '100%', |
|||
height: '300px', |
|||
blobUrl: '', |
|||
imgUrl: '', |
|||
type:1, |
|||
config: () => { |
|||
return {} |
|||
} |
|||
} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
|
|||
// const content = ref(props.modelValue); |
|||
|
|||
const content = computed({ |
|||
get() { |
|||
return props.modelValue |
|||
}, |
|||
set(newVal: any) { |
|||
emits('update:modelValue', newVal) |
|||
} |
|||
}) |
|||
|
|||
|
|||
const toolbarOptions = [ |
|||
['bold', 'italic', 'underline'], |
|||
[{ 'header': [1, 2, 3, false] }], |
|||
['image', 'code-block'] |
|||
]; |
|||
|
|||
const handleEditorReady = (editor) => { |
|||
console.log('Editor实例:', editor); |
|||
}; |
|||
|
|||
watch( |
|||
() => props.modelValue, |
|||
(n: any) => { |
|||
if (n && n !== content.value) { |
|||
content.value = n |
|||
} |
|||
} |
|||
) |
|||
</script> |
|||
<template><div class="butBox" @click="openVideo">按钮</div> |
|||
<div v-if="type==1 || type == 5" class="edioBox"> |
|||
<QuillEditor |
|||
v-model:content="content" |
|||
contentType="html" |
|||
:toolbar="toolbarOptions" |
|||
@ready="handleEditorReady" |
|||
|
|||
/> |
|||
</div> |
|||
<div v-else class="edioBoxHtml" v-html="content"></div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.butBox{ |
|||
width:150px; |
|||
height: 50px; |
|||
background-color: #FB041A; |
|||
display:none; |
|||
} |
|||
.edioBoxHtml{ |
|||
width: 100%; |
|||
} |
|||
.edioBox{ |
|||
width: 100%; |
|||
height: 350px; |
|||
.ql-toolbar{ |
|||
.ql-snow{ |
|||
height: 300px; |
|||
} |
|||
} |
|||
:deep .ql-toolbar.ql-snow + .ql-container.ql-snow{ |
|||
height: 300px; |
|||
} |
|||
} |
|||
.ql-editor.ql-fullscreen { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 9999; |
|||
} |
|||
.ql-container { |
|||
user-select: auto !important; |
|||
-webkit-user-select: auto !important; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,280 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-03-07 09:23:53 |
|||
@ 备注: |
|||
--> |
|||
<script lang='ts' setup> |
|||
// 引入富文本编辑器与样式 |
|||
import { Quill, QuillEditor } from '@vueup/vue-quill' |
|||
import '@vueup/vue-quill/dist/vue-quill.snow.css' |
|||
import { newUploadFileApi } from '@/api/common/public' |
|||
// 引入缩放图片的插件 |
|||
import BlotFormatter from 'quill-blot-formatter' |
|||
Quill.register('modules/blotFormatter', BlotFormatter) |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue: string |
|||
placeholder?: string |
|||
width?: string |
|||
height?: string |
|||
blobUrl?: string |
|||
imgUrl?: string |
|||
config?: any |
|||
type?: number |
|||
}>(), |
|||
{ |
|||
modelValue: '', |
|||
placeholder: '请输入内容', |
|||
width: '100%', |
|||
height: '300px', |
|||
blobUrl: '', |
|||
imgUrl: '', |
|||
type:1, |
|||
config: () => { |
|||
return {} |
|||
} |
|||
} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
|
|||
// const content = ref(props.modelValue); |
|||
|
|||
const content = computed({ |
|||
get() { |
|||
return props.modelValue |
|||
}, |
|||
set(newVal: any) { |
|||
emits('update:modelValue', newVal) |
|||
} |
|||
}) |
|||
const editorRef = ref(null) |
|||
// 处理富文本图片上传 |
|||
const imageHandler = () => { |
|||
// 创建一个文件输入元素 |
|||
const input = document.createElement('input'); |
|||
input.setAttribute('type', 'file'); |
|||
input.setAttribute('accept', 'image/*'); |
|||
// 模拟点击，打开文件选择对话框 |
|||
input.click(); |
|||
|
|||
// 当用户选择文件后触发的事件 |
|||
input.onchange = async () => { |
|||
// 获取用户选择的文件 |
|||
const file = input.files ? input.files[0] : null; |
|||
if (file) { |
|||
// 创建一个 FormData 对象，用于文件上传 |
|||
const formData = new FormData(); |
|||
formData.append('file', file); |
|||
formData.append('type',"1") |
|||
try { |
|||
newUploadFileApi(formData) |
|||
.then(res =>{ |
|||
// console.log("上传图片",res.data) |
|||
// resolve(res.data.url) |
|||
const quill = toRaw(editorRef.value).getQuill() |
|||
if (quill) { |
|||
// 获取当前光标位置 |
|||
const range = quill.getSelection(true); |
|||
// 在当前光标位置插入上传的图片 |
|||
quill.insertEmbed(range.index, 'image',res.data.url); |
|||
} |
|||
}) |
|||
.catch(()=>{ |
|||
// reject('上传出错，请查看你上传的文件是否符合要求！') |
|||
alert('上传出错，请查看你上传的文件是否符合要求！') |
|||
}) |
|||
} catch (error) { |
|||
alert('图片上传失败') |
|||
} |
|||
|
|||
// try { |
|||
// /** |
|||
// * @todo 可以选中图片，然后把file文件给后端，后端给存到文件服务器，然后返回一个线上地址 |
|||
// * 这里的abc替换成你的请求接口方法,也可以使用 axios 发送 POST 请求 |
|||
// * */ |
|||
// // todo |
|||
// // 使用 axios 发送 POST 请求，将文件上传到服务器,这里的abc替换成你的请求接口方法 |
|||
// // 可以选中图片，然后把file文件给后端，后端给存到文件服务器，然后返回一个线上地址 |
|||
// const res = await abc(formData); |
|||
|
|||
// // 确保获取到 Quill 编辑器实例 |
|||
// const quill = toRaw(editorRef.value).getQuill() |
|||
// if (quill) { |
|||
// // 获取当前光标位置 |
|||
// const range = quill.getSelection(true); |
|||
// // 在当前光标位置插入上传的图片 |
|||
// quill.insertEmbed(range.index, 'image', res.data); |
|||
// } |
|||
|
|||
// } catch (error) { |
|||
// alert('图片上传失败') |
|||
// } |
|||
} |
|||
}; |
|||
} |
|||
|
|||
|
|||
|
|||
// toolbar标题,划过富文本头部提示信息 |
|||
const titleConfig = [ |
|||
{ Choice: '.ql-insertMetric', title: '跳转配置' }, |
|||
{ Choice: '.ql-bold', title: '加粗' }, |
|||
{ Choice: '.ql-italic', title: '斜体' }, |
|||
{ Choice: '.ql-underline', title: '下划线' }, |
|||
{ Choice: '.ql-header', title: '段落格式' }, |
|||
{ Choice: '.ql-strike', title: '删除线' }, |
|||
{ Choice: '.ql-blockquote', title: '块引用' }, |
|||
{ Choice: '.ql-code', title: '插入代码' }, |
|||
{ Choice: '.ql-code-block', title: '插入代码段' }, |
|||
{ Choice: '.ql-font', title: '字体' }, |
|||
{ Choice: '.ql-size', title: '字体大小' }, |
|||
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' }, |
|||
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' }, |
|||
{ Choice: '.ql-direction', title: '文本方向' }, |
|||
{ Choice: '.ql-header[value="1"]', title: 'h1' }, |
|||
{ Choice: '.ql-header[value="2"]', title: 'h2' }, |
|||
{ Choice: '.ql-align', title: '对齐方式' }, |
|||
{ Choice: '.ql-color', title: '字体颜色' }, |
|||
{ Choice: '.ql-background', title: '背景颜色' }, |
|||
{ Choice: '.ql-image', title: '图像' }, |
|||
{ Choice: '.ql-video', title: '视频' }, |
|||
{ Choice: '.ql-link', title: '添加链接' }, |
|||
{ Choice: '.ql-formula', title: '插入公式' }, |
|||
{ Choice: '.ql-clean', title: '清除字体格式' }, |
|||
{ Choice: '.ql-script[value="sub"]', title: '下标' }, |
|||
{ Choice: '.ql-script[value="super"]', title: '上标' }, |
|||
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' }, |
|||
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' }, |
|||
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' }, |
|||
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' }, |
|||
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' }, |
|||
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' }, |
|||
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' }, |
|||
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' }, |
|||
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' }, |
|||
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' }, |
|||
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' }, |
|||
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' }, |
|||
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' }, |
|||
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' }, |
|||
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' }, |
|||
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' }, |
|||
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' }, |
|||
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' } |
|||
] |
|||
// 富文本配置 |
|||
const options = ref({ |
|||
theme: 'snow', // 使用snow主题 |
|||
modules: { |
|||
// 富文本头部栏的功能配置 |
|||
toolbar: { |
|||
container: [ |
|||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 |
|||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 |
|||
[{ align: [] }], // 对齐方式 |
|||
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小 |
|||
[{ font: [] }], // 字体种类 |
|||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 |
|||
[{ direction: 'ltl' }], // 文本方向 |
|||
[{ direction: 'rtl' }], // 文本方向 |
|||
[{ indent: '-1' }, { indent: '+1' }], // 缩进 |
|||
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表 |
|||
[{ script: 'sub' }, { script: 'super' }], // 上标/下标 |
|||
['blockquote', 'code-block'], // 引用 代码块 |
|||
['clean'], // 清除文本格式 |
|||
['link', 'image', 'video'], // 链接、图片、视频 |
|||
], |
|||
handlers: { |
|||
image: imageHandler, // 点击图片触发事件 |
|||
}, |
|||
}, |
|||
// 图片缩放 |
|||
blotFormatter: { |
|||
// 可以在这里设置缩放样式 |
|||
// overlay: { |
|||
// style: { |
|||
// border: '2px solid red', |
|||
// } |
|||
// }, |
|||
toolbar: { |
|||
mainClassName: 'blot-formatter__toolbar' |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
// ！！！如果方法报错，把imageHandler 方法放到options的上面 |
|||
|
|||
// 给富文本框工具栏加上鼠标悬浮中文提示 |
|||
const initTitle = () => { |
|||
for (let item of titleConfig) { |
|||
// .editor 是富文本编辑器的类名 |
|||
let tip = document.querySelector('.editor ' + item.Choice); |
|||
if (tip) { |
|||
tip.setAttribute('title', item.title); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 自定义粘贴事件 |
|||
const customPaste=(e)=>{ |
|||
// 获取当前最新时间 改名啥的可以用 |
|||
let newTime = new Date().getTime() |
|||
|
|||
const clipboardData = e.clipboardData // 粘贴信息 |
|||
const types = clipboardData.types // 当前文件类型 |
|||
if (types.includes('Files')) { |
|||
e.preventDefault(); |
|||
e.clipboardData.files.forEach(file=>{ |
|||
// 在这里可以拿到粘贴后的图片与文件信息 |
|||
// 在这里做操作 |
|||
}) |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
onMounted(()=>{ |
|||
nextTick(()=>{ |
|||
// 给富文本框工具栏加上鼠标悬浮中文提示 |
|||
initTitle() |
|||
}) |
|||
// 给富文本增加粘贴事件 |
|||
editorRef.value.getQuill().root.addEventListener('customPaste', customPaste, false) |
|||
}) |
|||
watch( |
|||
() => props.modelValue, |
|||
(n: any) => { |
|||
if (n && n !== content.value) { |
|||
content.value = n |
|||
} |
|||
} |
|||
) |
|||
</script> |
|||
<template><div class="butBox" @click="openVideo">按钮</div> |
|||
<div class="editor"> |
|||
<!-- 这两个都是获取值的必要条件： v-model:content contentType="html" --> |
|||
<quill-editor |
|||
ref="editorRef" |
|||
v-model:content="content" |
|||
:options="options" |
|||
contentType="html" |
|||
></quill-editor> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.editor{ |
|||
width: 100%; |
|||
:deep(.ql-editor) { |
|||
min-height: 200px; |
|||
} |
|||
} |
|||
.butBox{ |
|||
width:150px; |
|||
height: 50px; |
|||
background-color: #FB041A; |
|||
display:none; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue