mirror of
https://github.com/Ionaru/easy-markdown-editor
synced 2025-06-28 13:41:01 -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
|
## 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…
x
Reference in New Issue
Block a user