ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

format table

Browse Source
This commit is contained in:
Hans Pagel
2020-10-15 10:02:44 +02:00
parent 6752476a3c
commit d00e54fb73
1 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@@ -80,7 +80,7 @@ export default {
## Editor Properties
| **Property** | **Type** | **Default** | **Description** |
| --- | :---: | :---: | --- |
| ---------------------- | :--------------: | :---------: | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `content` | `Object\|String` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
| `editorProps` | `Object` | `{}` | A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps). |
| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
@@ -98,8 +98,8 @@ export default {
## Editor Methods
| **Method** | **Arguments**| **Description** |
| --- | :---: | --- |
| **Method** | **Arguments** | **Description** |
| ---------------- | :---------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setContent` | `content, emitUpdate, parseOptions` | Replace the current content. You can pass an HTML string or a JSON document. `emitUpdate` defaults to `false`. `parseOptions` defaults to those provided in constructor. |
| `clearContent` | `emitUpdate` | Clears the current content. `emitUpdate` defaults to `false`. |
| `setOptions` | `options` | Overwrites the current editor properties. |
@@ -113,7 +113,7 @@ export default {
## Components
| **Name** | **Description** |
| --- | --- |
| -------------------------- | -------------------------------------- |
| `<editor-content />` | Here the content will be rendered. |
| `<editor-menu-bar />` | Here a menu bar will be rendered. |
| `<editor-menu-bubble />` | Here a menu bubble will be rendered. |
@@ -124,7 +124,7 @@ export default {
The `<editor-menu-bar />` component is renderless and will receive some properties through a scoped slot.
| **Property** | **Type** | **Description** |
| --- | :---: | --- |
| -------------- | :--------: | ------------------------------------------------------------------------------------------------------ |
| `commands` | `Array` | A list of all commands. |
| `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` |
| `getMarkAttrs` | `Function` | A function to get all mark attributes of your selection. |
@@ -154,7 +154,7 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
The `<editor-menu-bubble />` component is renderless and will receive some properties through a scoped slot.
| **Property** | **Type** | **Description** |
| --- | :---: | --- |
| -------------- | :--------: | ------------------------------------------------------------------------------------------------------ |
| `commands` | `Array` | A list of all commands. |
| `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` |
| `getMarkAttrs` | `Function` | A function to get all mark attributes of your selection. |
@@ -188,7 +188,7 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
The `<editor-floating-menu />` component is renderless and will receive some properties through a scoped slot.
| **Property** | **Type** | **Description** |
| --- | :---: | --- |
| -------------- | :--------: | ------------------------------------------------------------------------------------------------------ |
| `commands` | `Array` | A list of all commands. |
| `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` |
| `getMarkAttrs` | `Function` | A function to get all mark attributes of your selection. |
@@ -301,7 +301,7 @@ export default {
The most powerful feature of tiptap is that you can create your own extensions. There are 3 types of extensions.
| **Type** | **Description** |
| --- | --- |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `Extension` | The most basic type. It's useful to register some [Prosemirror plugins](https://prosemirror.net/docs/guide/) or some input rules. |
| `Node` | Add a custom node. Nodes are block elements like a headline or a paragraph. |
| `Mark` | Add a custom mark. Marks are used to add extra styling or other information to inline content like a strong tag or links. |
@@ -309,7 +309,7 @@ The most powerful feature of tiptap is that you can create your own extensions.
### Extension Class
| **Method** | **Type** | **Default** | **Description** |
| --- | :---: | :---: | --- |
| ----------------------------- | :--------: | :---------: | ---------------------------------------------------------------------------- |
| `get name()` | `String` | `null` | Define a name for your extension. |
| `get defaultOptions()` | `Object` | `{}` | Define some default options. The options are available as `this.$options`. |
| `get plugins()` | `Array` | `[]` | Define a list of [Prosemirror plugins](https://prosemirror.net/docs/guide/). |
@@ -322,7 +322,7 @@ The most powerful feature of tiptap is that you can create your own extensions.
### Node|Mark Class
| **Method** | **Type** | **Default** | **Description** |
| --- | :---: | :---: | --- |
| ----------------------------------- | :------: | :---------: | ------------------------------------------------------------------------------------- |
| `get name()` | `String` | `null` | Define a name for your node or mark. |
| `get defaultOptions()` | `Object` | `{}` | Define some default options. The options are available as `this.$options`. |
| `get schema()` | `Object` | `null` | Define a [schema](https://prosemirror.net/docs/guide/#schema). |
@@ -473,7 +473,7 @@ export default class IframeNode extends Node {
#### NodeView Prop Types
| **Prop** | **Type** | **Description** |
| --- | :---: | --- |
| ------------- | :--------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `node` | `Object` | The Prosemirror node object. Common use case is to get `node.attrs` using a getter on a computed property. |
| `updateAttrs` | `Function` | A function to update `node.attrs` defined in `schema`. Common use case is as setter on a computed property. |
| `view` | `Object` | The Prosemirror editor view instance. |
@@ -483,9 +483,9 @@ export default class IframeNode extends Node {
## Browser Support
![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
--- | --- | --- | --- | --- |
Last 2 Versions ✔ | Last 2 Versions ✔ | Last 2 Versions ✔ | Last 2 Versions ✔ | Last 2 Versions ✔ |
| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
| Last 2 Versions ✔ | Last 2 Versions ✔ | Last 2 Versions ✔ | Last 2 Versions ✔ | Last 2 Versions ✔ |
## Development Setup