Merge branch 'main' of https://github.com/ueberdosis/tiptap
This commit is contained in:
@@ -22,17 +22,6 @@ npm install @tiptap/extension-code-block
|
||||
|
||||
## Settings
|
||||
|
||||
### HTMLAttributes
|
||||
Custom HTML attributes that should be added to the rendered HTML tag.
|
||||
|
||||
```js
|
||||
CodeBlock.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'my-custom-class',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### languageClassPrefix
|
||||
Adds a prefix to language classes that are applied to code tags.
|
||||
|
||||
@@ -44,6 +33,39 @@ CodeBlock.configure({
|
||||
})
|
||||
```
|
||||
|
||||
### exitOnTripleEnter
|
||||
Define whether the node should be exited on triple enter.
|
||||
|
||||
Default: `true`
|
||||
|
||||
```js
|
||||
CodeBlock.configure({
|
||||
exitOnTripleEnter: false,
|
||||
})
|
||||
```
|
||||
|
||||
### exitOnArrowDown
|
||||
Define whether the node should be exited on arrow down if there is no node after it.
|
||||
|
||||
Default: `true`
|
||||
|
||||
```js
|
||||
CodeBlock.configure({
|
||||
exitOnArrowDown: false,
|
||||
})
|
||||
```
|
||||
|
||||
### HTMLAttributes
|
||||
Custom HTML attributes that should be added to the rendered HTML tag.
|
||||
|
||||
```js
|
||||
CodeBlock.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'my-custom-class',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
### setCodeBlock()
|
||||
|
||||
@@ -33,7 +33,7 @@ Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For
|
||||
npm install @tiptap/vue-3 @tiptap/starter-kit
|
||||
```
|
||||
|
||||
If you followed step 1 and 2, you can now start your project with `npm run dev`, and open [http://localhost:8080](http://localhost:8080) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
If you followed step 1 and 2, you can now start your project with `npm run serve`, and open [http://localhost:8080](http://localhost:8080) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Create a new component
|
||||
To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
||||
@@ -151,6 +151,6 @@ export default {
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
## 5. Use v-model (optional)
|
||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is how that would work with Tiptap:
|
||||
You’re probably used to binding your data with `v-model` in forms, that’s also possible with Tiptap. Here is how that would work with Tiptap:
|
||||
|
||||
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
|
||||
|
||||
@@ -63,36 +63,52 @@
|
||||
redirect: /examples/default
|
||||
items:
|
||||
- title: Default text editor
|
||||
icon: edit-box-line
|
||||
link: /examples/default
|
||||
- title: Collaborative editing
|
||||
icon: team-line
|
||||
link: /examples/collaborative-editing
|
||||
- title: Markdown shortcuts
|
||||
icon: markdown-line
|
||||
link: /examples/markdown-shortcuts
|
||||
- title: Menus
|
||||
icon: menu-line
|
||||
link: /examples/menus
|
||||
- title: Tables
|
||||
icon: table-line
|
||||
link: /examples/tables
|
||||
- title: Images
|
||||
icon: image-line
|
||||
link: /examples/images
|
||||
- title: Formatting
|
||||
icon: indent-increase
|
||||
link: /examples/formatting
|
||||
- title: Tasks
|
||||
icon: checkbox-multiple-line
|
||||
link: /examples/tasks
|
||||
- title: Long texts
|
||||
icon: text-spacing
|
||||
link: /examples/book
|
||||
- title: Drawing
|
||||
icon: pencil-ruler-line
|
||||
link: /examples/drawing
|
||||
- title: Mentions
|
||||
icon: at-line
|
||||
link: /examples/suggestions
|
||||
- title: Minimal setup
|
||||
icon: settings-line
|
||||
link: /examples/minimal
|
||||
- title: Force a title
|
||||
icon: file-settings-line
|
||||
link: /examples/custom-document
|
||||
- title: A clever editor
|
||||
icon: mental-health-line
|
||||
link: /examples/savvy
|
||||
- title: Interactivity
|
||||
icon: cursor-fill
|
||||
link: /examples/interactivity
|
||||
- title: Syntax highlighting
|
||||
icon: code-box-fill
|
||||
link: /examples/syntax-highlighting
|
||||
|
||||
- title: Guide
|
||||
|
||||
@@ -34,5 +34,5 @@ There is an eslint config that ensures a consistent code style. To check for err
|
||||
## Testing for errors
|
||||
Your pull request will automatically execute all our existing tests. Make sure that they all pass, before sending a pull request. Run all tests locally with `$ yarn run test` or run single tests (e. g. when writing new ones) with `$ yarn run test:open`.
|
||||
|
||||
## Futher questions
|
||||
## Further questions
|
||||
Any further questions? Create a new issue or discussion in the repository. We’ll get back to you.
|
||||
|
||||
Reference in New Issue
Block a user