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

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2021-02-08 16:41:57 +01:00
parent 1203ed4296
commit f0c70d9d59
4 changed files with 70 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/src/docPages/installation.md
View File

@@ -1,4 +1,4 @@
# Getting started # Installation
## toc ## toc
@@ -32,7 +32,7 @@ npm install @tiptap/core @tiptap/starter-kit
yarn add @tiptap/core @tiptap/starter-kit yarn add @tiptap/core @tiptap/starter-kit
``` ```
### 2. Add a container ### 2. Add some markup
Add the following HTML where you want the editor to be mounted: Add the following HTML where you want the editor to be mounted:
```html ```html
@@ -53,4 +53,4 @@ new Editor({
}) })
``` ```
When you open the project in your browser, you should now see tiptap in action. Time to give yourself a pat on the back. Open your project in the browser and you should see tiptap. Good work! Time to give yourself a pat on the back.

33
docs/src/docPages/installation/alpine.md
View File

@@ -7,10 +7,10 @@ The following guide describes how to integrate tiptap with your [Alpine.js](http
TODO TODO
## CodeSandbox
https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419 https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
index.html ## index.html
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@@ -31,7 +31,7 @@ index.html
<div <div
x-data="setupEditor('<p>My content goes here</p>')" x-data="setupEditor('<p>My content goes here</p>')"
x-init="() => init($refs.editor)" x-init="() => init($refs.editor)"
x-on:click.away="inFocus = false;" x-on:click.away="inFocus = false"
> >
<template x-if="editor"> <template x-if="editor">
<nav class="space-x-1"> <nav class="space-x-1">
@@ -66,11 +66,10 @@ index.html
</html> </html>
``` ```
index.js ## index.js
```js ```js
import { Editor as TipTap } from "@tiptap/core"; import { Editor as TipTap } from "@tiptap/core"
import { defaultExtensions } from "@tiptap/starter-kit"; import { defaultExtensions } from "@tiptap/starter-kit"
window.setupEditor = function (content) { window.setupEditor = function (content) {
return { return {
@@ -91,22 +90,22 @@ window.setupEditor = function (content) {
class: "prose-sm py-4 focus:outline-none" class: "prose-sm py-4 focus:outline-none"
} }
} }
}); })
editor.on("update", () => { editor.on("update", () => {
this.content = this.editor.getHTML(); this.content = this.editor.getHTML()
}); })
editor.on("focus", () => { editor.on("focus", () => {
this.inFocus = true; this.inFocus = true
}); })
editor.on("selection", () => { editor.on("selection", () => {
this.updatedAt = Date.now(); this.updatedAt = Date.now()
}); })
this.editor = editor; this.editor = editor
} }
}; }
}; }
``` ```

7
docs/src/docPages/installation/codesandbox.md
View File

@@ -1,5 +1,5 @@
# CodeSandbox # CodeSandbox
CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others. CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project. You can also use it to share your code and collaborate with others.
<iframe <iframe
src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark" src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark"
@@ -8,4 +8,7 @@ CodeSandbox is an online coding environment. It’s great to fiddle around witho
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe> ></iframe>
It’s also amazing for bug reports. Try to recreate a bug there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug easily, and release a fix faster. ## Issue template
It’s also amazing for bug reports. Try to recreate a bug there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
That helps us to reproduce the bug easily, and release a fix faster.

50
docs/src/docPages/installation/livewire.md
View File

@@ -7,8 +7,7 @@ The following guide describes how to integrate tiptap with your [Livewire](https
TODO TODO
editor.blade.php ## editor.blade.php
```html ```html
<!-- <!--
In your livewire component you could add an In your livewire component you could add an
@@ -21,8 +20,7 @@ editor.blade.php
></x-editor> ></x-editor>
``` ```
my-livewire-component.blade.php ## my-livewire-component.blade.php
```html ```html
<div <div
x-data="setupEditor( x-data="setupEditor(
@@ -36,3 +34,47 @@ my-livewire-component.blade.php
<div x-ref="editor"></div> <div x-ref="editor"></div>
</div> </div>
``` ```
## index.js
```js
import { Editor as TipTap } from "@tiptap/core"
import { defaultExtensions } from "@tiptap/starter-kit"
window.setupEditor = function (content) {
return {
content: content,
inFocus: false,
// updatedAt is to force Alpine to
// rerender on selection change
updatedAt: Date.now(),
editor: null,
init(el) {
let editor = new TipTap({
element: el,
extensions: defaultExtensions(),
content: this.content,
editorProps: {
attributes: {
class: "prose-sm py-4 focus:outline-none"
}
}
})
editor.on("update", () => {
this.content = this.editor.getHTML()
})
editor.on("focus", () => {
this.inFocus = true
})
editor.on("selection", () => {
this.updatedAt = Date.now()
})
this.editor = editor
}
}
}
```