javascript - 完整的 bootstrap markdown 高度-6ren

javascript - 完整的 bootstrap markdown 高度

转载作者：行者123 更新时间：2023-11-28 04:40:52

25

4

我想更改 markdown 高度以填充 div 高度，但我做不到。

我有以下文件-

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-markdown.min.css" rel="stylesheet">
    <link href="admin.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

      <div class="md-editor active half-width">
        <textarea id="target-editor" class="target-editor-twitter md-input"> </textarea>
      </div>

      <div id="result" class="half-width">
      </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/bootstrap-markdown.js"></script>
    <script src="assets/js/markdown.js"></script>
    <script src="assets/js/to-markdown.js"></script>

    <script src="app.js"></script>
  </body>
</html>

app.js

window.onload = function(){
  $('#target-editor').markdown({
    savable:true,
    onShow: function(e){
      e.hideButtons("cmdPreview");
    },
    onSave: function(e) {
      alert("Saving '"+e.getContent()+"'...")
    },
    onChange: function(e){
      var content = e.parseContent()
      $('#result').html(content);
    }
  });
};

admin.css

body, html{
  height:100%;
}

.half-width{
  width:50%;
  float:left;
  height:100%;
  padding:10px;
  margin:0;
  position:relative;
}

输出是-

如何更改markdown高度以填充div高度？

最佳答案

看片段

window.onload = function(){
  $('#target-editor').markdown({
    savable:true,
    onShow: function(e){
        //e.hideButtons("cmdPreview");
		e.$textarea.css('resize','vertical');
		e.$textarea.css('height', ($(".md-editor").height()-90)+'px');
 	  },
    onSave: function(e) {
      alert("Saving '"+e.getContent()+"'...")
    },
    onChange: function(e){
      var content = e.parseContent()
      $('#result').html(content);
    }
  });
}; 
$(window).resize(function(){
	$("#target-editor").height(($(".md-editor").height()-90)+'px');
});

body, html{
  height:100%;
}

.half-width{
  width:50%;
  float:left;
  height:100%;
  padding:10px;
  margin:0;
  position:relative;
}
.md-editor>.md-header {
	margin-left: 5px;
}
.md-editor {
	height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/js/bootstrap-markdown.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/css/bootstrap-markdown.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="half-width">
        <textarea id="target-editor" class="target-editor-twitter md-input" data-provide="markdown-editable" rows="20"> </textarea>
      </div>

      <div id="result" class="half-width">
      </div>

关于javascript - 完整的 bootstrap markdown 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41208667/

25

4

0

文章推荐： javascript - 重定向页面不显示 url 值

文章推荐： javascript - 未捕获的 TypeError : $. get(...).then 不是函数

文章推荐： c++ - 打印带有垂直和水平标题的 QTableView

文章推荐： css - 在我的 Wordpress 网站上更改主导航菜单字体颜色

JAVA技术实现上传下载文件到FTP服务器(完整)
具体详细介绍请看下文：在使用文件进行交互数据的应用来说，使用FTP服务器是一个很好的选择。本文使用Apache Jakarta Commons Net（commons-net-3.3.jar）
jetty HttpParser 完整
我在日志文件中收到这些警告: WARN 2013-01-15 00:08:15,550 org.eclipse.jetty.http.HttpParser- HttpParser Full for
javascript - 在浏览器中查看源代码时显示的源代码是否始终准确/完整？
我在使用特定网页时遇到问题。当我按下链接时，我收到应用程序错误(不是 http 错误等，而是应用程序级别错误)。但是我打开了开发人员工具和网络控制台，我看到没有请求发送到服务器。所以我双击并选择查
c - 此汇编函数调用是否安全/完整？
我没有组装经验，但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面，我希望输入。例如，我想知道是否应该还原ecx，edx，esi，edi，。我读到它们是通用寄存器，但我
c - 此汇编函数调用是否安全/完整？
我没有组装经验，但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面，我希望输入。例如，我想知道是否应该还原ecx，edx，esi，edi，。我读到它们是通用寄存器，但我
ios - 完整 UIScrollView 的快照
我正在尝试创建完整 uiscrollview 的快照，所有内容大小，我已经搜索了很多，并且我在 SO 上找到了一些东西，如下所示: Getting a screenshot of a UIScroll
java - 修改其副本时保持原始 Vector 完整
我想复制一个包含以下结构的Vector，对我来说重要的是在修改复制的 vector 时保持原始Vector完整: public class objet_poid_n { public int
python - 按分隔符分割时保持引用 block 完整
给定一个示例字符串 s = '嗨，我的名字是 Humpty-Dumpty，来自“爱丽丝，爱丽丝镜中奇遇记”'，我想将其分成以下 block : # To Do: something like {l =
bash - 寻找库来连接相对/完整 url。
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
python - 完整 Linux 文件路径的正则表达式
我正在尝试创建一个正则表达式来查找文本中的 Linux 文件路径，但是正则表达式对我来说非常陌生。我有下面的代码片段，它将识别下面文件结构的开头。 .*(/bin/|/home/).* 完成正则表达式
php - 如何在不下载(完整)的情况下确定图像的大小？
我正在寻找远程托管的 JPG 的尺寸、宽度和高度。我已经了解了如何通过下载完整图像来执行此操作。但是，如果我可以通过仅下载足以获取此信息的方式来做到这一点，那将是理想的。典型的图像大小为 200K
Python:如何获取我所在函数的*完整*名称
有没有办法让下面的代码: import traceback def log(message): print "%s: %s" %(traceback.extract_stack()[0:-1]
c# - 完整 Windows 桌面的实时视频处理
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
git - 仅显示修订中更改的(完整)文件名
git show 显示了修订版中所做的所有更改。但是，它会打印出所有更改——而不仅仅是文件名。 git show --stat 只显示文件名，但它把它们截断了!有没有办法获得已更改文件名的完整列表？
language-agnostic - 面向*完整*初学者的奖励代码项目
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
get_absolute_url 中的 Django 完整 url
当我在模板中调用我的模型 get_absolute_url 方法时，我想要一个绝对/完整的 url。在我的入门模型中，我有以下内容: def get_absolute_url(self): r
jquery - animate 的回调函数(完整)在开始时执行？
我正在使用 jQuery 1.5.1 这是我的代码: $('.cellcontent').animate({ left: '-=190'}, { easing: alert('start
javascript - 完整 d3 图表的故障/消失
我正在使用下面的方法删除条形图并使用新数据更新条形图，但这样做时出现了一个小故障/完整的图表消失 1 秒，直到加载新数据。但是是否可以通过仅增加/减少柱形而不实际消失图表来实现相同的目的。 d3.se
generics - 完整、高效的 NumericLiteral 模块实现
基于 this question 中的讨论，任何人都可以提供代码或代码链接，显示 NumericLiteralX 模块的完整实现(例如 this one )？我对 NumericLiteralX 模块
java - 检索正确(完整)的 html
我的目标是检索网站的 html，并将其转换为可读的String。我下面的代码可以工作，但我遇到了一个技术问题:当我尝试检索 http://time.gov/HTML5 的 html 时，我在 andr

首页

博学

6Ren·AI

商城

javascript - 完整的 bootstrap markdown 高度