From 047c9b2cee8d306a10d0fb89b037c7336497988d Mon Sep 17 00:00:00 2001 From: liuzanying Date: Mon, 9 Oct 2023 13:44:01 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E9=93=BE=E6=8E=A5=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=89=93=E5=BC=80=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 42 +++++++++++++++++++++++++-- src/components/Tinymce.vue | 58 ++++++++++++++++++++++++++++---------- src/main.js | 1 + 3 files changed, 84 insertions(+), 17 deletions(-) diff --git a/src/App.vue b/src/App.vue index ecae7056..b0ea1ea8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,24 @@ - +
+ +
+ + + + @@ -23,8 +40,10 @@ export default { const route = useRoute(); const router = useRouter(); const store = useStore(); + const title = ref(''); + const show = ref(false); + const url = ref(''); const emitter = useEmitter(); - const appLoading = ref(false); const appLoadingDescription = ref('请您稍候~'); emitter.on('app-loading', (evt) => { @@ -64,10 +83,22 @@ export default { // } // }) // }) + const clickAction = (e) => { + if(e.target.getAttribute("data-linkType") === '1'){ + show.value = true; + title.value = e.target.innerText; + url.value = e.target.href; + e.preventDefault(); + } + } return { locale, appLoading, appLoadingDescription, + clickAction, + show, + url, + title, }; }, }; @@ -154,4 +185,11 @@ strong { .viewer-container { transition: all 0.01s !important; } + +.iframe { + flex: 1; + width: 100%; + height: 500px; + border: 0; +} diff --git a/src/components/Tinymce.vue b/src/components/Tinymce.vue index e06933c8..acb952b0 100644 --- a/src/components/Tinymce.vue +++ b/src/components/Tinymce.vue @@ -29,6 +29,13 @@ + + + 弹窗 + 新页面 + 当前页面 + + route.query.sn || ""); const fixation = ref(props.isFixation) - const { linkAddress, linkText, linkDialogVisible, linkDiglogOkHandle } = + const { linkAddress, linkText, linkType, linkDialogVisible, linkDiglogOkHandle } = linkDialog(fixation); - + console.log('linkType:1',linkType); const { d3Address, d3Width, @@ -412,6 +419,7 @@ export default { context, linkDialogVisible, linkAddress, + linkType, linkText, d3DialogVisible, d3Address, @@ -473,6 +481,7 @@ export default { editorId, linkAddress, linkText, + linkType, init, fileInput, content, @@ -524,6 +533,7 @@ function initTinymce(data) { linkDialogVisible, linkAddress, linkText, + linkType, d3DialogVisible, d3Address, d3Width, @@ -647,6 +657,7 @@ function initTinymce(data) { tinymce.editors[editor.id].selection.select(wrapperNode, true); linkText.value = wrapperNode.innerText; linkAddress.value = wrapperNode.href || ""; + linkType.value = wrapperNode.getAttribute("data-linkType") || "3"; } linkDialogVisible.value = true; }, @@ -699,6 +710,7 @@ function initTinymce(data) { paste_data_images: true, setup: function (editor) { editorId.value = editor.id; + linkType.value = editor.linkType; editor.ui.registry.addIcon("linkIcon", link); editor.ui.registry.addButton("linkButton", { icon: "linkIcon", @@ -712,11 +724,12 @@ function initTinymce(data) { tinymce.editors[editor.id].selection.select(wrapperNode, true); linkText.value = wrapperNode.innerText; linkAddress.value = wrapperNode.href || ""; + linkType.value = wrapperNode.getAttribute("data-linkType") || "3"; } linkDialogVisible.value = true; }, }); - + if(insertBlankCharacter) { editor.ui.registry.addIcon("insertBlankCharacter", insertBlankCharacterIcon); editor.ui.registry.addButton("insertBlankCharacter", { @@ -730,7 +743,7 @@ function initTinymce(data) { }, }); } - + commonFunc(editor); }, toolbar: @@ -844,6 +857,7 @@ function linkDialog(fixation) { const linkAddress = ref(""); const linkText = ref(""); // 用于显示 const linkDialogVisible = ref(false); + const linkType = ref("3") const linkDiglogOkHandle = (id) => { if (!linkAddress.value || !linkText.value) { message.info("请输入文字和链接地址"); @@ -852,29 +866,43 @@ function linkDialog(fixation) { if (!linkAddress.value.startsWith("http")) { linkAddress.value = `https://${linkAddress.value}`; } + let value = ""; // 插入链接前后加空格 if(fixation.value) { - tinymce.editors[id].execCommand( - "mceInsertContent", - false, - ` ${linkText.value} ` - ); - }else{ - tinymce.editors[id].execCommand( - "mceInsertContent", - false, - `${linkText.value}` - ); + value = ` ${linkText.value} `; + if (linkType.value === '2') { + value = ` ${linkText.value} `; + } else if (linkType.value === '1') { + value = ` ${linkText.value} `; + } + } else { + value = `${linkText.value}`; + if(linkType.value === '2'){ + value = `${linkText.value}`; + }else if(linkType.value === '1'){ + value = `${linkText.value}`; + } } + tinymce.editors[id].execCommand( + "mceInsertContent", + false, + `${value}`, + ); linkDialogVisible.value = false; linkAddress.value = ""; linkText.value = ""; + linkType.value = "3"; }; + const clickOutside = () => { + + } return { + linkType, linkAddress, linkText, linkDialogVisible, linkDiglogOkHandle, + clickOutside, }; } /** diff --git a/src/main.js b/src/main.js index fffd6e36..37337eac 100644 --- a/src/main.js +++ b/src/main.js @@ -32,6 +32,7 @@ app.use(VXETable); app.use(VueParticles); app.use(NutBig); app.use(lazyPlugin, {}); + app.directive("click-outside", { // 当被绑定的元素挂载到 DOM 中时…… mounted(el, binding) { From a9f6ee05bf48af584715859cd0a1b4480ceea151 Mon Sep 17 00:00:00 2001 From: liuzanying Date: Wed, 11 Oct 2023 15:51:27 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tinymce.vue | 24 +++++++++++-------- .../Design/fragement/QuestionContent.vue | 1 + .../Design/questions/paging/Paging.vue | 6 ++++- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/Tinymce.vue b/src/components/Tinymce.vue index acb952b0..10a82fd6 100644 --- a/src/components/Tinymce.vue +++ b/src/components/Tinymce.vue @@ -30,11 +30,16 @@ - - 弹窗 - 新页面 - 当前页面 - +
+ + 弹窗 + 新页面 + 当前页面 + +
+

{{ `${linkType === '1' ? '链接会覆盖在整体页面之上，在弹窗内显示，可避免页面跳转。' : + linkType === '2' ? '用户在PC端答题时，可以在新页签内显示链接内容，确保前一页的操作不丢失。' : + '当前的操作会对原页面的内容产生影响，建议开启断点续答后使用，避免跳回失败。'}` }}

 @@ -376,7 +381,6 @@ export default { const fixation = ref(props.isFixation) const { linkAddress, linkText, linkType, linkDialogVisible, linkDiglogOkHandle } = linkDialog(fixation); - console.log('linkType:1',linkType); const { d3Address, d3Width, @@ -657,7 +661,7 @@ function initTinymce(data) { tinymce.editors[editor.id].selection.select(wrapperNode, true); linkText.value = wrapperNode.innerText; linkAddress.value = wrapperNode.href || ""; - linkType.value = wrapperNode.getAttribute("data-linkType") || "3"; + linkType.value = wrapperNode.getAttribute("data-linkType") || "1"; } linkDialogVisible.value = true; }, @@ -724,7 +728,7 @@ function initTinymce(data) { tinymce.editors[editor.id].selection.select(wrapperNode, true); linkText.value = wrapperNode.innerText; linkAddress.value = wrapperNode.href || ""; - linkType.value = wrapperNode.getAttribute("data-linkType") || "3"; + linkType.value = wrapperNode.getAttribute("data-linkType") || "1"; } linkDialogVisible.value = true; }, @@ -857,7 +861,7 @@ function linkDialog(fixation) { const linkAddress = ref(""); const linkText = ref(""); // 用于显示 const linkDialogVisible = ref(false); - const linkType = ref("3") + const linkType = ref("1") const linkDiglogOkHandle = (id) => { if (!linkAddress.value || !linkText.value) { message.info("请输入文字和链接地址"); @@ -891,7 +895,7 @@ function linkDialog(fixation) { linkDialogVisible.value = false; linkAddress.value = ""; linkText.value = ""; - linkType.value = "3"; + linkType.value = "1"; }; const clickOutside = () => { diff --git a/src/views/planetDesign/Design/fragement/QuestionContent.vue b/src/views/planetDesign/Design/fragement/QuestionContent.vue index a10f5d12..d85120d7 100644 --- a/src/views/planetDesign/Design/fragement/QuestionContent.vue +++ b/src/views/planetDesign/Design/fragement/QuestionContent.vue @@ -220,6 +220,7 @@ :index="index" :active="pageIsActive(activeIndex, questionInfo.questions, element.page)" @removePage="removePageHandle(index)" + @selectPage="selectPageHandle(index)" />