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

Merge branch 'main' into feature/vue-node-views

Browse Source
This commit is contained in:
Philipp Kühn
2020-11-25 10:00:13 +01:00
parent d938979584 12a2e6e677
commit da45af3a51
58 changed files with 483 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/docPages/api/keyboard-shortcuts.md
View File

@@ -48,7 +48,7 @@ Most of the core extensions register their own keyboard shortcuts. Depending on
| Center align | `Control` `Shift` `E` | `Cmd` `Shift` `E` |
| Right align | `Control` `Shift` `R` | `Cmd` `Shift` `R` |
| Justify | `Control` `Shift` `J` | `Cmd` `Shift` `J` |
| Task list | `Control` `Shift` `L` | `Cmd` `Shift` `L` |
| Task list | `Control` `Shift` `L` | `Cmd` `Shift` `L` (TODO: Conflict!) |
| Code block | `Control` `Alt` `C` | `Cmd` `Alt` `C` |
<!--| Toggle task| `Control`&nbsp;`Enter` | `Cmd`&nbsp;`Enter` | -->

8
docs/src/docPages/guide/create-your-editor.md
View File

@@ -1,8 +1,10 @@
# Create your editor
# Create a new toolbar
## toc
## Introduction
TODO
<!-- ## Introduction
In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you would like to have.
## Adding a menu
@@ -24,4 +26,4 @@ Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t
<demo name="Guide/BuildYourEditor" highlight="10-13,30-33" />
That’s also the place where you can register custom extensions, which you or someone else built for tiptap.
That’s also the place where you can register custom extensions, which you or someone else built for tiptap. -->

33
docs/src/docPages/guide/getting-started/vue-cli.md
View File

@@ -55,7 +55,38 @@ To actually start using tiptap, you’ll need to add a new component to your app
This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
<demo name="Guide/GettingStarted" />
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
```
## 5. Add it to your app
Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.

31
docs/src/docPages/overview/installation.md
View File

@@ -57,8 +57,34 @@ It’s also amazing for bug reports. Try to recreate a bug there and share it wi
* [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/tiptap-issue-template-b83rr?file=/src/components/Tiptap.vue)
## Option 4: CDN
To pull in tiptap for quick demos or just giving it a spin, grab the latest build via CDN:
## Option 4: CDN (Draft)
To pull in tiptap for quick demos or just giving it a spin, grab the latest build via CDN. We use two different provides:
### Skypack (ES Modules)
Skypack enables you to use ES modules, which should be supported in all modern browsers. The packages are smaller, that’s great, too. So here is how to use it:
```html
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="element"></div>
<script type="module">
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
const editor = new Editor({
element: document.querySelector('.element'),
extensions: defaultExtensions(),
content: '<p>Your content.</p>',
})
</script>
</body>
</html>
```
### Unpkg (UMD, deprecated)
We also have an UMD build on unpkg. Those UMD builds are larger, but should work even in older browsers. As tiptap doesn’t work in older browsers anyway, we tend to remove those builds. What do you think? Anyway, here‘s how you can use it:
```html
<!doctype html>
@@ -81,4 +107,3 @@ To pull in tiptap for quick demos or just giving it a spin, grab the latest buil
</body>
</html>
```