tiny-markdown-editor 0.1.31 → 0.1.32
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 +15 -11
- package/dist/tiny-mde.js +1270 -797
- package/dist/tiny-mde.min.css +1 -1
- package/dist/tiny-mde.min.js +1 -1
- package/dist/tiny-mde.tiny.js +1 -1
- package/lib/TinyMDE.js +79 -43
- package/lib/TinyMDECommandBar.js +114 -101
- package/lib/grammar.js +0 -1
- package/lib/index.js +1 -1
- package/lib/svg/svg.js +4 -1
- package/lib/tiny.js +1 -1
- package/package.json +25 -25
package/README.md
CHANGED
|
@@ -123,7 +123,7 @@ Please note:
|
|
|
123
123
|
| Attribute | Description |
|
|
124
124
|
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
125
125
|
| `element` | The DOM element under which the TinyMDE DOM element will be created. The `element` attribute can be given as either an ID or the DOM element itself (i.e., the result of a call to `document.getElementById()`). |
|
|
126
|
-
| `editor`
|
|
126
|
+
| `editor` | The DOM div element which the TinyMDE DOM element will modify (get created from). The `editor` attribute can be given as either an ID or the DOM element itself (i.e., the result of a call to `document.getElementById()`). Useful when you already have references to the element even before TinyMDE creation, or when you want to keep exact ordering of the DOM element among other sibling elements. |
|
|
127
127
|
| `content` | The initial content of the editor, given as a string. May contain newlines. |
|
|
128
128
|
| `textarea` | The textarea that will be linked to the editor. The textarea can be given as an ID or as the DOM element itself (i.e., the result of a call to `document.getElementById()`). The content of the editor will be reflected in the value of the textarea at any given point in time. If `textarea` is given and `content` isn't, then the editor content will be initialized to the textarea's value. If `textarea` is given and `element` isn't, then the editor element will be created as the next sibling of the textarea element. |
|
|
129
129
|
|
|
@@ -173,7 +173,11 @@ Here are some methods of the Editor object that might be useful in general inter
|
|
|
173
173
|
| `setSelection(focus, anchor)` | Sets the selection within the editor. The parameters `focus` and `offset` are both of the format returned by `getSelection()` (containing attributes `row` and `col`). If `anchor` is `null` or omitted, a single-point selection (cursor position) will be set. |
|
|
174
174
|
| `paste(text, anchor, focus)` | Pastes / inserts text over either the current selection (if `anchor` and `focus` are null or omitted) or a specific range (if `anchor` and `focus` are passed in in the format as returned by `getSelection()`). |
|
|
175
175
|
| `wrapSelection(pre, post, anchor, focus)` | Wraps the current selection (if `anchor` and `focus` are `null` or omitted) or a specific selection (if `anchor` and `focus` are given) in the strings `pre` and `post`. For example, `wrapSelection('[', '](https://www.github.com)')` will wrap the selection with a link to GitHub. |
|
|
176
|
-
| `addEventListener(type, listener`
|
|
176
|
+
| `addEventListener(type, listener)` | Adds an [event listener](#event-listeners) to the editor. `type` is a string denoting the type (`change` or `selection`), and `listener` is a function which takes one parameter, the event. |
|
|
177
|
+
| `undo()` | Undoes the last action. |
|
|
178
|
+
| `redo()` | Redoes the last undone action. |
|
|
179
|
+
| `canUndo` | `true` if there is an action that can be undone |
|
|
180
|
+
| `canRedo` | `true` if there is an action that can be redone |
|
|
177
181
|
|
|
178
182
|
### Event listeners
|
|
179
183
|
|
|
@@ -183,27 +187,27 @@ There are two event listener types that can be registered on the editor: `change
|
|
|
183
187
|
|
|
184
188
|
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:
|
|
185
189
|
|
|
186
|
-
| Attribute
|
|
187
|
-
|
|
|
188
|
-
| `content`
|
|
190
|
+
| Attribute | Description |
|
|
191
|
+
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
192
|
+
| `content` | The current content as a string. |
|
|
189
193
|
| `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. |
|
|
190
194
|
|
|
191
195
|
#### `selection` event
|
|
192
196
|
|
|
193
197
|
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:
|
|
194
198
|
|
|
195
|
-
| Attribute
|
|
196
|
-
|
|
|
197
|
-
| `focus`
|
|
198
|
-
| `anchor`
|
|
199
|
+
| Attribute | Description |
|
|
200
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
201
|
+
| `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). |
|
|
202
|
+
| `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). |
|
|
199
203
|
| `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`). |
|
|
200
204
|
|
|
201
205
|
#### `drop` event
|
|
202
206
|
|
|
203
207
|
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:
|
|
204
208
|
|
|
205
|
-
| Attribute
|
|
206
|
-
|
|
|
209
|
+
| Attribute | Description |
|
|
210
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
207
211
|
| `dataTransfer` | The event's [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) data (dropped files). |
|
|
208
212
|
|
|
209
213
|
Here's how to add image drag & drop to your TinyMDE editor:
|