你如何使Ace编辑器以与div相同的方式成长并填充表格单元格?我只想要manuscript
编辑div来成长并以与Article
div相同的方式填充整个页面的高度。
代码是@ https://github.com/viruliant/gh-template/
演示是@ https://viruliant.github.io/gh-template/
<!DOCTYPE html><html><head><meta charset="utf-8"><!--_________________--><title>
viruliant.github.io/gh-template
</title><meta name="description" content="Github Pages Template using client-side JS markdown for styling plaintext .md files">
<!--___________________________________________________________________Styles-->
<link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.theme.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="./default.css"/>
<style type="text/css">/* <![CDATA[ Custom Styling*/
#Page-Table { min-height:100%; width:100%; margin:0; }
#Page-Table, #Content, #Left, #Right, #Header, #Footer, #Manuscript, #Manuscript { height:100%;
top: 0; bottom: 0; left: 0; right: 0; position: relative;
border:0; margin:0; padding:0;
}
#Page-Table, #Left-cell, #Right-cell, #Content-cell, #Header-cell, #Footer-cell {
border:0; padding:0; border-collapse: collapse;
}
#Left-cell, #Right-cell { width:10%; }
#Content-cell { height: 100%; width:80%; }
#Header-cell, #Footer-cell { height:64px; }
#Header, #Footer { background: #FFF; }
/* ]]> */</style>
<!--__________________________________________________________________Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script src="./ace-builds/src-min-noconflict/ace.js"></script>
<script src="./showdown/compressed/Showdown.min.js"></script>
<script src="./showdown/compressed/extensions/table.min.js"></script>
<!--<script src="requirejs/require.js"></script>-->
<script src="./default.js"></script><script>/* <![CDATA[ Custom JS*/window.onload = function() {
$( "#Content" ).tabs({ event: "mouseover" });// http://jqueryui.com/tabs/
//Setup Manuscript Editor
var Editor = ace.edit("Manuscript");
Editor.setTheme("ace/theme/twilight");
Editor.getSession().setMode("ace/mode/markdown");
//set contents of Manuscript to "index.md" file contents
jQuery.get('README.md', function(data) { Editor.setValue(data); });
//startup showdownjs to reset Article contents on Manuscript changes
var converter = new Showdown.converter({ extensions: ['table'] });
Editor.getSession().on('change', function(e) {
document.getElementById("Article").innerHTML = converter.makeHtml(Editor.getValue())
//MathJax.Hub.Queue(["Typeset",MathJax.Hub,"Article"])
//$("#Article").children().addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
});
// Editor.resize();
};/* ]]> */</script>
<!--____________________________________________________________--></head><body>
<table id="Page-Table"><!--http://i.stack.imgur.com/GAZTr.jpg-->
<tr><td id="Header-cell" colspan="3"><div id="Header"></div></td></tr>
<tr>
<td id="Left-cell"><div id="Left"></div></td>
<td id="Content-cell">
<div id="Content">
<ul><li><a href="#Article">Article</a></li>
<li><a href="#Manuscript">Manuscript</a></li></ul>
<div id="Article"></div>
<div id="Manuscript"></div>
</div>
</td>
<td id="Right-cell"><div id="Right"></div></td>
</tr>
<tr><td id="Footer-cell" colspan="3"><div id="Footer"></div></td></tr>
</table>
<!--___________________________________________________________--></body></html>
更新:要测试您的更改,您只需执行git clone --recursive https://github.com/viruliant/gh-template/
并打开index.html或运行nodejs文件以使readme.md行正常工作