Skip to content

Commit 1f7b987

Browse files
codeparlcodeparl
committed
readme updated
1 parent 329fe83 commit 1f7b987

File tree

2 files changed

+89
-2
lines changed

2 files changed

+89
-2
lines changed

‎readme.md‎

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,99 @@ This is a jQuery plugin written by H. Mugabo @codeparl.com.
1515

1616
* Preview support
1717
* Shortcuts
18-
* Multiples instances on the same page
18+
* Multiple instances on the same page
1919
* Fullscreen
2020
* Themes
2121
* i18n
2222

2323
## Screenshot
2424

2525
![Screenshot 1](screenshot.png)
26+
27+
## Setup Example
28+
29+
Include the required CSS and js files as follows:
30+
31+
first include the css files in the `<head>` element of your page
32+
```html
33+
<head>
34+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
35+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
36+
<link href="codeparl-bootstrap-markdown-editor.min.css" rel="stylesheet">
37+
</head>
38+
```
39+
40+
then include the js files before the closing tag of the `<body>` element of your page
41+
42+
```html
43+
<body>
44+
45+
<!-- your page content -->
46+
47+
<div class="container">
48+
<div class="editor-container">
49+
<!--This is the element that should be selected for the editor-->
50+
<div class="mardown-editor"> </div>
51+
</div>
52+
</div>
53+
54+
<!-- scripts -->
55+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
56+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
57+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
58+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.3/ace.js"></script>
59+
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
60+
<script src="codeparl-bootstrap-markdown-editor.min.js"></script>
61+
</body>
62+
```
63+
64+
65+
## Example Usage
66+
67+
### Initialize the editor:
68+
69+
```javascript
70+
//select your div element to turn into a markdown editor.
71+
72+
//with default options
73+
$('.mardown-editor').codeparlMarkdown();
74+
75+
//override default options
76+
$('.mardown-editor').codeparlMarkdown({
77+
fullscreen: false,
78+
content: {
79+
allowScript: true,
80+
},
81+
onPreview: function(html) {
82+
83+
//do something with this html
84+
},
85+
onFileBrowse: function($input, aceEditor) {
86+
// you can access the file object of this input here.
87+
// And you may also validate the file type with your backend script
88+
89+
}
90+
});
91+
```
92+
93+
## Plugin documentation
94+
95+
### Options
96+
97+
The following options can be passed as an object at the initialization of the plugin:
98+
99+
```javascript
100+
$('.mardown-editor').codeparlMarkdown({
101+
// Options
102+
});
103+
```
104+
105+
Also, you can override the plugin default options. Example:
106+
107+
```javascript
108+
$.fn.codeparlMarkdown.defaults.editor.editorHeight = '500px';
109+
```
110+
111+
## Authors
112+
113+
[H. Mugabo - aka codeparl](https://github.com/codeparl)

‎src/codeparl-bootstrap-markdown-editor.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -601,7 +601,6 @@
601601
}
602602
],
603603
},
604-
loading: 'fa-spinner fa-spin',
605604
onFileBrowse: function($input, aceEditor) {
606605
// you can access the file object
607606
//of this input here. you may also validate the file type

0 commit comments

Comments
 (0)