Text Control 控件教程：使用 MutationObserver 观密报告预览选项卡何时处于活动状态

慧都小妮子

于 2024-07-30 15:56:46 发布

阅读量609

点赞数 7

文章标签：前端 java javascript text control

本文链接：https://blog.csdn.net/m0_67129275/article/details/140799052

版权

TX Text Control 是一款功能类似于 MS Word 的文字处理控件，包括文档创建、编辑、打印、邮件合并、格式转换、拆分合并、导入导出、批量生成等功能。广泛应用于企业文档管理，网站内容发布，电子病历中病案模板创建、病历书写、修改历史、连续打印、病案归档等功能的实现。

考虑以下情况：您的应用程序中有一个外部“保存”按钮，用于保存文档编辑器中的当前文档。此按钮应仅在文档处于“编辑”模式而非“预览”模式时启用，以允许用户保存内容。预览模式是一种在您设计模板时用数据填充插入的合并字段以预览文档的模式。

已启用按钮

当文档处于预览模式时，“保存”按钮应该被禁用，如下面的屏幕截图所示：

已禁用按钮

MutationObserver API

实现此目的的一种方法是使用MutationObserver API。该MutationObserver接口提供了监视 DOM 树所做更改的功能。当检测到更改时，观察者将调用指定的回调函数。这对于检测 JavaScript 对 DOM 所做的更改非常有用，例如当文档模式从预览更改为编辑时。

在ribbonTabsLoaded事件处理程序中，您可以创建一个新MutationObserver实例并观察ribbonGroupMailMergePreview元素的变化。当ribbonGroupMailMergePreview元素可见时（即文档处于预览模式），您可以禁用“保存”按钮。当ribbonGroupMailMergePreview元素不可见时（即文档处于编辑模式），您可以启用“保存”按钮。

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

TXTextControl.addEventListener("ribbonTabsLoaded", function () {

targetNode = document.getElementById('ribbonGroupMailMergePreview');

// Start observing the target node for configured mutations
if (targetNode) {
observer.observe(targetNode, config);
// Initial check
console.log(`Initial visibility of #ribbonGroupMailMergePreview: ${checkVisibility(targetNode)}`);
} else {
console.error('Element #ribbonGroupMailMergePreview not found');
}
});

每当检测到元素发生变化时，就会调用回调函数ribbonGroupMailMergePreview。该函数将检查ribbonGroupMailMergePreview元素是否可见，并相应地启用或禁用“保存”按钮。

// Function to check visibility
function checkVisibility(element) {
const style = window.getComputedStyle(element);
return style && style.display !== 'none' && style.visibility !== 'hidden';
}

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' || mutation.type === 'childList') {
// Check visibility whenever an attribute or child list changes
const isVisible = checkVisibility(targetNode);

if (isVisible) {
document.getElementById('saveBtn').disabled = true;
} else {
document.getElementById('saveBtn').disabled = false;
}
}
}
};

此示例的完整 kbd 在此处：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TX Text Control Document Editor from JS</title>
<script
src="https://backend.textcontrol.com/api/TXWebSocket/GetResource?name=tx-document-editor.min.js">
</script>
<style>

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

button {
margin-top: 20px;
}

#txDocumentEditor {
height: 600px;
width: 800px;
}

</style>
</head>
<body>

<div id="txDocumentEditor"></div>

<button id="saveBtn" οnclick="save()">Save Document</button>

<script>

var targetNode = null;

TXTextControl.init({
containerID: "txDocumentEditor",
webSocketURL: "wss://backend.textcontrol.com/api/TXWebSocket?access-token="
});

var customerJson = [{
"name": "John Doe",
"address": "1234 Elm Street",
"city": "Austin",
"state": "TX",
"zip": "78701"
}];

TXTextControl.addEventListener("ribbonTabsLoaded", function () {

targetNode = document.getElementById('ribbonGroupMailMergePreview');

// Start observing the target node for configured mutations
if (targetNode) {
observer.observe(targetNode, config);
// Initial check
console.log(`Initial visibility of #ribbonGroupMailMergePreview: ${checkVisibility(targetNode)}`);
} else {
console.error('Element #ribbonGroupMailMergePreview not found');
}
});

TXTextControl.addEventListener("textControlLoaded", function () {
TXTextControl.loadJsonData(JSON.stringify(customerJson));
});

function save() {
TXTextControl.saveDocument(TXTextControl.StreamType.HTMLFormat, function (data) {
console.log(data);
});
}

// Function to check visibility
function checkVisibility(element) {
const style = window.getComputedStyle(element);
return style && style.display !== 'none' && style.visibility !== 'hidden';
}

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' || mutation.type === 'childList') {
// Check visibility whenever an attribute or child list changes
const isVisible = checkVisibility(targetNode);

if (isVisible) {
document.getElementById('saveBtn').disabled = true;
} else {
document.getElementById('saveBtn').disabled = false;
}
}
}
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

</script>

</body>
</html>

结论

该MutationObserverAPI 是用于检测 DOM 树更改的强大工具。在此示例中，我们使用了根据特定元素的MutationObserver可见性启用或禁用“保存”按钮。此技术可应用于需要响应 DOM 更改的各种场景。

慧都小妮子

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Text Control 控件教程：使用 MutationObserver 观密报告预览选项卡何时处于活动状态

本文主要介绍，Text Control 控件教程：使用 MutationObserver 观密报告预览选项卡何时处于活动状态，欢迎查阅
复制链接

扫一扫