Skip to content

Commit 329fe83

Browse files
codeparlcodeparl
committed
version 1
1 parent 588ed0c commit 329fe83

File tree

1 file changed

+5
-256
lines changed

1 file changed

+5
-256
lines changed

‎readme.md‎

Lines changed: 5 additions & 256 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
# Bootstrap Markdown Editor
22

3-
[![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
43

5-
Markdown editor for Bootstrap with preview, image upload support, shortcuts and other features.
6-
This is a jQuery plugin.
7-
8-
**Demo**: http://inacho.github.io/bootstrap-markdown-editor/
4+
Markdown editor for Bootstrap with preview
5+
This is a jQuery plugin written by H. Mugabo @codeparl.com.
96

107
## Requirements
118

12-
* Bootstrap 3
9+
* Bootstrap 4
1310
* jQuery
1411
* Ace editor (http://ace.c9.io)
12+
* Showdown (http://showdownjs.com/)
1513

1614
## Features
1715

1816
* Preview support
19-
* Image upload support (drag and drop & button)
2017
* Shortcuts
2118
* Multiples instances on the same page
2219
* Fullscreen
@@ -25,252 +22,4 @@ This is a jQuery plugin.
2522

2623
## Screenshot
2724

28-
![Screenshot 1](screenshots/screenshot-01.png)
29-
30-
## Installation with Bower
31-
32-
bower install bootstrap-markdown-editor --save
33-
34-
## Example Usage
35-
36-
Include the CSS files of Bootstrap and Bootstrap Markdown Editor:
37-
38-
```html
39-
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
40-
<link href="bower_components/bootstrap-markdown-editor/dist/css/bootstrap-markdown-editor.css" rel="stylesheet">
41-
```
42-
43-
Include the scripts of jQuery, Ace and Bootstrap Markdown Editor.
44-
Optionally, include the script of Bootstrap to enable tooltips:
45-
46-
```html
47-
<script src="bower_components/jquery/dist/jquery.min.js"></script>
48-
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
49-
<script src="bower_components/ace-builds/src-min/ace.js"></script>
50-
<script src="bower_components/bootstrap-markdown-editor/dist/js/bootstrap-markdown-editor.js"></script>
51-
```
52-
53-
Create a textarea for the editor with optional content in markdown format:
54-
55-
```html
56-
<textarea name="text" id="myEditor"># Test</textarea>
57-
```
58-
59-
Initialize the editor:
60-
61-
```javascript
62-
$('#myEditor').markdownEditor();
63-
```
64-
65-
## Implementing the preview
66-
67-
You have to implement the parsing of the Markdown.
68-
Bootstrap Markdown Editor provides you a callback where you have to parse the markdown and return the html.
69-
To activate the preview you have to use the following options:
70-
71-
```javascript
72-
$('#myEditor').markdownEditor({
73-
// Activate the preview:
74-
preview: true,
75-
// This callback is called when the user click on the preview button:
76-
onPreview: function (content, callback) {
77-
78-
// Example of implementation with ajax:
79-
$.ajax({
80-
url: 'preview.php',
81-
type: 'POST',
82-
dataType: 'html',
83-
data: {content: content},
84-
})
85-
.done(function(result) {
86-
// Return the html:
87-
callback(result);
88-
});
89-
90-
}
91-
});
92-
```
93-
94-
## Implementing the image upload
95-
96-
You have to implement the server side part of the upload process.
97-
To activate the image uploads you have to use the following options:
98-
99-
```javascript
100-
$('#myEditor').markdownEditor({
101-
imageUpload: true, // Activate the option
102-
uploadPath: 'upload.php' // Path of the server side script that receive the files
103-
});
104-
```
105-
106-
In your server side script you have to return an array of the **public path** of the successfully uploaded images in json format.
107-
108-
Example in PHP:
109-
110-
```php
111-
$uploadedFiles = array();
112-
113-
if (! empty($_FILES)) {
114-
foreach ($_FILES as $file) {
115-
if (superAwesomeUploadFunction($file)) {
116-
$uploadedFiles[] = '/img/' . urlencode($file['name']);
117-
}
118-
}
119-
}
120-
121-
echo json_encode($uploadedFiles);
122-
```
123-
124-
Response example:
125-
126-
```
127-
["/path/to/my-picture.jpg"]
128-
```
129-
130-
## Shortcuts
131-
132-
The following shortcuts are available.
133-
They can be used with or without selected text.
134-
135-
- **Ctrl-B / ⌘B**: Bold
136-
- **Ctrl-I / ⌘I**: Italic
137-
- **Ctrl-K / ⌘K**: Link
138-
139-
## Plugin documentation
140-
141-
### Options
142-
143-
The following options can be passed as an object at the initialization of the plugin:
144-
145-
```javascript
146-
$('#myEditor').markdownEditor({
147-
// Options
148-
});
149-
```
150-
151-
Also, you can override the plugin default options. Example:
152-
153-
```javascript
154-
$.fn.markdownEditor.defaults.width = '250px';
155-
```
156-
157-
#### width
158-
159-
**Type**: string
160-
**Default**: '100%'
161-
162-
The width of the editor
163-
164-
#### height
165-
166-
**Type**: string
167-
**Default**: '400px'
168-
169-
The height of the editor
170-
171-
#### fontSize
172-
173-
**Type**: string
174-
**Default**: '14px'
175-
176-
The font size of the editor
177-
178-
#### theme
179-
180-
**Type**: string
181-
**Default**: 'tomorrow'
182-
183-
The theme of the editor. See the available themes at the homepage of Ace (http://ace.c9.io)
184-
185-
#### softTabs
186-
187-
**Type**: boolean
188-
**Default**: true
189-
190-
Pass false to disable the use of soft tabs. Soft tabs means you're using spaces instead of the tab character ('\t')
191-
192-
#### fullscreen
193-
194-
**Type**: boolean
195-
**Default**: true
196-
197-
Enable / disable fullscreen
198-
199-
#### imageUpload
200-
201-
**Type**: boolean
202-
**Default**: false
203-
204-
Enable / disable the upload of images. If enabled, you have to specify the option `uploadPath`
205-
206-
#### uploadPath
207-
208-
**Type**: uploadPath
209-
**Default**: ''
210-
211-
The path of the server side script that receives the images. The script has to return an array of the **public path** of the successfully uploaded images in json format.
212-
213-
#### preview
214-
215-
**Type**: boolean
216-
**Default**: false
217-
218-
Enable / disable the preview. If enabled, you have to specify the option `onPreview`
219-
220-
#### onPreview
221-
222-
**Type**: function
223-
**Default**:
224-
225-
```javascript
226-
function (content, callback) {
227-
callback(content);
228-
}
229-
```
230-
231-
This callback is called when the user clicks on the preview button and has two parameters:
232-
**content** that contains the text in markdown.
233-
**callback** is function that you have to call with the parsed html as a parameter
234-
235-
#### label
236-
237-
**Type**: object
238-
**Default**:
239-
240-
```javascript
241-
{
242-
btnHeader1: 'Header 1',
243-
btnHeader2: 'Header 2',
244-
btnHeader3: 'Header 3',
245-
btnBold: 'Bold',
246-
btnItalic: 'Italic',
247-
btnList: 'Unordered list',
248-
btnOrderedList: 'Ordered list',
249-
btnLink: 'Link',
250-
btnImage: 'Insert image',
251-
btnUpload: 'Uplaod image',
252-
btnEdit: 'Edit',
253-
btnPreview: 'Preview',
254-
btnFullscreen: 'Fullscreen',
255-
loading: 'Loading'
256-
}
257-
```
258-
259-
This object contains the strings that can be translated
260-
261-
### Methods
262-
263-
The methods are invoked passing the name of the method as string.
264-
265-
```javascript
266-
var content = $('#myEditor').markdownEditor('content'); // Returns the content of the editor
267-
$('#myEditor').markdownEditor('setContent', content); // Sets the content of the editor
268-
```
269-
270-
## License
271-
272-
Licensed under MIT (https://github.com/inacho/bootstrap-markdown-editor/blob/master/LICENSE).
273-
274-
## Authors
275-
276-
[Ignacio de Tomás](https://github.com/inacho)
25+
![Screenshot 1](screenshot.png)

0 commit comments

Comments
 (0)