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
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="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<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
```
```JavaScript
<script>
var simplemde = new SimpleMDE();
simplemde.render();
</script>
```
#### Use a specific textarea
Pure JavaScript method
```
```JavaScript
<script>
var simplemde = new SimpleMDE(document.getElementById("MyID"));
simplemde.render();
</script>
```
jQuery method
```
```JavaScript
<script>
var simplemde = new SimpleMDE($("#MyID")[0]);
simplemde.render();
</script>
```
## Get the content
```
```JavaScript
simplemde.codemirror.getValue();
```
## Configuration
#### JS
- **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`.
- **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`.
- **tabSize**: If set, customize the tab size. Defaults to `'2'`.
```
```JavaScript
<script>
new SimpleMDE({
element: document.getElementById("MyID"),
status: false,
@ -65,6 +74,29 @@ new SimpleMDE({
indentWithTabs: false,
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
@ -85,3 +117,4 @@ As mentioned earlier, SimpleMDE is an improvement of [lepture's Editor project](
- Improved preview rendering in many ways
- Improved as-you-type appearance of headers and code blocks
- Simplified the toolbar
- Many new options during instantiation

Loading…
Cancel
Save