laobubu / HyperMD

A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
MIT License
1.47k stars 137 forks source link

快速开始案例中使用打包器的方法中引用的你的css文件的高度固定为300px #47

Closed Jessense closed 6 years ago

Jessense commented 6 years ago

你提供的文档中的快速开始案例:http://laobubu.net/HyperMD/?directOpen#./docs/zh-CN/index.md 我使用的用parcel打包的方法,运行效果:

运行效果

查看网页源代码:

<!DOCTYPE HTML>
<html>
  <head>
    <title>绝赞编辑器</title>
  <link rel="stylesheet" href="/web-editor.60694ee1.css"></head>
  <body>
    <textarea id="myTextarea" height="1000px"># Hello World</textarea>

    <script src="/web-editor.60694ee1.js"></script>
  </body>
</html>

点击链接查看 /web-editor.60694ee1.css 发现文件开头:

/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

这个高度300px应该不合理吧?你能在云端改下这个css文件吗? 或者请问我在本地可以通过什么方法改变文本框高度吗?(我刚刚入门,不是很懂)

laobubu commented 6 years ago

CodeMirror 需要用CSS或者JS来调整编辑器尺寸。在你的 index.js 文件末尾加上:

cm.setSize(null, "1000px"); // 不修改宽度的情况下,修改高度

随后,如果要获取文本框的内容,需使用 cm.getValue() ;设置文本框内容则使用 cm.setValue("你的文字")。其他编辑器相关的操作,可以去网络上找找 CodeMirror 的用法(在 HyperMD 里是通用的)