向文可
4 years ago
parent
facb4104d3
commit
e3e3b23a4e
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 上传文件
|
||||
export function upload(data) {
|
||||
return request({
|
||||
url: '/ks-admin/local/upload/file',
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<component :is="render"></component>
|
||||
</template>
|
||||
<script lang="jsx">
|
||||
export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
</script>
|
||||
<script setup lang="jsx">
|
||||
import { upload } from '@/api/file';
|
||||
import { Quill, QuillEditor } from '@vueup/vue-quill';
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css';
|
||||
import ImageUploader from 'quill-image-uploader';
|
||||
Quill.register('modules/imageUploader', ImageUploader);
|
||||
|
||||
const props = defineProps({
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
preview: {
|
||||
type: [Boolean, String],
|
||||
default: 'app',
|
||||
},
|
||||
});
|
||||
const attrs = useAttrs();
|
||||
const emits = defineEmits(['update:modelValue', 'change']);
|
||||
const editor = ref(null);
|
||||
const options = {
|
||||
bounds: '.el-editor',
|
||||
debug: 'warn',
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
['blockquote', 'code-block'],
|
||||
['link', 'image'],
|
||||
[{ header: 1 }, { header: 2 }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
[{ script: 'sub' }, { script: 'super' }],
|
||||
[{ indent: '-1' }, { indent: '+1' }],
|
||||
[{ direction: 'rtl' }],
|
||||
[{ size: ['small', false, 'large', 'huge'] }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ font: [] }],
|
||||
[{ align: [] }],
|
||||
['clean'],
|
||||
],
|
||||
imageUploader: {
|
||||
upload: (file) => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const formdata = new FormData();
|
||||
formdata.append('file', file);
|
||||
const url = await upload(formdata);
|
||||
if (url) {
|
||||
resolve(url);
|
||||
} else {
|
||||
reject('上传失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
placeholder: '请输入内容...',
|
||||
readOnly: props.readonly,
|
||||
theme: 'snow',
|
||||
};
|
||||
const content = ref(null);
|
||||
watch(
|
||||
() => content,
|
||||
(value, old) => {
|
||||
emits('update:modelValue', unref(value));
|
||||
emits('change', unref(value), unref(old));
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const handleReady = (e) => {
|
||||
unref(editor).setHTML(attrs.modelValue || '');
|
||||
};
|
||||
const handleUpdateContent = (value) => {
|
||||
content.value = unref(editor).getHTML();
|
||||
};
|
||||
|
||||
const preview = ref(props.preview === false ? false : typeof props.preview === 'string' ? props.preview : 'app');
|
||||
const handlePreview = (mode) => {
|
||||
preview.value = mode;
|
||||
};
|
||||
|
||||
const render = () => (
|
||||
<div class="el-editor">
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
ref={editor}
|
||||
options={options}
|
||||
{...attrs}
|
||||
content={unref(content)}
|
||||
on={{
|
||||
'update:content': handleUpdateContent,
|
||||
ready: handleReady,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{unref(preview) ? (
|
||||
<div class={{ preview: true, ['--' + unref(preview)]: true, 'ql-snow': true }}>
|
||||
<h3 class="header">
|
||||
<div
|
||||
class={{ btn: true, active: unref(preview) === 'app' }}
|
||||
onClick={() => handlePreview('app')}
|
||||
>
|
||||
APP预览
|
||||
</div>
|
||||
<div class={{ btn: true, active: unref(preview) === 'pc' }} onClick={() => handlePreview('pc')}>
|
||||
PC预览
|
||||
</div>
|
||||
</h3>
|
||||
<div class="content ql-editor" v-html={unref(content)}></div>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.el-editor {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
:deep(.editor) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
:deep(.preview) {
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
border: 1px solid #d1d5db;
|
||||
&.--app {
|
||||
width: 320px;
|
||||
}
|
||||
&.--pc {
|
||||
width: 640px;
|
||||
}
|
||||
.header {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
display: flex;
|
||||
.btn {
|
||||
color: #d1d5db;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #000;
|
||||
}
|
||||
+ .btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue