update content, add text align justify

This commit is contained in:
Hans Pagel
2020-11-03 16:13:13 +01:00
parent 3a79b8c564
commit 9bcdb57f14
13 changed files with 110 additions and 145 deletions

View File

@@ -1,5 +1,5 @@
# BulletList
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.

View File

@@ -1,5 +1,5 @@
# OrderedList
This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags,
This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags.
Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.

View File

@@ -1,17 +0,0 @@
# TodoItem
It renders a single toggleable item of a list.
::: warning Restrictions
This extensions is intended to be used with the `TodoList` extension.
:::
## Settings
| Option | Type | Default | Description |
| ------ | ------- | ------- | ------------------------------------- |
| nested | Boolean | false | Specifies if you can nest todo lists. |
## Commands
*None*
## Keyboard shortcuts
*None*

View File

@@ -1,69 +0,0 @@
# TodoList
Renders a toggleable list of items.
::: warning Restrictions
This extensions is intended to be used with the `TodoItem` extension.
:::
## Settings
*None*
## Commands
| Command | Options | Description |
| --------- | ------- | ----------------- |
| todo_list | — | Toggle todo list. |
## Keyboard shortcuts
*None*
## Usage
```markup
<template>
<div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<button type="button" :class="{ 'is-active': isActive.todo_list() }" @click="commands.todo_list">
Todo List
</button>
</editor-menu-bar>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { TodoItem, TodoList } from 'tiptap-extensions'
export default {
components: {
EditorMenuBar,
EditorContent,
},
data() {
return {
editor: new Editor({
extensions: [
TodoItem({
nested: true,
}),
TodoList(),
],
content: `
<ul data-type="todo_list">
<li data-type="todo_item" data-done="true">
Checked item
</li>
<li data-type="todo_item" data-done="false">
Unchecked item
</li>
</ul>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>
```