HTML代码编辑器出错

bugged HTML code editor

本文关键字：出错 编辑器 代码 HTML      更新时间：2023-09-26

 $(document).ready(function() {
    	
    	var btn = $('.gen');
    	btn.on('click', function() {
    		var areaTxt = $('.textarea').val();
    		var div = $('.result');
    		div.html(areaTxt);
    	});
    	
    });
.result {
    border: 1px solid red;
    width: 300px;
    height: 150px;
    }
    .textarea {
    	width: 300px;
    	height: 150px;
    }
<!DOCTYPE>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <title>Untitled Document</title>  
    </head>
    <body>
    <textarea class="textarea"></textarea>
    <input type="button" class="gen" value="generate">
    <div class="result"></div>
    </body>
    </html>

我创建了一个简单的HTML代码编辑器。问题是，当我为所有类或div添加样式时，也会影响我的代码编辑器。

我想要像w3school的编辑一样的东西。只是在iframe中显示结果，但文本区域中的所有代码只影响结果区域。

http://jsfiddle.net/sederther/4x6dxrs5/

添加到您的样式中专门用于结果框不会解决您的问题吗？

.result p {
    font-size:8px;
    font-family:Georgia;
}
.result h1{
    color:red;
    font-size:26px;
    font-family:Georgia;
}

像这样：http://jsfiddle.net/4x6dxrs5/2/

检查小提琴此处

只是做了一些调整。向"textarea"添加了一个伪属性，并为该属性设置了一个值。然后我循环遍历元素并检查属性，如果找到，我将重置所有应用的样式。

$(document).ready(function() {
        var btn = $('.gen');
        btn.on('click', function() {
            var areaTxt = $('.textarea').val();
            var div = $('.result');
            div.html(areaTxt);

            //Code Addtion
            $("textarea").each(function(){
                var attr = 
                $(this).attr('dataref');
                if (typeof attr !== typeof undefined && attr !== false && attr == 'source') {
$(this).attr('style', 'background-color: #eee !important');
}
            })
        });
    });

在这种情况下，我将循环所有的"textareas"，并检查它是否具有"dataref"属性以及值是否等于source。如果是，则重置其样式。我知道以类似的方式处理所有元素会很乏味，但如果不使用iframe，这是可以解决的。

我的2美分

相关文章：