|
@@ -8,13 +8,13 @@ import { globalHeaders } from "@/utils/request";
|
|
|
import { AiEditor } from "aieditor";
|
|
import { AiEditor } from "aieditor";
|
|
|
import "aieditor/dist/style.css";
|
|
import "aieditor/dist/style.css";
|
|
|
const divRef = ref();
|
|
const divRef = ref();
|
|
|
-let aiEditor: AiEditor | null = null;
|
|
|
|
|
|
|
+let aiEditor = ref<AiEditor | null>(null);
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上
|
|
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上
|
|
|
const headers = ref(globalHeaders());
|
|
const headers = ref(globalHeaders());
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
|
/* 编辑器的内容 */
|
|
/* 编辑器的内容 */
|
|
|
- modelValue: propTypes.string,
|
|
|
|
|
|
|
+ modelValue: propTypes.string.def(''),
|
|
|
/* 高度 */
|
|
/* 高度 */
|
|
|
height: propTypes.number.def(400),
|
|
height: propTypes.number.def(400),
|
|
|
/* 最小高度 */
|
|
/* 最小高度 */
|
|
@@ -29,12 +29,12 @@ const props = defineProps({
|
|
|
});
|
|
});
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
-onMounted(() => {
|
|
|
|
|
- aiEditor = new AiEditor({
|
|
|
|
|
|
|
+const initEditor = () => {
|
|
|
|
|
+ aiEditor.value = new AiEditor({
|
|
|
element: divRef.value as Element,
|
|
element: divRef.value as Element,
|
|
|
placeholder: props.placeholder || '请输入内容',
|
|
placeholder: props.placeholder || '请输入内容',
|
|
|
- content: props.modelValue || '',
|
|
|
|
|
draggable: true,
|
|
draggable: true,
|
|
|
|
|
+ content: props.modelValue,
|
|
|
toolbarKeys: ["undo", "redo", "brush", "eraser",
|
|
toolbarKeys: ["undo", "redo", "brush", "eraser",
|
|
|
"|", "heading", "font-family", "font-size",
|
|
"|", "heading", "font-family", "font-size",
|
|
|
"|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
|
|
"|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
|
|
@@ -101,7 +101,7 @@ onMounted(() => {
|
|
|
uploaderEvent: {
|
|
uploaderEvent: {
|
|
|
onUploadBefore: (file, uploadUrl, headers) => {
|
|
onUploadBefore: (file, uploadUrl, headers) => {
|
|
|
console.log(file);
|
|
console.log(file);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
//监听视频上传之前,此方法可以不用回任何内容,但若返回 false,则终止上传
|
|
//监听视频上传之前,此方法可以不用回任何内容,但若返回 false,则终止上传
|
|
|
return handleBeforeUpload(file);
|
|
return handleBeforeUpload(file);
|
|
|
},
|
|
},
|
|
@@ -135,13 +135,19 @@ onMounted(() => {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- onChange:(aiEditor)=>{
|
|
|
|
|
- // 监听到用编辑器内容发生变化了,控制台打印编辑器的 html 内容...
|
|
|
|
|
- console.log(aiEditor.getHtml())
|
|
|
|
|
- emit('update:modelValue', aiEditor.getHtml());
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ onChange: (aiEditor) => {
|
|
|
|
|
+ // 监听到用编辑器内容发生变化了,控制台打印编辑器的 html 内容...
|
|
|
|
|
+ emit('update:modelValue', aiEditor.getHtml());
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|
|
|
|
|
+}
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ // 等待1s,确保modelValue有值
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ initEditor();
|
|
|
|
|
+ }, 1000);
|
|
|
})
|
|
})
|
|
|
|
|
+
|
|
|
// 图片上传前拦截
|
|
// 图片上传前拦截
|
|
|
const handleBeforeUpload = (file: any) => {
|
|
const handleBeforeUpload = (file: any) => {
|
|
|
const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
|
|
const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
|