备
在博客或者⽂档中只进⾏代码展⽰往往因为太抽象，使得刚⼊门⼩⽩⽆法熟练使⽤，因此可展⽰、修改并能显⽰结果的在线代码编辑器成为了⾸选，但是有的第三⽅在线编辑器并不稳定，⽽国外的⼀些也因速度慢或⽆法访问⽽不尽⼈意，想来想去，还是⾃⼰弄吧。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>H5在线编辑器</title>
<!-- 引⼊jq -->
<script src="./statics/jquery.min.js"></script>
<!-- 引⼊bootstrap -->
<link href="./statics/bootstrap.min.css" rel="stylesheet">
<script src="./statics/bootstrap.min.js"></script>
<!-- CodeMirror 是⼀款在线的⽀持语法⾼亮的代码编辑器。官⽹： codemirror/ -->
<script src="./statics/codemirror.min.js"></script>
<link rel="stylesheet" href="./statics/codemirror.css">
<!-- CodeMirror主题 -->
<link rel="stylesheet" href="./statics/codeMirror-ambiance.css">
<!-- 因为HTML混合语⾔依赖Javascript、XML、CSS语⾔⽀持，所以都要引⼊ -->
<script src="./statics/htmlmixed.js"></script>
<script src="./statics/css.js"></script>
<script src="./statics/javascript.js"></script>
<script src="./statics/xml.js"></script>
<script src="./statics/format.js"></script>
<!-- ⽰例 -->
怎样申请出国留学<script src="./statics/example.js"></script>
<style type="text/css">
.CodeMirror {
border: 1px solid #fff;
height: auto;
}
#iframeResult {
display: block;
overflow: hidden;
border: 0 !important;
min-width: 100px;
width: 100%;
height: 100%;
background-color: #fff
}
</style>
</head>
<body>
<!-- tab栏 -->
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="c.runoob/iframe/5632#html" data-toggle="tab" aria-expanded="true">HTML</a>
</li>
<li class=""><a href="c.runoob/iframe/5632#css" data-toggle="tab" aria-expanded="false">CSS</a></li>
<li class=""><a href="c.runoob/iframe/5632#js" data-toggle="tab" aria-expanded="false">JS</a></li>
<li class=""><a href="c.runoob/iframe/5632#result" data-toggle="tab" aria-expanded="false">结果：</a>
</li>
</ul>
<!-- 内容区 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="html">
<div class="tab-pane fade active in" id="html">
<textarea placeholder="输⼊ HTML 代码……" id="code-html" class="form-control" name="code" rows="10" ></textarea>
</div>
<div class="tab-pane fade" id="css">
<textarea placeholder="输⼊ CSS 代码……" id="code-css" class="form-control" rows="10"
></textarea>
</div>
<div class="tab-pane fade" id="js">
<textarea placeholder="输⼊ JavaScript 代码……" id="code-js" class="form-control" name="code" rows="10" ></textarea>
</div>
<div class="tab-pane fade" id="result" >
<iframe frameborder="0" id="iframeResult" src="./statics/saved_resource.html"></iframe>
</div>
</div>
<script>
// CodeMirror代码⾼亮属性选项
var cm_opt = {
mode: 'text/html',//实现html代码⾼亮
gutter: true, //跟随编辑器内容⽔平滚动（false）还是固定在左侧（true或默认）
theme: "ambiance", //设置主题
lineNumbers: true,//显⽰⾏号
lineWrapping: true,//代码折叠
autoCloseBrackets: true,
autoCloseTags: true, //开启⾃动闭合功能
smartIndent:false,//⾃动缩进是否开启
indentUnit:2//缩进单位
};
//输⼊框的节点
var html_editor, css_editor, js_editor;
/
/获取地址栏传⼊的参数，⽤以显⽰example.js的⽰例代码
let para=GetQueryString('type') || false
if(para){
var para_json=example_json[para]
}else{
var para_json=example_json['001']
}
//当页⾯加载完后执⾏
var height = $(window).height();
//每当tab切换时执⾏的⽅法
var prepareSource = function () {
//获取输⼊框的值
企业管理类培训var html = Value(),
css = Value(),
js = Value(),
src = html;
//如果有html代码，则拼接进src
if (html) {
var patternHtmlTag = /<html([^>]*)>/im;
var array_matches_html_tag = (src);
if (array_matches_html_tag) {
src = place('<html>', '<html ' + array_matches_html_tag[1] + '>');
}
var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
var array_matches_head = (src);
var patternBodyTag = /<body([^>]*)>/im;
var array_matches_body_tag = (src);
if (array_matches_body_tag) {
src = place('<body>', '<body ' + array_matches_body_tag[1] + '>');
}
}
}
/
/弹出警告，输⼊代码⾥不需要<style>、<script>标签
if (css.indexOf('<style>') !== -1) {
$(".alert-danger span").text('CSS 编辑框不需要 <style> 标签');
$(".alert-danger").show().delay(5000).fadeOut();
return;
} else if (js.indexOf('<script>') !== -1) {
$(".alert-danger span").text('JavaScript 编辑框不需要 <script> 标签');
凤整容后照片对比$(".alert-danger").show().delay(5000).fadeOut();
return;
} else {
$(".alert-danger").hide();
}
// 如果有输⼊css代码，则拼接进src
if (css) {
css = '<style>' + css + '</style>';
if (array_matches_head) {
src = place('</head>', css + '</head>');
} else if (array_matches_body_tag) {
src = place('</body>', css + '</body>');
} else {
src += css;
}
}
可爱的网名// 如果有输⼊Javascript代码，则拼接进src
if (js) {
js = '<script>' + js + '<\/script>';
if (array_matches_body_tag) {
src = place('</body>', js + '</body>');
世界十大超级跑车} else {
src += js;
}
}
return src;//返回src
};
//监听tab栏切换事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { //shown.bs.tab为Bootstrap中tab事件 if (html_editor instanceof CodeMirror) { //判断html_editor是否已创建实列
fresh(); //是则刷新
} else {
ini() //否则初始化
}
// css代码
if (css_editor instanceof CodeMirror) {//判断css_editorr是否已创建实列
fresh(); //是则刷新
} else {
de = 'css';//实现css代码⾼亮
var css_box = document.querySelector('#code-css');//获取css输⼊框节点
css_editor = CodeMirror.fromTextArea(css_box, cm_opt); //将容器转为编辑器
//css代码，可写死，也可获取，此处为获取⽰例代码
cssstr = `${para_json.css}`;
//跟新数据
css_editor.setValue(cssstr);
}
// JAVASCRIPT代码
if (js_editor instanceof CodeMirror) {//判断js_editor是否已创建实列
fresh();//是则刷新
} else {
de = 'javascript';//实现js代码⾼亮
var js_box = document.querySelector('#code-js');//获取js输⼊框节点
js_editor = CodeMirror.fromTextArea(js_box, cm_opt);//将容器转为编辑器
//js代码，可写死，也可获取，此处为获取⽰例代码
//js代码，可写死，也可获取，此处为获取⽰例代码
jsstr=`${para_json.js}`
//跟新数据
js_editor.setValue(jsstr);
}
//获取整合后的代码
send_data = prepareSource();
//将整合后的代码插⼊页⾯
submitTryit(send_data);
});
}
//初始化，先显⽰第⼀栏
林依晨男友郑家尧function ini(){
//默认显⽰第⼀栏
$('#myTab li:eq(0) a').tab('show');
//获取html输⼊框节点
var html_box = document.querySelector('#code-html');
/
/将容器转为编辑器
html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
//html代码，可写死，也可获取，此处为获取⽰例代码
htmlstr=`${para_json.html}`
html_editor.setValue(htmlstr);//跟新数据
}
//显⽰结果
function submitTryit(text) {
var ifr = ateElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
var ifrw = (tWindow) ? tWindow : (tDocument.document) ? tDocument.document : tDocument; var ifrwd = ifrw.document;
ifrwd.open();
ifrwd.write(text);
ifrwd.close();
}
ini()
</script>
</body>
</html>
结果：
发布评论