mirror of
https://github.com/Ionaru/easy-markdown-editor
synced 2025-06-28 05:31:06 -06:00
Updates to README
This commit is contained in:
parent
4ae1aa3874
commit
c45ada1c6b
45
README.md
45
README.md
@ -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…
x
Reference in New Issue
Block a user