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)

Host: GitHub
URL: https://github.com/Leecason/element-tiptap
Owner: Leecason
License: mit
Created: 2019-12-01T12:28:01.000Z (almost 5 years ago)
Default Branch: next
Last Pushed: 2024-01-31T00:11:28.000Z (10 months ago)
Last Synced: 2024-08-06T12:00:32.774Z (3 months ago)
Topics: editor, element-editor, element-ui, html-editor, i18n, prosemirror, rich-text, rich-text-editor, tiptap, tiptap-editor, vue, wysiwyg, wysiwyg-editor
Language: TypeScript
Homepage: https://element-tiptap.vercel.app/
Size: 7.21 MB
Stars: 1,305
Watchers: 15
Forks: 161
Open Issues: 166
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        




  

  

  

  

  



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.