Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (9 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 @shovalPMSWelcome 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.