如何让 Ace Editor 以 div 相同的方式扩展和填充 table 单元格？

Question

如何让 Ace Editor 以 div 相同的方式扩展和填充 table 单元格？我只希望 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 行正常工作

Answer 1

要使 div 表现相同，您可能只需要从 #article 未出现的样式中删除 #manuscript（或者相反地添加 #article 到 #manuscript 所在的位置）。

我在你的例子中看到的唯一一个是

#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, #Content, #Left, #Right, #Header, #Footer { height:100%;
    top: 0; bottom: 0; left: 0; right: 0; position: relative;
    border:0; margin:0; padding:0;
}

这是一个设置 div 高度并为其设置边框的示例，以便您在 SO 中看得更清楚一些。您的页脚上有一些与文章重叠的奇怪样式，但是当您将其余样式放在 -

中时，这可能会起作用

$(document).ready(function() {
  $("#Content").tabs({
    event: "mouseover"
  });

  //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("Test markdown");
  //});

  //startup showdownjs to reset Article contents on Manuscript changes
  //var converter = new Showdown.converter({
  //  extensions: ['table']
  //});
var doc = Editor.getSession().getDocument();
  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");
      // using current line-height of 14 pixels...
      $("#Manuscript").css({"height": (14 * doc.getLength()) + 'px'});
      Editor.resize();
  });
  //  Editor.resize();
});

#Page-Table {
  min-height: 100%;
  width: 100%;
  margin: 0;
}
#Page-Table,
#Content,
#Left,
#Right,
#Header,
#Footer {
  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;
}
#Article,
#Manuscript {
  border: 1px solid #ccc;
  border-width: 0 1px 1px 1px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  <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="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
</head>

<body>
  <table id="Page-Table">
    <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>

如何让 Ace Editor 以 div 相同的方式扩展和填充 table 单元格？

How do you make Ace Editor Grow and fill a table cell in the same fashion a div does?

javascript

html

css

markdown