198 lines
6.6 KiB
Plaintext
198 lines
6.6 KiB
Plaintext
<template>
|
||
<!-- <div style="border: 1px solid #ccc">
|
||
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default"
|
||
ref="toolbar" />
|
||
<Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" mode="default"
|
||
@onCreated="handleCreated" @onChange="handleChange" />
|
||
</div> -->
|
||
<div style="border: 1px solid #ccc">
|
||
<quill-editor
|
||
ref="myQuillEditor"
|
||
content-type='html'
|
||
class="min-h180px"
|
||
v-model:content='content'
|
||
:options='editorOption'
|
||
@update:content ="handleChange($event)"
|
||
/>
|
||
<input type="file" hidden accept=".gif,.jpg,.jpeg,.png" ref="fileBtn" @change="handleUpload" />
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { upload } from '@/api/daikin/base';
|
||
import{useMessage} from 'naive-ui'
|
||
// import { onBeforeUnmount, shallowRef, onMounted, watch, defineProps, defineEmits } from 'vue';
|
||
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
||
// import '@wangeditor/editor/dist/css/style.css';
|
||
|
||
|
||
const message = useMessage()
|
||
const props = defineProps(["content"]);
|
||
const emit = defineEmits(['getChildData']);
|
||
|
||
// const editorRef = shallowRef();
|
||
// const valueHtml = ref('');
|
||
|
||
onMounted(() => {
|
||
content.value = props.content;
|
||
});
|
||
const HandleCustomMatcher = (node: any, Delta: { ops: any[]; })=>{
|
||
let ops: any[] = []
|
||
Delta.ops.forEach((op) => {
|
||
// 如果粘贴了图片，这里会是一个对象，所以可以这样处理
|
||
if (op.insert && typeof op.insert === "string") {
|
||
ops.push({
|
||
insert: op.insert, // 文字内容
|
||
attributes: op.attributes, //文字样式（包括背景色和文字颜色等）
|
||
});
|
||
} else {
|
||
//判断图片是否是base64
|
||
if (op.insert && op.insert.image && op.insert.image.indexOf("base64") > -1) {
|
||
message.error("图片格式不能为base64！");
|
||
}
|
||
else {
|
||
// console.log(op)
|
||
ops.push({
|
||
insert:op.insert,
|
||
attributes:op.attributes,
|
||
})
|
||
// handleUpload(File)
|
||
}
|
||
// message.error("禁止粘贴图片，请使用上传方式！");
|
||
}
|
||
});
|
||
Delta.ops = ops;
|
||
return Delta;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// const toolbarConfig = {};
|
||
|
||
// const editorConfig = {
|
||
// placeholder: '请输入内容...',
|
||
// MENU_CONF: {
|
||
// uploadImage: {
|
||
// server: 'http://admin.echo.mteam01.com/openApi/common/upload',
|
||
// fieldName: 'file',
|
||
// customInsert(res: { url: any; fileName: any; }, insertFn: (arg0: any, arg1: any) => void) {
|
||
// let url = res.url;
|
||
// insertFn(url,res.fileName);
|
||
// },
|
||
// accept: 'image/*',
|
||
// },
|
||
// }
|
||
// };
|
||
|
||
// onBeforeUnmount(() => {
|
||
// const editor = editorRef.value;
|
||
// if (editor == null) return;
|
||
// editor.destroy();
|
||
// });
|
||
|
||
function unescapeHTML(html: string) {
|
||
const doc = new DOMParser().parseFromString(html, 'text/html');
|
||
return doc.documentElement.textContent;
|
||
}
|
||
watch(() => props.content, () => {
|
||
const center =unescapeHTML(props.content)
|
||
// console.log(center)
|
||
myQuillEditor.value.setHTML(center)
|
||
});
|
||
|
||
// const handleCreated = (editor: { setHtml: (arg0: any) => void; }) => {
|
||
// editorRef.value = editor;
|
||
// editor.setHtml(props.content);
|
||
// };
|
||
// // 给父组件传值
|
||
const handleChange = (val: any) => {
|
||
// console.log(val)
|
||
emit('getChildData',val)
|
||
}
|
||
|
||
/************************************************** */
|
||
|
||
const content = ref('')
|
||
|
||
const editorOption = {
|
||
modules: {
|
||
clipboard: {
|
||
// 粘贴版，处理粘贴时候的自带样式
|
||
matchers: [[Node.ELEMENT_NODE, HandleCustomMatcher]],
|
||
},
|
||
toolbar: [
|
||
['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'], // 链接、图片、视频
|
||
],
|
||
},
|
||
ImageDrop: true,
|
||
imageResize: {
|
||
displayStyles: {
|
||
backgroundColor: 'black',
|
||
border: 'none',
|
||
color: 'white',
|
||
},
|
||
modules: ['Resize', 'DisplaySize', 'Toolbar'],
|
||
},
|
||
placeholder: '请输入内容...',
|
||
|
||
|
||
};
|
||
const myQuillEditor = ref()
|
||
const fileBtn = ref()
|
||
onMounted(() => {
|
||
let quill = toRaw(myQuillEditor.value).getQuill()
|
||
if (myQuillEditor.value) {
|
||
quill.getModule("toolbar").addHandler("image", imgHandler);
|
||
}
|
||
})
|
||
|
||
const imgHandler = (state: any) => {
|
||
if (state) {
|
||
fileBtn.value.click()
|
||
}
|
||
}
|
||
|
||
|
||
const handleUpload = (e: { target: { files: any; }; }) => {
|
||
const files = Array.prototype.slice.call(e.target.files);
|
||
// console.log(files, "files")
|
||
if (!files) {
|
||
return
|
||
}
|
||
let formdata = new FormData();
|
||
formdata.append("file", files[0]);
|
||
|
||
upload(formdata,{headers: { 'Content-Type': 'application/form-data' }})
|
||
.then(res => {
|
||
if (res.url) {
|
||
let quill = toRaw(myQuillEditor.value).getQuill()
|
||
let length = quill.getSelection().index;
|
||
// 插入图片，res为服务器返回的图片链接地址
|
||
quill.insertEmbed(length, "image", res.url);
|
||
// 调整光标到最后
|
||
quill.setSelection(length + 1);
|
||
}
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|
||
|