Question

 $(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中显示结果，但textarea中的所有代码仅显示结果区域。

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

Answer 1

专门针对结果框添加到您的样式无法解决您的问题？

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

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

Answer 2

检查小提琴Here

做了一些调整。在'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美分

错误的HTML代码编辑器

2 个答案: