实时预览HTML和CSS更改

Question

实时预览HTML和CSS更改

bak*_*kar 2 html javascript css wordpress jquery

我正在尝试在Wordpress插件中集成Live HTML和CSS元素预览。
我想出的基本结构如下，但它不起作用，可能是js错误...

这是JS代码：

<script type="text/javascript">
    $(function() {
        function GetHtml(){
                var html = $('.html').val();
                return html;
            }

        function GetCss(){
                var Css = $('.css').val();
                return Css;
            }

        $('.innerbox').live("keyup",function(){

            var targetp = $('#previewTarget')[0].contentWindow.document;
            targetp.open();
            targetp.close();

                var html = GetHtml();
                var css = GetCss();

                $('body',targetp).append(html);
                $('head', targetp).append('<style>' + css + '</style>');

            });
    });
</script>

Run Code Online (Sandbox Code Playgroud)

以下是html代码。

<div id="mainWrapper">
    <div id="box">
        <textarea class="innerbox html"></textarea>
        <textarea class="innerbox css"></textarea>

        <div class="innerbox preview">
            <iframe id="previewTarget">
                <!DOCTYPE html>
                <html lang="en">
                <head>
                <meta charset="utf-8">
                </head>
                <body>
                    <p>hey</p>
                </body>
                </html>
            </iframe>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

如果有人可以向我建议任何可以在编辑时启用CSS元素实时预览的jquery插件，那么将不胜感激...

提前致谢...

Answer 1

Mri*_*jay 5

.live该功能已从中删除，jquery 1.9因此不再jquery1.11.1使用.on。

$('.innerbox').on("keyup",function(){...})

Run Code Online (Sandbox Code Playgroud)

其他一切正常。

演示

归档时间：	11 年，1 月前
查看次数：	1223 次
最近记录：	11 年，1 月前