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
```
## 🚀 Usage
```vue
```
## 📔 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
```
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
```
### 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.
