实现WYSIWYG编辑器预览样式独立并优化jQuery代码

我有一个基础的WYSIWYG编辑器，目前所有功能运行正常，但预览会显示Bootstrap或其他父级样式。我希望改用iframe来显示预览，使样式独立不受父级样式影响；同时希望优化JS代码，采用jQuery最佳编码实践，使用toggleClass等新的jQuery方法。

1. 用iframe实现样式隔离预览 #

iframe作为独立的浏览上下文，不会继承父页面的CSS样式，能彻底解决父级样式污染预览内容的问题。核心改动是将原预览div替换为iframe，每次切换预览时向iframe文档写入内容。

2. jQuery代码优化要点 #

• 使用toggleClass替代原生toggle()，更灵活控制元素显隐状态
• 提前缓存DOM元素引用，减少重复DOM查询
• 简化逻辑分支，提升代码可读性
• 用闭包封装逻辑，避免全局变量污染

<html>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<head>
    <style>
    .stool {
        cursor: pointer;
        user-select: none;
        text-transform: uppercase;
        z-index:999;
    }

    .hidden {
        display: none;
    }

    textarea {
        outline: none;
    }
    
    #w3review-preview {
        width: 100%;
        height: 75%;
        border: none;
    }
    </style>
</head>

<body class="p-3">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container position-relative border">
        <div class="toolbar mt-3">
            <small class="bg-light stool position-absolute top-0 end-0 px-2" id="preview">
                Preview
            </small>
            <small class="bg-light stool position-absolute top-0 end-0 px-2 hidden" id="html">
                HTML
            </small>
        </div>
        
        <div class="editor">
            <textarea id="w3review" class="m-0 p-0 border-0"  style="position:relative;width:100%;height:75%;resize: none; ">&lt;h3&gt;At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.&lt;/h3&gt;</textarea>
            <iframe id="w3review-preview" class="hidden"></iframe>
        </div>
    </div>
    
    
    <script type="text/javascript">
    $(function() {
        // 缓存DOM元素
        const $previewBtn = $('#preview');
        const $htmlBtn = $('#html');
        const $textarea = $('#w3review');
        const $previewIframe = $('#w3review-preview');
        let isPreviewMode = false;

        // 切换按钮显示状态
        function toggleButtons() {
            $previewBtn.toggleClass('hidden');
            $htmlBtn.toggleClass('hidden');
        }

        // 更新预览内容
        function updatePreview() {
            const iframeDoc = $previewIframe[0].contentDocument || $previewIframe[0].contentWindow.document;
            iframeDoc.open();
            iframeDoc.write($textarea.val());
            iframeDoc.close();
        }

        // 切换预览/编辑模式
        function toggleMode() {
            isPreviewMode = !isPreviewMode;
            $textarea.toggleClass('hidden');
            $previewIframe.toggleClass('hidden');
            
            if (isPreviewMode) {
                updatePreview();
            }
        }

        // 绑定按钮点击事件
        $('.stool').on('click', function() {
            toggleButtons();
            toggleMode();
        });
    });
    </script>

</body>

</html>

内容的提问来源于stack exchange，提问作者Code Guy