Updates to README

pull/9/head
Wes Cossick 9 years ago
parent 4ae1aa3874
commit c45ada1c6b

@ -8,7 +8,7 @@ A drop-in JavaScript textarea replacement for writing beautiful and understandab
## Quick start ## Quick start
SimpleMDE is available on [jsDelivr](http://www.jsdelivr.com/#!simplemde). Font Awesome is available on MaxCDN. SimpleMDE is available on [jsDelivr](http://www.jsdelivr.com/#!simplemde). Font Awesome is available on MaxCDN.
``` ```HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> <script src="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
@ -16,35 +16,43 @@ SimpleMDE is available on [jsDelivr](http://www.jsdelivr.com/#!simplemde). Font
And then load SimpleMDE on the first textarea on a page And then load SimpleMDE on the first textarea on a page
``` ```JavaScript
<script>
var simplemde = new SimpleMDE(); var simplemde = new SimpleMDE();
simplemde.render(); simplemde.render();
</script>
``` ```
#### Use a specific textarea #### Use a specific textarea
Pure JavaScript method Pure JavaScript method
``` ```JavaScript
<script>
var simplemde = new SimpleMDE(document.getElementById("MyID")); var simplemde = new SimpleMDE(document.getElementById("MyID"));
simplemde.render(); simplemde.render();
</script>
``` ```
jQuery method jQuery method
``` ```JavaScript
<script>
var simplemde = new SimpleMDE($("#MyID")[0]); var simplemde = new SimpleMDE($("#MyID")[0]);
simplemde.render(); simplemde.render();
</script>
``` ```
## Get the content ## Get the content
``` ```JavaScript
simplemde.codemirror.getValue(); simplemde.codemirror.getValue();
``` ```
## Configuration ## Configuration
#### JS
- **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page. - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- **status**: If set `false`, hide the status bar. Defaults to `true`. - **status**: If set `false`, hide the status bar. Defaults to `true`.
- **toolbar**: If set `false`, hide the toolbar. Defaults to `true`. - **toolbar**: If set `false`, hide the toolbar. Defaults to `true`.
@ -54,7 +62,8 @@ simplemde.codemirror.getValue();
- **indentWithTabs**: If set `false`, indent using spaces instead of tabs. Defaults to `true`. - **indentWithTabs**: If set `false`, indent using spaces instead of tabs. Defaults to `true`.
- **tabSize**: If set, customize the tab size. Defaults to `'2'`. - **tabSize**: If set, customize the tab size. Defaults to `'2'`.
``` ```JavaScript
<script>
new SimpleMDE({ new SimpleMDE({
element: document.getElementById("MyID"), element: document.getElementById("MyID"),
status: false, status: false,
@ -65,6 +74,29 @@ new SimpleMDE({
indentWithTabs: false, indentWithTabs: false,
tabSize: '4', tabSize: '4',
}); });
</script>
```
#### CSS
To change the minimum height (before it starts auto-growing):
```CSS
<style>
.CodeMirror {
min-height: 300px;
}
</style>
```
Or, you can keep the height static:
```CSS
<style>
.CodeMirror {
height: 300px;
}
</style>
``` ```
## How it works ## How it works
@ -85,3 +117,4 @@ As mentioned earlier, SimpleMDE is an improvement of [lepture's Editor project](
- Improved preview rendering in many ways - Improved preview rendering in many ways
- Improved as-you-type appearance of headers and code blocks - Improved as-you-type appearance of headers and code blocks
- Simplified the toolbar - Simplified the toolbar
- Many new options during instantiation

Loading…
Cancel
Save