tiny-markdown-editor 0.1.25 → 0.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -21
- package/dist/tiny-mde.js +27 -3
- package/dist/tiny-mde.min.js +1 -1
- package/dist/tiny-mde.tiny.js +1 -1
- package/lib/TinyMDE.js +26 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -182,21 +182,52 @@ There are two event listener types that can be registered on the editor: `change
|
|
|
182
182
|
|
|
183
183
|
A `change` event is fired any time the content of the editor changes. The event object passed to the listener function contains the following properties:
|
|
184
184
|
|
|
185
|
-
| Attribute
|
|
186
|
-
|
|
|
187
|
-
| `content`
|
|
185
|
+
| Attribute | Description |
|
|
186
|
+
| --- | ----------- |
|
|
187
|
+
| `content` | The current content as a string. |
|
|
188
188
|
| `linesDirty` | An array of booleans, which for each line contains `true` if the line might have changed in terms of either its content or its block type since the last change, and `false` if the line is guaranteed to not have changed. |
|
|
189
189
|
|
|
190
190
|
#### `selection` event
|
|
191
191
|
|
|
192
192
|
A `selection` event is fired any time the selection within the editor changes. The event object passed to the listener function contains the following properties:
|
|
193
193
|
|
|
194
|
-
| Attribute
|
|
195
|
-
|
|
|
196
|
-
| `focus`
|
|
197
|
-
| `anchor`
|
|
194
|
+
| Attribute | Description |
|
|
195
|
+
| --- | ----------- |
|
|
196
|
+
| `focus` | The focus (end point) of the current selection, in the format as returned by `getSelection()` (two attributes `row` and `col` denoting the zero based row and column). |
|
|
197
|
+
| `anchor` | The anchor (start point) of the current selection, in the format as returned by `getSelection()` (two attributes `row` and `col` denoting the zero based row and column). |
|
|
198
198
|
| `commandState` | An array which contains an attribute for every default command name `bold`, `italic`, `strikethrough`, `code`, `h1`, `h2`, `ul`, `ol`, `blockquote`, `hr`, `insertLink`, and `insertImage`). The value of each attribute is one of `true`, `false`, or `null`. The value is `true` if the command is currently active (e.g., if the cursor is within a bold stretch of text, then the state for `bold` will be `true`). The value is `false` if the command is currently inactive but could be activated (e.g., if the selection encompasses a stretch of text that could be bolded, then the state for `bold` will be `false`). The value is `null` if the command is currently not applicable (e.g., if the cursor is within a code block where inline formatting is not available, the state will be `null` for `bold`). |
|
|
199
199
|
|
|
200
|
+
#### `drop` event
|
|
201
|
+
|
|
202
|
+
A `drop` event is mirroring a native `drop` event. It was added to TinyMDE to allow drag & dropping images into Markdown textarea (like on Github). The event object passed to the listener function contains the following properties:
|
|
203
|
+
|
|
204
|
+
| Attribute | Description |
|
|
205
|
+
| --- | ----------- |
|
|
206
|
+
| `dataTransfer` | The event's [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) data (dropped files). |
|
|
207
|
+
|
|
208
|
+
Here's how to add image drag & drop to your TinyMDE editor:
|
|
209
|
+
|
|
210
|
+
```js
|
|
211
|
+
editor.addEventListener("drop", function (event) {
|
|
212
|
+
let formData = new FormData();
|
|
213
|
+
|
|
214
|
+
// You can add use event.dataTransfer.items or event.dataTransfer.files
|
|
215
|
+
// to build the form data object:
|
|
216
|
+
for (let i = 0; i < event.dataTransfer.items.length; i++) {
|
|
217
|
+
if (event.dataTransfer.items[i].kind === "file") {
|
|
218
|
+
let file = event.dataTransfer.items[i].getAsFile();
|
|
219
|
+
formData.append("image", file);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// Call your API endpoint that accepts "Content-Type": "multipart/form-data"
|
|
224
|
+
// requests and responds with the image names and URL-s.
|
|
225
|
+
//
|
|
226
|
+
// Now you can add Markdown images like so:
|
|
227
|
+
editor.paste(``);
|
|
228
|
+
});
|
|
229
|
+
```
|
|
230
|
+
|
|
200
231
|
### Styling TinyMDE
|
|
201
232
|
|
|
202
233
|
In order to style TinyMDE, edit the CSS file. You can see the classes that can be assigned styles within the file. For a bit more detail about the classes, read on.
|
|
@@ -224,17 +255,24 @@ The main toolbar element has the class `TMCommandBar`. Buttons have the class `T
|
|
|
224
255
|
Building TinyMDE is pretty straight forward:
|
|
225
256
|
|
|
226
257
|
1. Clone this repository:
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
258
|
+
|
|
259
|
+
```bash
|
|
260
|
+
git clone git@github.com:jefago/tiny-markdown-editor.git
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
2. In the repository directory, install dependencies and build the project:
|
|
264
|
+
|
|
265
|
+
```bash
|
|
266
|
+
npm install
|
|
267
|
+
|
|
268
|
+
# You may need to run npm install --force
|
|
269
|
+
|
|
270
|
+
npm run prepublishOnly
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
The latter command generates the `dist` and `lib` directories. You will find the following files there:
|
|
274
|
+
|
|
275
|
+
- `dist/tiny-mde.css` and `dist/tiny-mde.min.css`: CSS files to style the editor. These can be edited at will to make the editor look like you want to. `dist/tiny-mde.min.css` has the same content as `dist/tiny-mde.css`, it's just minified. You will only need to use one of the files on your page. If you want to edit the CSS file, it's easier to edit `dist/tiny-mde.css` and then minify the edited version.
|
|
276
|
+
- `dist/tiny-mde.js`: Debug version of the editor. The JS file is not minified and contains a sourcemap. It is not recommended to use this in production settings, since the file is large.
|
|
277
|
+
- `dist/tiny-mde.min.js`: Minified JS file for most use cases. Simply copy this to your project to use it.
|
|
278
|
+
- `dist/tiny-mde.tiny.js`: Minified and stripped-down JS file. Contains only the editor itself, not the toolbar.
|