关键字
简介
示例代码
color
文字颜色
示例代码
text-align
对齐
示例代码
text-decoration
文本修饰
示例代码
line-height
行间距
示例代码
letter-spacing
字符间距
示例代码
word-spacing
单词间距
示例代码
text-indent
首行缩进
示例代码
text-transform
大小写
示例代码
white-space
空白格
示例代码
示例
1
:
文字颜色
示例
2
:
对齐
示例
3
:
文本修饰
示例
4
:
行间距
示例
5
:
字符间距
示例
6
:
单词间距
示例
7
:
首行缩进
示例
8
:
大小写
示例
9
:
空白格
属性名color
");
window.frames["iframe_show452"].document.write(decodeHtml($("textarea#stepcodeTextarea452").val()));
window.frames["iframe_show452"].document.close();
$(window.frames["iframe_show452"]).load(function(){
$("#iframe_show452").height($("#iframe_show452").contents().find("body").height()+showittryitheight);
});
$("#iframe_show452").height($("#iframe_show452").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
div#colorful{
color:pink
}
</style>
<div id="colorful">
粉红色
</div>
<style>
div#colorful{
color:pink
}
</style>
<div id="colorful">
粉红色
</div>
");
window.frames["iframe452"].document.write(decodeHtml(code452));
window.frames["iframe452"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe452"]).load(function(){
$("#iframe452").height($("#iframe452").contents().find("body").height()+showittryitheight);
});
$("#iframe452").height($("#iframe452").contents().find("body").height()+showittryitheight);
alreadyWriteCode452 = code452;
$("#rendering452").hide();
$("#rendered452").show();
}
var tRereshRetry2DemoPanel452 = setInterval(rereshRetry2DemoPanel452,1000);
var binded452 = false;
$("textarea#stepcodeTextarea452").keyup(function(){
if(!binded452){
$(window).bind('beforeunload',function(){
binded452 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code452 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code452!=newCode){
// window.frames["iframe452"].document.write("
");
// window.frames["iframe452"].document.write(decodeHtml($("textarea#stepcodeTextarea452").val()));
// window.frames["iframe452"].document.close();
// $(window.frames["iframe452"]).load(function(){
// $("#iframe452").height($("#iframe452").contents().find("body").height()+showittryitheight);
// });
// code452 = newCode;
// }
});
$(".tryButton452").click(function(){
$("#tryDiv452").show();
$("#stepcodeTextarea452").focus();
$("#stepcodeTextarea452").height(200);
$("#iframe452").height(0);
window.frames["iframe452"].document.write("
");
window.frames["iframe452"].document.write(decodeHtml($("textarea#stepcodeTextarea452").val()));
window.frames["iframe452"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe452"]).load(function(){
$("#iframe452").height($("#iframe452").contents().find("body").height()+showittryitheight);
});
$("#iframe452").height($("#iframe452").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor452.focus();
editor452.setSize(null, "250");
$("#rendering452").hide();
$("#rendered452").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor452 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea452"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor452.on("change",function(doc){
if(!binded452){
$(window).bind('beforeunload',function(){
binded452 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code452 = newCode;
$("textarea#stepcodeTextarea452").val(newCode);
if(alreadyWriteCode452!=code452){
lastModifedTime452 = new Date().getTime();
$("#rendering452").show();
$("#rendered452").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor452 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor452.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv452").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经
粑 在其边框上了，对齐是看不出效果来的
使用了后面的样式风格，让div和span的边框显露出来，便于理解本知识点
用到了
边框 和
外边距
");
window.frames["iframe_show453"].document.write(decodeHtml($("textarea#stepcodeTextarea453").val()));
window.frames["iframe_show453"].document.close();
$(window.frames["iframe_show453"]).load(function(){
$("#iframe_show453").height($("#iframe_show453").contents().find("body").height()+showittryitheight);
});
$("#iframe_show453").height($("#iframe_show453").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
div#left{
text-align:left;
}
/*让div和span的边框显露出来，便于理解本知识点*/
div,span{
border: 1px gray solid;
margin:10px;
}
div#right{
text-align:right;
}
div#center{
text-align:center;
}
span#right{
text-align:right;
}
</style>
<div id="left">
左对齐
</div>
<div id="right">
右对齐
</div>
<div id="center">
居中
</div>
<span id="right">
span看不出右对齐效果
</span>
<style>
div#left{
text-align:left;
}
/*让div和span的边框显露出来，便于理解本知识点*/
div,span{
border: 1px gray solid;
margin:10px;
}
div#right{
text-align:right;
}
div#center{
text-align:center;
}
span#right{
text-align:right;
}
</style>
<div id="left">
左对齐
</div>
<div id="right">
右对齐
</div>
<div id="center">
居中
</div>
<span id="right">
span看不出右对齐效果
</span>
");
window.frames["iframe453"].document.write(decodeHtml(code453));
window.frames["iframe453"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe453"]).load(function(){
$("#iframe453").height($("#iframe453").contents().find("body").height()+showittryitheight);
});
$("#iframe453").height($("#iframe453").contents().find("body").height()+showittryitheight);
alreadyWriteCode453 = code453;
$("#rendering453").hide();
$("#rendered453").show();
}
var tRereshRetry2DemoPanel453 = setInterval(rereshRetry2DemoPanel453,1000);
var binded453 = false;
$("textarea#stepcodeTextarea453").keyup(function(){
if(!binded453){
$(window).bind('beforeunload',function(){
binded453 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code453 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code453!=newCode){
// window.frames["iframe453"].document.write("
");
// window.frames["iframe453"].document.write(decodeHtml($("textarea#stepcodeTextarea453").val()));
// window.frames["iframe453"].document.close();
// $(window.frames["iframe453"]).load(function(){
// $("#iframe453").height($("#iframe453").contents().find("body").height()+showittryitheight);
// });
// code453 = newCode;
// }
});
$(".tryButton453").click(function(){
$("#tryDiv453").show();
$("#stepcodeTextarea453").focus();
$("#stepcodeTextarea453").height(200);
$("#iframe453").height(0);
window.frames["iframe453"].document.write("
");
window.frames["iframe453"].document.write(decodeHtml($("textarea#stepcodeTextarea453").val()));
window.frames["iframe453"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe453"]).load(function(){
$("#iframe453").height($("#iframe453").contents().find("body").height()+showittryitheight);
});
$("#iframe453").height($("#iframe453").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor453.focus();
editor453.setSize(null, "250");
$("#rendering453").hide();
$("#rendered453").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor453 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea453"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor453.on("change",function(doc){
if(!binded453){
$(window).bind('beforeunload',function(){
binded453 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code453 = newCode;
$("textarea#stepcodeTextarea453").val(newCode);
if(alreadyWriteCode453!=code453){
lastModifedTime453 = new Date().getTime();
$("#rendering453").show();
$("#rendered453").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor453 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor453.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv453").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
属性：text-decoration
");
window.frames["iframe_show454"].document.write(decodeHtml($("textarea#stepcodeTextarea454").val()));
window.frames["iframe_show454"].document.close();
$(window.frames["iframe_show454"]).load(function(){
$("#iframe_show454").height($("#iframe_show454").contents().find("body").height()+showittryitheight);
});
$("#iframe_show454").height($("#iframe_show454").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="http://127.0.0.1/">默认的超链</a>
<a class="a" href="http://127.0.0.1/">去掉了下划线的超链</a>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="http://127.0.0.1/">默认的超链</a>
<a class="a" href="http://127.0.0.1/">去掉了下划线的超链</a>
");
window.frames["iframe454"].document.write(decodeHtml(code454));
window.frames["iframe454"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe454"]).load(function(){
$("#iframe454").height($("#iframe454").contents().find("body").height()+showittryitheight);
});
$("#iframe454").height($("#iframe454").contents().find("body").height()+showittryitheight);
alreadyWriteCode454 = code454;
$("#rendering454").hide();
$("#rendered454").show();
}
var tRereshRetry2DemoPanel454 = setInterval(rereshRetry2DemoPanel454,1000);
var binded454 = false;
$("textarea#stepcodeTextarea454").keyup(function(){
if(!binded454){
$(window).bind('beforeunload',function(){
binded454 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code454 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code454!=newCode){
// window.frames["iframe454"].document.write("
");
// window.frames["iframe454"].document.write(decodeHtml($("textarea#stepcodeTextarea454").val()));
// window.frames["iframe454"].document.close();
// $(window.frames["iframe454"]).load(function(){
// $("#iframe454").height($("#iframe454").contents().find("body").height()+showittryitheight);
// });
// code454 = newCode;
// }
});
$(".tryButton454").click(function(){
$("#tryDiv454").show();
$("#stepcodeTextarea454").focus();
$("#stepcodeTextarea454").height(200);
$("#iframe454").height(0);
window.frames["iframe454"].document.write("
");
window.frames["iframe454"].document.write(decodeHtml($("textarea#stepcodeTextarea454").val()));
window.frames["iframe454"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe454"]).load(function(){
$("#iframe454").height($("#iframe454").contents().find("body").height()+showittryitheight);
});
$("#iframe454").height($("#iframe454").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor454.focus();
editor454.setSize(null, "250");
$("#rendering454").hide();
$("#rendered454").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor454 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea454"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor454.on("change",function(doc){
if(!binded454){
$(window).bind('beforeunload',function(){
binded454 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code454 = newCode;
$("textarea#stepcodeTextarea454").val(newCode);
if(alreadyWriteCode454!=code454){
lastModifedTime454 = new Date().getTime();
$("#rendering454").show();
$("#rendered454").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor454 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor454.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv454").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
");
window.frames["iframe_show455"].document.write(decodeHtml($("textarea#stepcodeTextarea455").val()));
window.frames["iframe_show455"].document.close();
$(window.frames["iframe_show455"]).load(function(){
$("#iframe_show455").height($("#iframe_show455").contents().find("body").height()+showittryitheight);
});
$("#iframe_show455").height($("#iframe_show455").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
p{
width:200px;
}
.p{
line-height:200%;
}
</style>
<p>
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
</p>
<p class="p">
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
</p>
<style>
p{
width:200px;
}
.p{
line-height:200%;
}
</style>
<p>
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
默认行间距
</p>
<p class="p">
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
200%行间距
</p>
");
window.frames["iframe455"].document.write(decodeHtml(code455));
window.frames["iframe455"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe455"]).load(function(){
$("#iframe455").height($("#iframe455").contents().find("body").height()+showittryitheight);
});
$("#iframe455").height($("#iframe455").contents().find("body").height()+showittryitheight);
alreadyWriteCode455 = code455;
$("#rendering455").hide();
$("#rendered455").show();
}
var tRereshRetry2DemoPanel455 = setInterval(rereshRetry2DemoPanel455,1000);
var binded455 = false;
$("textarea#stepcodeTextarea455").keyup(function(){
if(!binded455){
$(window).bind('beforeunload',function(){
binded455 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code455 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code455!=newCode){
// window.frames["iframe455"].document.write("
");
// window.frames["iframe455"].document.write(decodeHtml($("textarea#stepcodeTextarea455").val()));
// window.frames["iframe455"].document.close();
// $(window.frames["iframe455"]).load(function(){
// $("#iframe455").height($("#iframe455").contents().find("body").height()+showittryitheight);
// });
// code455 = newCode;
// }
});
$(".tryButton455").click(function(){
$("#tryDiv455").show();
$("#stepcodeTextarea455").focus();
$("#stepcodeTextarea455").height(200);
$("#iframe455").height(0);
window.frames["iframe455"].document.write("
");
window.frames["iframe455"].document.write(decodeHtml($("textarea#stepcodeTextarea455").val()));
window.frames["iframe455"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe455"]).load(function(){
$("#iframe455").height($("#iframe455").contents().find("body").height()+showittryitheight);
});
$("#iframe455").height($("#iframe455").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor455.focus();
editor455.setSize(null, "250");
$("#rendering455").hide();
$("#rendered455").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor455 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea455"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor455.on("change",function(doc){
if(!binded455){
$(window).bind('beforeunload',function(){
binded455 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code455 = newCode;
$("textarea#stepcodeTextarea455").val(newCode);
if(alreadyWriteCode455!=code455){
lastModifedTime455 = new Date().getTime();
$("#rendering455").show();
$("#rendered455").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor455 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor455.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv455").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
");
window.frames["iframe_show456"].document.write(decodeHtml($("textarea#stepcodeTextarea456").val()));
window.frames["iframe_show456"].document.close();
$(window.frames["iframe_show456"]).load(function(){
$("#iframe_show456").height($("#iframe_show456").contents().find("body").height()+showittryitheight);
});
$("#iframe_show456").height($("#iframe_show456").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
p{
width:200px;
}
.p{
letter-spacing:2;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<style>
p{
width:200px;
}
.p{
letter-spacing:2;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
");
window.frames["iframe456"].document.write(decodeHtml(code456));
window.frames["iframe456"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe456"]).load(function(){
$("#iframe456").height($("#iframe456").contents().find("body").height()+showittryitheight);
});
$("#iframe456").height($("#iframe456").contents().find("body").height()+showittryitheight);
alreadyWriteCode456 = code456;
$("#rendering456").hide();
$("#rendered456").show();
}
var tRereshRetry2DemoPanel456 = setInterval(rereshRetry2DemoPanel456,1000);
var binded456 = false;
$("textarea#stepcodeTextarea456").keyup(function(){
if(!binded456){
$(window).bind('beforeunload',function(){
binded456 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code456 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code456!=newCode){
// window.frames["iframe456"].document.write("
");
// window.frames["iframe456"].document.write(decodeHtml($("textarea#stepcodeTextarea456").val()));
// window.frames["iframe456"].document.close();
// $(window.frames["iframe456"]).load(function(){
// $("#iframe456").height($("#iframe456").contents().find("body").height()+showittryitheight);
// });
// code456 = newCode;
// }
});
$(".tryButton456").click(function(){
$("#tryDiv456").show();
$("#stepcodeTextarea456").focus();
$("#stepcodeTextarea456").height(200);
$("#iframe456").height(0);
window.frames["iframe456"].document.write("
");
window.frames["iframe456"].document.write(decodeHtml($("textarea#stepcodeTextarea456").val()));
window.frames["iframe456"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe456"]).load(function(){
$("#iframe456").height($("#iframe456").contents().find("body").height()+showittryitheight);
});
$("#iframe456").height($("#iframe456").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor456.focus();
editor456.setSize(null, "250");
$("#rendering456").hide();
$("#rendered456").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor456 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea456"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor456.on("change",function(doc){
if(!binded456){
$(window).bind('beforeunload',function(){
binded456 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code456 = newCode;
$("textarea#stepcodeTextarea456").val(newCode);
if(alreadyWriteCode456!=code456){
lastModifedTime456 = new Date().getTime();
$("#rendering456").show();
$("#rendered456").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor456 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor456.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv456").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
");
window.frames["iframe_show457"].document.write(decodeHtml($("textarea#stepcodeTextarea457").val()));
window.frames["iframe_show457"].document.close();
$(window.frames["iframe_show457"]).load(function(){
$("#iframe_show457").height($("#iframe_show457").contents().find("body").height()+showittryitheight);
});
$("#iframe_show457").height($("#iframe_show457").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
p{
width:200px;
}
.p{
word-spacing:10;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<style>
p{
width:200px;
}
.p{
word-spacing:10;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
");
window.frames["iframe457"].document.write(decodeHtml(code457));
window.frames["iframe457"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe457"]).load(function(){
$("#iframe457").height($("#iframe457").contents().find("body").height()+showittryitheight);
});
$("#iframe457").height($("#iframe457").contents().find("body").height()+showittryitheight);
alreadyWriteCode457 = code457;
$("#rendering457").hide();
$("#rendered457").show();
}
var tRereshRetry2DemoPanel457 = setInterval(rereshRetry2DemoPanel457,1000);
var binded457 = false;
$("textarea#stepcodeTextarea457").keyup(function(){
if(!binded457){
$(window).bind('beforeunload',function(){
binded457 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code457 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code457!=newCode){
// window.frames["iframe457"].document.write("
");
// window.frames["iframe457"].document.write(decodeHtml($("textarea#stepcodeTextarea457").val()));
// window.frames["iframe457"].document.close();
// $(window.frames["iframe457"]).load(function(){
// $("#iframe457").height($("#iframe457").contents().find("body").height()+showittryitheight);
// });
// code457 = newCode;
// }
});
$(".tryButton457").click(function(){
$("#tryDiv457").show();
$("#stepcodeTextarea457").focus();
$("#stepcodeTextarea457").height(200);
$("#iframe457").height(0);
window.frames["iframe457"].document.write("
");
window.frames["iframe457"].document.write(decodeHtml($("textarea#stepcodeTextarea457").val()));
window.frames["iframe457"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe457"]).load(function(){
$("#iframe457").height($("#iframe457").contents().find("body").height()+showittryitheight);
});
$("#iframe457").height($("#iframe457").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor457.focus();
editor457.setSize(null, "250");
$("#rendering457").hide();
$("#rendered457").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor457 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea457"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor457.on("change",function(doc){
if(!binded457){
$(window).bind('beforeunload',function(){
binded457 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code457 = newCode;
$("textarea#stepcodeTextarea457").val(newCode);
if(alreadyWriteCode457!=code457){
lastModifedTime457 = new Date().getTime();
$("#rendering457").show();
$("#rendered457").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor457 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor457.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv457").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
");
window.frames["iframe_show458"].document.write(decodeHtml($("textarea#stepcodeTextarea458").val()));
window.frames["iframe_show458"].document.close();
$(window.frames["iframe_show458"]).load(function(){
$("#iframe_show458").height($("#iframe_show458").contents().find("body").height()+showittryitheight);
});
$("#iframe_show458").height($("#iframe_show458").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
p{
width:200px;
}
.p{
text-indent:50;
}
</style>
<p>
没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
</p>
<p class="p">
有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段
文字
</p>
<style>
p{
width:200px;
}
.p{
text-indent:50;
}
</style>
<p>
没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
</p>
<p class="p">
有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段
文字
</p>
");
window.frames["iframe458"].document.write(decodeHtml(code458));
window.frames["iframe458"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe458"]).load(function(){
$("#iframe458").height($("#iframe458").contents().find("body").height()+showittryitheight);
});
$("#iframe458").height($("#iframe458").contents().find("body").height()+showittryitheight);
alreadyWriteCode458 = code458;
$("#rendering458").hide();
$("#rendered458").show();
}
var tRereshRetry2DemoPanel458 = setInterval(rereshRetry2DemoPanel458,1000);
var binded458 = false;
$("textarea#stepcodeTextarea458").keyup(function(){
if(!binded458){
$(window).bind('beforeunload',function(){
binded458 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code458 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code458!=newCode){
// window.frames["iframe458"].document.write("
");
// window.frames["iframe458"].document.write(decodeHtml($("textarea#stepcodeTextarea458").val()));
// window.frames["iframe458"].document.close();
// $(window.frames["iframe458"]).load(function(){
// $("#iframe458").height($("#iframe458").contents().find("body").height()+showittryitheight);
// });
// code458 = newCode;
// }
});
$(".tryButton458").click(function(){
$("#tryDiv458").show();
$("#stepcodeTextarea458").focus();
$("#stepcodeTextarea458").height(200);
$("#iframe458").height(0);
window.frames["iframe458"].document.write("
");
window.frames["iframe458"].document.write(decodeHtml($("textarea#stepcodeTextarea458").val()));
window.frames["iframe458"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe458"]).load(function(){
$("#iframe458").height($("#iframe458").contents().find("body").height()+showittryitheight);
});
$("#iframe458").height($("#iframe458").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor458.focus();
editor458.setSize(null, "250");
$("#rendering458").hide();
$("#rendered458").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor458 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea458"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor458.on("change",function(doc){
if(!binded458){
$(window).bind('beforeunload',function(){
binded458 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code458 = newCode;
$("textarea#stepcodeTextarea458").val(newCode);
if(alreadyWriteCode458!=code458){
lastModifedTime458 = new Date().getTime();
$("#rendering458").show();
$("#rendered458").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor458 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor458.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv458").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
属性：text-transform
");
window.frames["iframe_show459"].document.write(decodeHtml($("textarea#stepcodeTextarea459").val()));
window.frames["iframe_show459"].document.close();
$(window.frames["iframe_show459"]).load(function(){
$("#iframe_show459").height($("#iframe_show459").contents().find("body").height()+showittryitheight);
});
$("#iframe_show459").height($("#iframe_show459").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}
</style>
<p class="u">
abcD
</p>
<p class="c">
abcD
</p>
<p class="l">
abcD
</p>
<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}
</style>
<p class="u">
abcD
</p>
<p class="c">
abcD
</p>
<p class="l">
abcD
</p>
");
window.frames["iframe459"].document.write(decodeHtml(code459));
window.frames["iframe459"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe459"]).load(function(){
$("#iframe459").height($("#iframe459").contents().find("body").height()+showittryitheight);
});
$("#iframe459").height($("#iframe459").contents().find("body").height()+showittryitheight);
alreadyWriteCode459 = code459;
$("#rendering459").hide();
$("#rendered459").show();
}
var tRereshRetry2DemoPanel459 = setInterval(rereshRetry2DemoPanel459,1000);
var binded459 = false;
$("textarea#stepcodeTextarea459").keyup(function(){
if(!binded459){
$(window).bind('beforeunload',function(){
binded459 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code459 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code459!=newCode){
// window.frames["iframe459"].document.write("
");
// window.frames["iframe459"].document.write(decodeHtml($("textarea#stepcodeTextarea459").val()));
// window.frames["iframe459"].document.close();
// $(window.frames["iframe459"]).load(function(){
// $("#iframe459").height($("#iframe459").contents().find("body").height()+showittryitheight);
// });
// code459 = newCode;
// }
});
$(".tryButton459").click(function(){
$("#tryDiv459").show();
$("#stepcodeTextarea459").focus();
$("#stepcodeTextarea459").height(200);
$("#iframe459").height(0);
window.frames["iframe459"].document.write("
");
window.frames["iframe459"].document.write(decodeHtml($("textarea#stepcodeTextarea459").val()));
window.frames["iframe459"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe459"]).load(function(){
$("#iframe459").height($("#iframe459").contents().find("body").height()+showittryitheight);
});
$("#iframe459").height($("#iframe459").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor459.focus();
editor459.setSize(null, "250");
$("#rendering459").hide();
$("#rendered459").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor459 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea459"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor459.on("change",function(doc){
if(!binded459){
$(window).bind('beforeunload',function(){
binded459 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code459 = newCode;
$("textarea#stepcodeTextarea459").val(newCode);
if(alreadyWriteCode459!=code459){
lastModifedTime459 = new Date().getTime();
$("#rendering459").show();
$("#rendered459").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor459 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor459.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv459").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
属性：white-space
值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于
pre标签 ,如果长度超出父容器也
不会换行 。
pre-wrap 有多少空白格，显示多少空白格，相当于
pre标签 ,如果长度超出父容器，
会换行 。
nowrap 一直不换行，直到使用br
");
window.frames["iframe_show460"].document.write(decodeHtml($("textarea#stepcodeTextarea460").val()));
window.frames["iframe_show460"].document.close();
$(window.frames["iframe_show460"]).load(function(){
$("#iframe_show460").height($("#iframe_show460").contents().find("body").height()+showittryitheight);
});
$("#iframe_show460").height($("#iframe_show460").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<style>
p.n {white-space:normal}
p.p {white-space:pre}
p.pw {white-space:pre-wrap}
p.nw {white-space:nowrap}
</style>
<p class="n">
在默认情况下，多个 空白格或者
换行符
会被 合并成一个空白格
</p>
<p class="p">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="pw">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="nw">
不会换行
不会换行
不会换行
不会换行
不会换行
不会换行
直到br<br/>才换行
</p>
<style>
p.n {white-space:normal}
p.p {white-space:pre}
p.pw {white-space:pre-wrap}
p.nw {white-space:nowrap}
</style>
<p class="n">
在默认情况下，多个 空白格或者
换行符
会被 合并成一个空白格
</p>
<p class="p">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="pw">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="nw">
不会换行
不会换行
不会换行
不会换行
不会换行
不会换行
直到br<br/>才换行
</p>
");
window.frames["iframe460"].document.write(decodeHtml(code460));
window.frames["iframe460"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe460"]).load(function(){
$("#iframe460").height($("#iframe460").contents().find("body").height()+showittryitheight);
});
$("#iframe460").height($("#iframe460").contents().find("body").height()+showittryitheight);
alreadyWriteCode460 = code460;
$("#rendering460").hide();
$("#rendered460").show();
}
var tRereshRetry2DemoPanel460 = setInterval(rereshRetry2DemoPanel460,1000);
var binded460 = false;
$("textarea#stepcodeTextarea460").keyup(function(){
if(!binded460){
$(window).bind('beforeunload',function(){
binded460 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code460 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code460!=newCode){
// window.frames["iframe460"].document.write("
");
// window.frames["iframe460"].document.write(decodeHtml($("textarea#stepcodeTextarea460").val()));
// window.frames["iframe460"].document.close();
// $(window.frames["iframe460"]).load(function(){
// $("#iframe460").height($("#iframe460").contents().find("body").height()+showittryitheight);
// });
// code460 = newCode;
// }
});
$(".tryButton460").click(function(){
$("#tryDiv460").show();
$("#stepcodeTextarea460").focus();
$("#stepcodeTextarea460").height(200);
$("#iframe460").height(0);
window.frames["iframe460"].document.write("
");
window.frames["iframe460"].document.write(decodeHtml($("textarea#stepcodeTextarea460").val()));
window.frames["iframe460"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe460"]).load(function(){
$("#iframe460").height($("#iframe460").contents().find("body").height()+showittryitheight);
});
$("#iframe460").height($("#iframe460").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor460.focus();
editor460.setSize(null, "250");
$("#rendering460").hide();
$("#rendered460").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor460 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea460"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor460.on("change",function(doc){
if(!binded460){
$(window).bind('beforeunload',function(){
binded460 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code460 = newCode;
$("textarea#stepcodeTextarea460").val(newCode);
if(alreadyWriteCode460!=code460){
lastModifedTime460 = new Date().getTime();
$("#rendering460").show();
$("#rendered460").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor460 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor460.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv460").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
