diff --git a/src/App.vue b/src/App.vue index ecae7056..9c7118fd 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,16 @@ strong { .viewer-container { transition: all 0.01s !important; } + +.iframe { + flex: 1; + width: 100%; + height: 500px; + border: 0; +} + +.link-action-wrapper { + width: 100%; + height: 100%; +} diff --git a/src/components/Tinymce.vue b/src/components/Tinymce.vue index 4e086708..92e6a94f 100644 --- a/src/components/Tinymce.vue +++ b/src/components/Tinymce.vue @@ -29,6 +29,18 @@ + +
+ + 弹窗 + 新页面 + 当前页面 + +
+

{{ `${linkType === '1' ? '链接内容将在当前页面内弹窗显示。' : + linkType === '2' ? '链接内容将在新页签内显示,可切换页面回到问卷答题页。' : + '链接在当前页面打开,覆盖问卷答题页面,建议开启“断点续答”后使用。'}` }}

+
route.query.sn || ""); const fixation = ref(props.isFixation) - const { linkAddress, linkText, linkDialogVisible, linkDiglogOkHandle } = + const { linkAddress, linkText, linkType, linkDialogVisible, linkDiglogOkHandle } = linkDialog(fixation); - const { d3Address, d3Width, @@ -417,6 +428,7 @@ export default { context, linkDialogVisible, linkAddress, + linkType, linkText, d3DialogVisible, d3Address, @@ -478,6 +490,7 @@ export default { editorId, linkAddress, linkText, + linkType, init, fileInput, content, @@ -529,6 +542,7 @@ function initTinymce(data) { linkDialogVisible, linkAddress, linkText, + linkType, d3DialogVisible, d3Address, d3Width, @@ -652,6 +666,11 @@ 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") || "1"; + } else { + linkText.value = ""; + linkAddress.value = ""; + linkType.value = "1"; } linkDialogVisible.value = true; }, @@ -704,6 +723,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", @@ -717,6 +737,11 @@ 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") || "1"; + } else { + linkText.value = ""; + linkAddress.value = ""; + linkType.value = "1"; } linkDialogVisible.value = true; }, @@ -849,6 +874,7 @@ function linkDialog(fixation) { const linkAddress = ref(""); const linkText = ref(""); // 用于显示 const linkDialogVisible = ref(false); + const linkType = ref("1") const linkDiglogOkHandle = (id) => { if (!linkAddress.value || !linkText.value) { message.info("请输入文字和链接地址"); @@ -857,29 +883,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 = "1"; }; + 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) { diff --git a/src/views/planetDesign/Design/fragement/QuestionContent.vue b/src/views/planetDesign/Design/fragement/QuestionContent.vue index 97d672eb..a7186092 100644 --- a/src/views/planetDesign/Design/fragement/QuestionContent.vue +++ b/src/views/planetDesign/Design/fragement/QuestionContent.vue @@ -222,6 +222,7 @@ @click.stop="" @activePage="pitchOnHandle(element)" @removePage="removePageHandle(index)" + @selectPage="selectPageHandle(index)" />