feat: 🚀 生产环境
This commit is contained in:
BIN
dist07-28.zip
Normal file
BIN
dist07-28.zip
Normal file
Binary file not shown.
@@ -29,8 +29,8 @@
|
||||
<QuillEditor
|
||||
id="mainEditor"
|
||||
ref="myQuillEditor"
|
||||
contentType="html"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@update:content="onContentChange"
|
||||
:options="options"
|
||||
/>
|
||||
@@ -53,7 +53,6 @@
|
||||
editable
|
||||
@edit="handleTabsEdit"
|
||||
@tab-change="handleTabChange"
|
||||
v-if="tabsData.length"
|
||||
>
|
||||
<!-- 标签页:标题支持编辑 -->
|
||||
<el-tab-pane
|
||||
@@ -113,8 +112,7 @@
|
||||
<script setup name="Editor">
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
// /computed
|
||||
import { getCurrentInstance, reactive, ref, toRaw, onMounted, nextTick } from "vue";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
// import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
@@ -128,7 +126,7 @@ let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot;
|
||||
// 自定义Blot
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
@@ -153,7 +151,7 @@ const activeEditor = ref("main"); // 跟踪当前活跃编辑器:main/tab-索
|
||||
// 标签页数据(新增key作为唯一标识,isEditing控制编辑状态)
|
||||
const tabsData = ref([]);
|
||||
// 标签页编辑器ref数组
|
||||
const tabEditors = reactive([]);
|
||||
const tabEditors = ref([]);
|
||||
// 标题编辑输入框的ref
|
||||
const editInputRefs = ref([]);
|
||||
const currentEditingTabsRef = ref(null);
|
||||
@@ -166,9 +164,7 @@ const props = defineProps({
|
||||
|
||||
// 主编辑器内容双向绑定
|
||||
const editorContent = computed({
|
||||
get: () => {
|
||||
return props.content;
|
||||
},
|
||||
get: () => props.content,
|
||||
set: val => {
|
||||
emit("update:content", val);
|
||||
}
|
||||
@@ -179,7 +175,6 @@ const myQuillEditor = ref(null); // 主编辑器ref
|
||||
const options = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
strict: false,
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
@@ -306,7 +301,7 @@ const handleHttpUpload = async options => {
|
||||
quill = rawQuillEditor.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
rawQuillEditor = toRaw(tabEditors[tabIndex]);
|
||||
rawQuillEditor = toRaw(tabEditors.value[tabIndex]);
|
||||
quill = rawQuillEditor.getQuill();
|
||||
}
|
||||
|
||||
@@ -442,7 +437,7 @@ const insertVideoToEditor = (videoUrl, coverUrl) => {
|
||||
quill = toRaw(myQuillEditor.value)?.getQuill();
|
||||
} else {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
quill = toRaw(tabEditors[tabIndex])?.getQuill();
|
||||
quill = toRaw(tabEditors.value[tabIndex])?.getQuill();
|
||||
}
|
||||
|
||||
if (quill) {
|
||||
@@ -489,7 +484,7 @@ const handleTabsEdit = (targetKey, action) => {
|
||||
// 删除标签页
|
||||
const index = tabsData.value.findIndex(item => item.key === targetKey);
|
||||
tabsData.value.splice(index, 1);
|
||||
tabEditors.splice(index, 1);
|
||||
tabEditors.value.splice(index, 1);
|
||||
editInputRefs.value.splice(index, 1);
|
||||
|
||||
// 调整活跃编辑器索引
|
||||
@@ -537,7 +532,6 @@ const finishEditTitle = index => {
|
||||
|
||||
// 其他方法(保持不变)
|
||||
const onContentChange = content => {
|
||||
console.log(content, "=content=");
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
};
|
||||
@@ -615,17 +609,19 @@ const loadTabsDataToEditor = tabs => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
initTitle();
|
||||
// 监听编辑按钮点击事件
|
||||
const editorEl = document.querySelector(".ql-editor");
|
||||
if (editorEl) {
|
||||
editorEl.addEventListener("edit-tabs", e => {
|
||||
console.log(1232, "测试");
|
||||
console.log(e.detail.blot, "=e.detail=");
|
||||
const tabsData = TabsBlot.value(e.detail.blot.domNode);
|
||||
console.log(tabsData, "=tabsData=");
|
||||
if (tabsData.length > 0) {
|
||||
// 保存当前编辑的标签页引用
|
||||
currentEditingTabsRef.value = e.detail.blot;
|
||||
console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value =");
|
||||
// 加载数据到弹窗
|
||||
loadTabsDataToEditor(tabsData);
|
||||
// 显示弹窗
|
||||
@@ -634,7 +630,6 @@ onMounted(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
clearEditor: () => {
|
||||
@@ -674,4 +669,3 @@ defineExpose({
|
||||
margin: -2px 0; /* 与标签对齐 */
|
||||
}
|
||||
</style>
|
||||
./quill-image1111
|
||||
|
||||
Reference in New Issue
Block a user