線上HTML預覽工具，貼上程式碼預覽頁面樣式

HTML預覽工具實作原理

這個線上HTML 預覽工具透過一個文字方塊（<textarea>）讓使用者輸入HTML 程式碼，並透過點擊「預覽」按鈕將輸入的HTML 渲染在新開啟的瀏覽器視窗中；點擊「清除」按鈕則清空文字方塊的內容。

核心原理是透過JavaScript 取得使用者輸入的HTML 內容並用 視窗.打開() 在新視窗展示，同時使用 文檔.寫入() 方法渲染HTML。樣式部分透過CSS 控制佈局和按鈕的外觀。

該工具簡潔且直觀，適用於簡單的HTML 程式碼測試和預覽。

HTML結構解析

<div id="html-preview">
    <textarea id="editor" placeholder="在這裡輸入HTML 程式碼..."></textarea>
    <div class="button-container">
        <button id="previewBtn">預覽</button>
        <button id="clearBtn">清除</button>
    </div>
</div>

外層容器 <div id="html-預覽">

• 這是整個預覽工具的外層容器，負責包裝文字框和按鈕。透過 id="html-預覽" 可以方便地用CSS 或JavaScript 選擇該容器進行樣式設定或操作。

編輯區 <textarea id="editor">

<textarea id="editor" placeholder="在这里输入 HTML 代码..."></textarea>

• 這是一個文字區域 (<textarea>) 元素，使用者可以在這裡輸入HTML 程式碼。
• id="編輯"：用於標識文字區域，以便後續JavaScript 操作。
• placeholder="在這裡輸入HTML 代碼..."：當文字方塊為空時，顯示的提示文本，告訴使用者應該輸入HTML 代碼。

按鈕容器 <div class="button-container">

<div class="button-container">
    <button id="previewBtn">預覽</button>
    <button id="clearBtn">清除</button>
</div>

• <div class="button-container">：包裹按鈕的容器，用於對按鈕進行佈局，確保按鈕在頁面中有一定的間距，並且能夠居中顯示。
• <button id="previewBtn">预览</button>：預覽按鈕，點擊後會顯示輸入的HTML 內容。
  • id="previewBtn"：用於識別該按鈕，後續JavaScript 可以透過此ID 取得並新增事件監聽。
• <button id="clearBtn">清除</button>：清除按鈕，點選後會清空輸入框中的內容。
  • id="clearBtn"：用於識別該按鈕，後續JavaScript 透過此ID 取得並新增事件監聽。

JavaScript結構

取得使用者輸入的HTML 程式碼

用戶在 <textarea> 中輸入HTML 程式碼，工具透過JavaScript 取得輸入的內容：

let htmlContent = editor.value;

這裡，編輯 是指向 <textarea> 元素的DOM 對象，編輯器值 取得的是使用者輸入的HTML 程式碼。

預覽按鈕的處理邏輯

點擊「預覽」按鈕會開啟一個新的瀏覽器窗口，並在其中展示輸入的HTML 程式碼：

const previewWindow = window.open("", "_blank");
previewWindow.document.open();
previewWindow.document.write(htmlContent);
previewWindow.document.close();

• 視窗.開啟（“”， “_blank”）；：開啟一個新視窗或標籤頁。
• 預覽視窗.文檔.開啟()； 和 預覽視窗.文件.關閉()；：這兩行分別開啟和關閉新視窗的文件流，確保HTML 內容可以正確渲染。
• 預覽視窗.document.write(html內容);：將使用者輸入的HTML 程式碼寫入新窗口，觸發HTML 渲染。

清除按鈕的處理邏輯

editor.value = "";

這行程式碼將 編輯（即 文字區域）的 價值 屬性設為空，從而清空使用者的輸入。

CSS樣式

#html-preview #editor {
    border: 2px solid #ccc;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    width: 100%;
    height: 400px;
    box-sizing: border-box;
}

#html-preview button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    font-size: 16px;
    margin: 5px;
    border-radius: 5px;
}

#html-preview #previewBtn {
    background-color: #4CAF50;
    color: white;
}

#html-preview #previewBtn:hover {
    background-color: #45a049;
}

#html-preview #clearBtn {
    background-color: #f44336;
    color: white;
}

#html-preview #clearBtn:hover {
    background-color: #e53935;
}

#html-preview .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

以上就是HTML預覽工具的實作原理與核心程式碼。