mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-27 23:15:15 +08:00
Code Issues Actions 4 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
Show Stats 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
@ -32,7 +32,7 @@ npm install @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:
```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
## CodeSandbox
https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
index.html
## index.html
```html
<!DOCTYPE html>
<html>
@ -31,7 +31,7 @@ index.html
<div
x-data="setupEditor('<p>My content goes here</p>')"
x-init="() => init($refs.editor)"
x-on:click.away="inFocus = false;"
x-on:click.away="inFocus = false"
>
<template x-if="editor">
<nav class="space-x-1">
@ -66,11 +66,10 @@ index.html
</html>
```
index.js
## index.js
```js
import { Editor as TipTap } from "@tiptap/core";
import { defaultExtensions } from "@tiptap/starter-kit";
import { Editor as TipTap } from "@tiptap/core"
import { defaultExtensions } from "@tiptap/starter-kit"
window.setupEditor = function (content) {
return {
@ -91,22 +90,22 @@ window.setupEditor = function (content) {
class: "prose-sm py-4 focus:outline-none"
}
}
});
})
editor.on("update", () => {
this.content = this.editor.getHTML();
});
this.content = this.editor.getHTML()
})
editor.on("focus", () => {
this.inFocus = true;
});
this.inFocus = true
})
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 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
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"
></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
editor.blade.php
## editor.blade.php
```html
<!--
In your livewire component you could add an
@ -21,8 +20,7 @@ editor.blade.php
></x-editor>
```
my-livewire-component.blade.php
## my-livewire-component.blade.php
```html
<div
x-data="setupEditor(
@ -36,3 +34,47 @@ my-livewire-component.blade.php
<div x-ref="editor"></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
}
}
}
```