Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Leecason/element-tiptap

๐ŸŒธA modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)
https://github.com/Leecason/element-tiptap

editor element-editor element-ui html-editor i18n prosemirror rich-text rich-text-editor tiptap tiptap-editor vue wysiwyg wysiwyg-editor

Last synced: 3 months ago
JSON representation

๐ŸŒธA modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)

Awesome Lists containing this project

README

        

ElTiptap logo


npm
GitHub Release Date
npm peer dependency version
semantic-release
GitHub

Element Tiptap Editor

A WYSIWYG rich-text editor using [tiptap2](https://github.com/ueberdosis/tiptap) and [Element Plus](https://github.com/element-plus/element-plus) for Vue3

that's easy to use, friendly to developers, fully extensible and clean in design.

## ๐ŸงŠ Legacy

[Element Tiptap 1.0](https://github.com/Leecason/element-tiptap/tree/master)

## ๐Ÿ“” Languages

English | [็ฎ€ไฝ“ไธญๆ–‡](./README_ZH.md)

## ๐ŸŽ„ Demo

๐Ÿ‘‰[https://leecason.github.io/element-tiptap](https://leecason.github.io/element-tiptap)

๐Ÿ‘พ[Code Sandbox](https://codesandbox.io/s/element-tiptap-bwlnj)

## โœจ Features

- ๐ŸŽจUse [element-plus](https://github.com/element-plus/element-plus) components
- ๐Ÿ’…Many out of box [extensions](https://github.com/Leecason/element-tiptap#extensions) (welcome to submit an issue for feature request๐Ÿ‘)
- ๐Ÿ”–Markdown support
- ๐Ÿ“˜TypeScript support
- ๐ŸŒI18n support(`en`, `zh`, `pl`, `ru`, `de`, `ko`, `es`, `zh_tw`, `fr`, `pt_br`, `nl`, `he`). welcome to contribute more languages
- ๐ŸŽˆEvents you might use: `create`, `transaction`, `focus`, `blur`, `destroy`
- ๐Ÿ€Fully extensible, you can customize editor extension and its menu button view
- ๐Ÿ’ปAlso can control the behavior of the editor directly, customize the editor for yourself.

## ๐Ÿ“ฆ Installation

### NPM

```shell
yarn add element-tiptap
```

Or

```shell
npm install --save element-tiptap
```

#### Install plugin

```js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap';
// import ElementTiptap's styles
import 'element-tiptap/lib/style.css';

const app = createApp(App);

// use ElementPlus's plugin
app.use(ElementPlus);
// use this package's plugin
app.use(ElementTiptapPlugin);
// Now you register `'el-tiptap'` component globally.

app.mount('#app');
```

_Or_

#### Partial import

```vue

import { ElementTiptap } from 'element-tiptap';

```

## ๐Ÿš€ Usage

```vue

import { ref } from 'vue';
import {
// necessary extensions
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Strike,
BulletList,
OrderedList,
} from 'element-tiptap';

// editor extensions
// they will be added to menubar and bubble menu by the order you declare.
const extensions = [
Doc,
Text,
Paragraph,
Heading.configure({ level: 5 }),
Bold.configure({ bubble: true }), // render command-button in bubble menu.
Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
Italic,
Strike,
BulletList,
OrderedList,
];

// editor's content
const content = ref(`
<h1>Heading</h1>
<p>This Editor is awesome!</p>
`);

```

## ๐Ÿ“” Props

### extensions

Type: `Array`

You can use the necessary extensions. The corresponding command-buttons will be added by declaring the order of the extension.

All available extensions:

- `Doc`
- `Text`
- `Paragraph`
- `Heading`
- `Bold`
- `Italic`
- `Strike`
- `Underline`
- `Link`
- `Image`
- `Iframe`
- `CodeBlock`
- `Blockquote`
- `BulletList`
- `OrderedList`
- `TaskList`
- `TextAlign`
- `Indent`
- `LineHeight`
- `HorizontalRule`
- `HardBreak`
- `History`
- `Table`
- `FormatClear`
- `Color`
- `Highlight`
- `Print`
- `Fullscreen`
- `SelectAll`
- `FontFamily`
- `FontSize`
- `CodeView`

You can find all extensions docs [here](https://github.com/Leecason/element-tiptap/issues/107).

You can customize the extension. See [Custom extensions](https://tiptap.dev/guide/custom-extensions).

### placeholder

Type: `string`

Default: `''`

When editor is empty, placeholder will display.

```html

```

### content

Type: `string`

Default: `''`

Editor's content

```html

```

or Use `'v-model'`

```html

```

### output

Type: `string`

Default: `'html'`

Output can be defined to `'html'` or `'json'`.

```html

```

further reading: [prosemirror data structure](https://prosemirror.net/docs/guide/#doc)

### readonly

Type: `boolean`

Default: `false`

```html

```

when `readonly` is `true`, editor is not editable.

### spellcheck

Type: `boolean`

Default: `false`

```html

```

Whether the content is spellcheck enabled.

### width, height

Type: `string | number`

A string value with unit or a simple value (the default unit is **`px`**)๏ผš

```html

```

The above example will be converted to:

```css
width: 700px;
height: 100%;
```

### enableCharCount

Type: `boolean`

Default: `true`

Enables or disables the display of the character counter.

### tooltip

Type: `boolean`

Default: `true`

Control if tooltips are shown when getting with mouse over the buttons from the toolbar.

### locale

Specifies the editor i18n language.

```js

import { ElementTiptap } from 'element-tiptap';
import en from 'element-tiptap/lib/locales/en';

```

Available languages:

- `en`(default)
- `zh`
- `pl` by @FurtakM
- `ru` by @baitkul
- `de` by @Thesicstar
- `ko` by @Hotbrains
- `es` by @koas
- `zh_tw` by @eric0324
- `fr` by @LPABelgium
- `pt_br` by @valterleonardo
- `nl` by @Arne-Jan
- `he` by @shovalPMS

Welcome contribution.

## ๐Ÿ‘ฝ Events

### onCreate

```vue

/**
* the tiptap editor instance
* see https://tiptap.dev/api/editor
*/
const onCreate = ({ editor }) => {
// ...
};

```

### onTransaction, onFocus, onBlur, onDestroy

The same as `onCreate`

## ๐Ÿ— Contributing

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

## ๐Ÿ“ Changelog

[Changelog](https://github.com/Leecason/element-tiptap/blob/master/CHANGELOG.md)

## ๐Ÿ“„ License

[MIT](https://github.com/Leecason/element-tiptap/blob/master/LICENSE)

## ๐Ÿ’ Buy Me A Coffee

I am so happy that so many people like this project, and I will do better with your support.


reward
Buy Me A Coffee