国产精品十八,午夜宅男免费,日韩视频福利

Text Control 控件教程：使用 MutationObserver 觀密報告預覽選項卡何時處于活動狀態

翻譯|行業資訊|編輯：胡濤|2024-07-30 15:40:16.127|閱讀 65 次

概述：本文主要介紹，Text Control 控件教程：使用 MutationObserver 觀密報告預覽選項卡何時處于活動狀態，歡迎查閱

TX Text Control 是一款功能類似于 MS Word 的文字處理控件，包括文檔創建、編輯、打印、郵件合并、格式轉換、拆分合并、導入導出、批量生成等功能。廣泛應用于企業文檔管理，網站內容發布，電子病歷中病案模板創建、病歷書寫、修改歷史、連續打印、病案歸檔等功能的實現。

TX Text Control 最新下載

考慮以下情況：您的應用程序中有一個外部“保存”按鈕，用于保存文檔編輯器中的當前文檔。此按鈕應僅在文檔處于“編輯”模式而非“預覽”模式時啟用，以允許用戶保存內容。預覽模式是一種在您設計模板時用數據填充插入的合并字段以預覽文檔的模式。

已啟用按鈕

當文檔處于預覽模式時，“保存”按鈕應該被禁用，如下面的屏幕截圖所示：

已禁用按鈕

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="http://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" onclick="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>