Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chinacarlos/web-element-tiptap
https://github.com/chinacarlos/web-element-tiptap
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/chinacarlos/web-element-tiptap
- Owner: ChinaCarlos
- License: mit
- Created: 2020-09-10T03:24:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-10T03:28:41.000Z (over 4 years ago)
- Last Synced: 2024-08-19T13:48:34.988Z (5 months ago)
- Language: JavaScript
- Size: 947 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Element Tiptap Editor
A WYSIWYG rich-text editor using [tiptap](https://github.com/scrumpy/tiptap) and [Element UI](https://github.com/ElemeFE/element) for Vue.js
that's easy to use, friendly to developers, fully extensible and clean in design.
## 📔 Languages
English | [简体中文](./README_ZH.md)
## 🎄 Demo
👉[https://leecason.github.io/element-tiptap](https://leecason.github.io/element-tiptap)(`demo of latest version`)
👾[Code Sandbox](https://codesandbox.io/s/element-tiptap-bwlnj)(`demo of version 1.14.0`)
## ✨ Features
- 🎨Use [element-ui](https://github.com/ElemeFE/element) 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`). welcome to contribute more languages
- 🎈Events you might use: `init`, `transaction`, `focus`, `blur`, `paste`, `drop`, `update`
- 🍀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 Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// import ElementUI's styles
import 'element-ui/lib/theme-chalk/index.css';
// import this package's styles
import 'element-tiptap/lib/index.css';
// use ElementUI's plugin
Vue.use(ElementUI);
// use this package's plugin
Vue.use(ElementTiptapPlugin, { /* plugin options */ });
// Now you register `'el-tiptap'` component globally.
```
Default plugin options:
```js
{
lang: "en", // see i18n
spellcheck: true, // can be overwritten by editor prop
}
```
_Or_
#### Partial import
```vue
import { ElementTiptap } from 'element-tiptap';
export default {
components: {
'el-tiptap': ElementTiptap,
},
};
```
## 🌐 I18n
You can declare when you install the plugin.
```js
Vue.use(ElementTiptapPlugin, {
lang: 'zh',
});
```
Available languages:
- `en`(default)
- `zh`
- `pl` by @FurtakM
- `ru` by @baitkul
- `de` by @Thesicstar
Welcome contribution.
## 🚀 Usage
```vue
import {
// necessary extensions
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Strike,
ListItem,
BulletList,
OrderedList,
} from 'element-tiptap';
export default {
data () {
// editor extensions
// they will be added to menubar and bubble menu by the order you declare.
extensions: [
new Doc(),
new Text(),
new Paragraph(),
new Heading({ level: 5 }),
new Bold({ bubble: true }), // render command-button in bubble menu.
new Underline(),
new Italic(),
new Strike(),
new ListItem(),
new BulletList(),
new OrderedList(),
],
// editor's content
content: `
<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`
- `ListItem`
- `BulletList` (use with `ListItem`)
- `OrderedList` (use with `ListItem`)
- `TodoItem`
- `TodoList` (use with `TodoItem`)
- `TextAlign`
- `Indent`
- `LineHeight`
- `HorizontalRule`
- `HardBreak`
- `TrailingNode`
- `History`
- `Table` (use with `TableHeader`, `TableCell`, `TableRow`)
- `TableHeader`
- `TableCell`
- `TableRow`
- `FormatClear`
- `TextColor`
- `TextHighlight`
- `Preview` (New)
- `Print` (New)
- `Fullscreen` (New)
- `SelectAll` (New)
- `FontType` (New)
You can customize the extension menu button view
1) create your custom extension.
```js
// create your extension file
import { Bold } from 'element-tiptap';
export default class CustomBold extends Bold {
menuBtnView (editorContext) {
// editorContext contains some properties that are useful to you, such as isActive, commands, etc
// more detailed docs check this https://github.com/scrumpy/tiptap#editormenubar
// this package append editor instance to editorContext
return {
component: CustomButton, // your component
componentProps: { // bind to your component with v-bind
...
},
componentEvents: { // bind to your component with v-on
...
},
},
}
}
```
2) use custom extension in component
```vue
import CustomBold from '...'; // import your extension
export default {
...
data () {
return {
extensions: [
...
new CustomBold(),
],
};
},
};
```
[Here](https://github.com/Leecason/element-tiptap/issues/10#issuecomment-600979545) is the example of how to create your extension button view (an extension can also render multiple menu buttons).
### editorProps
Type: `Object`
Default: `{}`
A powerful prop, you can use this prop to control the behavior of the editor directly, customize the editor for yourself.
See the list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps).
### 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: plugin `spellcheck` option value
```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%;
```
## 👽 Events
### Init
```vue
export default {
...
methods: {
/*
* the tiptap editor instance
* see https://tiptap.scrumpy.io/docs/guide/editor.html
*/
onInit ({ editor }) {
},
},
},
```
### Transaction, Focus, Blur, Paste, Drop
The same as `init`
## ⚗️ Slots
### menubar
You can customize the menubar and will receive some properties through a scoped slot.
properties: [https://github.com/scrumpy/tiptap#editormenubar](https://github.com/scrumpy/tiptap#editormenubar)
```html
Bold
```
### menububble
Customize the bubble menu like menubar.
properties: [https://github.com/scrumpy/tiptap#editormenububble](https://github.com/scrumpy/tiptap#editormenububble)
```html
Bold
```
### footer
Footer of the editor, after the editor content.
## 🏗 Contributing 
1. 🍴Fork it
2. 🔀Create your branch: `git checkout -b your-branch`
3. 🎨Make your changes
4. 📝Commit your changes with [Semantic Commit Messages (recommended)](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)
5. 🚀Push to the branch: `git push origin your-branch`
6. 🎉Submit a PR to `develop` branch
_OR_
Just submit an [issue](https://github.com/Leecason/element-tiptap/issues)! - any helpful suggestions are welcomed. 😜
## 📝 Changelog
[Changelog](https://github.com/Leecason/element-tiptap/blob/master/CHANGELOG.md)
## 📄 License
[MIT](https://github.com/Leecason/element-tiptap/blob/master/LICENSE)
## 🚩TODO
I'm continuously working to add in new features 💪.
- [x] demo page
- [x] `Table` extension
- [x] `Iframe` extension
- [x] `FontType` extension
- [ ] `FontSize` extension
- [x] `TextColor` extension
- [x] `TextHighlight` extension
- [ ] `Emoji` extension
- [x] `Fullscreen` extension
- [x] `Print` extension
- [x] `Preview` extension
- [x] `SelectAll` extension
- [x] i18n
- [x] readonly editor
- [x] image resizable
- [ ] theme