Question

你如何使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行正常工作

你如何使Ace编辑器成长并以div相同的方式填充表格单元格？

0 个答案: