{"id":15028942,"url":"https://github.com/leecason/element-tiptap","last_synced_at":"2025-05-14T11:12:38.740Z","repository":{"id":36819929,"uuid":"225157643","full_name":"Leecason/element-tiptap","owner":"Leecason","description":"🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)","archived":false,"fork":false,"pushed_at":"2024-01-31T00:11:28.000Z","size":7559,"stargazers_count":1448,"open_issues_count":163,"forks_count":171,"subscribers_count":14,"default_branch":"next","last_synced_at":"2025-05-10T12:39:27.582Z","etag":null,"topics":["editor","element-editor","element-ui","html-editor","i18n","prosemirror","rich-text","rich-text-editor","tiptap","tiptap-editor","vue","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://element-tiptap.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Leecason.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-12-01T12:28:01.000Z","updated_at":"2025-05-08T06:23:54.000Z","dependencies_parsed_at":"2023-01-17T05:10:49.346Z","dependency_job_id":"9ec830dc-0f9d-4f50-85bf-024d441a19a4","html_url":"https://github.com/Leecason/element-tiptap","commit_stats":{"total_commits":599,"total_committers":16,"mean_commits":37.4375,"dds":"0.21368948247078468","last_synced_commit":"56fafdf382fdd626f295c2c93ade8f7fb0d10840"},"previous_names":[],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Felement-tiptap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Felement-tiptap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Felement-tiptap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leecason%2Felement-tiptap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Leecason","download_url":"https://codeload.github.com/Leecason/element-tiptap/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129525,"owners_count":22019628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","element-editor","element-ui","html-editor","i18n","prosemirror","rich-text","rich-text-editor","tiptap","tiptap-editor","vue","wysiwyg","wysiwyg-editor"],"created_at":"2024-09-24T20:09:24.231Z","updated_at":"2025-05-14T11:12:33.712Z","avatar_url":"https://github.com/Leecason.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/leecason"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/Leecason/element-tiptap\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"/demos/assets/logo_for_github.png?raw=true\" alt=\"ElTiptap logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/element-tiptap\"\u003e\n  \u003cimg alt=\"GitHub Release Date\" src=\"https://img.shields.io/github/release-date/Leecason/element-tiptap\"\u003e\n  \u003cimg alt=\"npm peer dependency version\" src=\"https://img.shields.io/badge/vue-%5E3.0.0-vue\"\u003e\n  \u003cimg alt=\"semantic-release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\"\u003e\n  \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/Leecason/element-tiptap\"\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eElement Tiptap Editor\u003c/h3\u003e\n\nA WYSIWYG rich-text editor using [tiptap2](https://github.com/ueberdosis/tiptap) and [Element Plus](https://github.com/element-plus/element-plus) for Vue3\n\nthat's easy to use, friendly to developers, fully extensible and clean in design.\n\n## 🧊 Legacy\n\n[Element Tiptap 1.0](https://github.com/Leecason/element-tiptap/tree/master)\n\n## 📔 Languages\n\nEnglish | [简体中文](./README_ZH.md)\n\n## 🎄 Demo\n\n👉[https://leecason.github.io/element-tiptap](https://leecason.github.io/element-tiptap)\n\n👾[Code Sandbox](https://codesandbox.io/s/element-tiptap-bwlnj)\n\n## ✨ Features\n\n- 🎨Use [element-plus](https://github.com/element-plus/element-plus) components\n- 💅Many out of box [extensions](https://github.com/Leecason/element-tiptap#extensions) (welcome to submit an issue for feature request👏)\n- 🔖Markdown support\n- 📘TypeScript support\n- 🌐I18n support(`en`, `zh`, `pl`, `ru`, `de`, `ko`, `es`, `zh_tw`, `fr`, `pt_br`, `nl`, `he`). welcome to contribute more languages\n- 🎈Events you might use: `create`, `transaction`, `focus`, `blur`, `destroy`\n- 🍀Fully extensible, you can customize editor extension and its menu button view\n- 💻Also can control the behavior of the editor directly, customize the editor for yourself.\n\n## 📦 Installation\n\n### NPM\n\n```shell\nyarn add element-tiptap\n```\n\nOr\n\n```shell\nnpm install --save element-tiptap\n```\n\n#### Install plugin\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport ElementPlus from 'element-plus';\nimport ElementTiptapPlugin from 'element-tiptap';\n// import ElementTiptap's styles\nimport 'element-tiptap/lib/style.css';\n\nconst app = createApp(App);\n\n// use ElementPlus's plugin\napp.use(ElementPlus);\n// use this package's plugin\napp.use(ElementTiptapPlugin);\n// Now you register `'el-tiptap'` component globally.\n\napp.mount('#app');\n```\n\n_Or_\n\n#### Partial import\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-tiptap ...\u003e\u003c/el-tiptap\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ElementTiptap } from 'element-tiptap';\n\u003c/script\u003e\n```\n\n## 🚀 Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-tiptap v-model:content=\"content\" :extensions=\"extensions\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport {\n  // necessary extensions\n  Doc,\n  Text,\n  Paragraph,\n  Heading,\n  Bold,\n  Underline,\n  Italic,\n  Strike,\n  BulletList,\n  OrderedList,\n} from 'element-tiptap';\n\n// editor extensions\n// they will be added to menubar and bubble menu by the order you declare.\nconst extensions = [\n  Doc,\n  Text,\n  Paragraph,\n  Heading.configure({ level: 5 }),\n  Bold.configure({ bubble: true }), // render command-button in bubble menu.\n  Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.\n  Italic,\n  Strike,\n  BulletList,\n  OrderedList,\n];\n\n// editor's content\nconst content = ref(`\n  \u003ch1\u003eHeading\u003c/h1\u003e\n  \u003cp\u003eThis Editor is awesome!\u003c/p\u003e\n`);\n\u003c/script\u003e\n```\n\n## 📔 Props\n\n### extensions\n\nType: `Array`\n\nYou can use the necessary extensions. The corresponding command-buttons will be added by declaring the order of the extension.\n\nAll available extensions:\n\n- `Doc`\n- `Text`\n- `Paragraph`\n- `Heading`\n- `Bold`\n- `Italic`\n- `Strike`\n- `Underline`\n- `Link`\n- `Image`\n- `Iframe`\n- `CodeBlock`\n- `Blockquote`\n- `BulletList`\n- `OrderedList`\n- `TaskList`\n- `TextAlign`\n- `Indent`\n- `LineHeight`\n- `HorizontalRule`\n- `HardBreak`\n- `History`\n- `Table`\n- `FormatClear`\n- `Color`\n- `Highlight`\n- `Print`\n- `Fullscreen`\n- `SelectAll`\n- `FontFamily`\n- `FontSize`\n- `CodeView`\n\nYou can find all extensions docs [here](https://github.com/Leecason/element-tiptap/issues/107).\n\nYou can customize the extension. See [Custom extensions](https://tiptap.dev/guide/custom-extensions).\n\n### placeholder\n\nType: `string`\n\nDefault: `''`\n\nWhen editor is empty, placeholder will display.\n\n```html\n\u003cel-tiptap placeholder=\"Write something …\" /\u003e\n```\n\n### content\n\nType: `string`\n\nDefault: `''`\n\nEditor's content\n\n```html\n\u003cel-tiptap :content=\"content\" @onUpdate=\"onEditorUpdate\" /\u003e\n```\n\nor Use `'v-model'`\n\n```html\n\u003cel-tiptap v-model:content=\"content\" /\u003e\n```\n\n### output\n\nType: `string`\n\nDefault: `'html'`\n\nOutput can be defined to `'html'` or `'json'`.\n\n```html\n\u003cel-tiptap output=\"json\" /\u003e\n```\n\nfurther reading: [prosemirror data structure](https://prosemirror.net/docs/guide/#doc)\n\n### readonly\n\nType: `boolean`\n\nDefault: `false`\n\n```html\n\u003cel-tiptap readonly /\u003e\n```\n\nwhen `readonly` is `true`, editor is not editable.\n\n### spellcheck\n\nType: `boolean`\n\nDefault: `false`\n\n```html\n\u003cel-tiptap spellcheck\u003e \u003c/el-tiptap\u003e\n```\n\nWhether the content is spellcheck enabled.\n\n### width, height\n\nType: `string | number`\n\nA string value with unit or a simple value (the default unit is **`px`**)：\n\n```html\n\u003cel-tiptap :width=\"700\" height=\"100%\"\u003e \u003c/el-tiptap\u003e\n```\n\nThe above example will be converted to:\n\n```css\nwidth: 700px;\nheight: 100%;\n```\n\n### enableCharCount\n\nType: `boolean`\n\nDefault: `true`\n\nEnables or disables the display of the character counter.\n\n### tooltip\n\nType: `boolean`\n\nDefault: `true`\n\nControl if tooltips are shown when getting with mouse over the buttons from the toolbar.\n\n### locale\n\nSpecifies the editor i18n language.\n\n```js\n\u003ctemplate\u003e\n  \u003cel-tiptap :locale=\"en\"\u003e\u003c/el-tiptap\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ElementTiptap } from 'element-tiptap';\nimport en from 'element-tiptap/lib/locales/en';\n\u003c/script\u003e\n```\n\nAvailable languages:\n\n- `en`(default)\n- `zh`\n- `pl` by @FurtakM\n- `ru` by @baitkul\n- `de` by @Thesicstar\n- `ko` by @Hotbrains\n- `es` by @koas\n- `zh_tw` by @eric0324\n- `fr` by @LPABelgium\n- `pt_br` by @valterleonardo\n- `nl` by @Arne-Jan\n- `he` by @shovalPMS\n\nWelcome contribution.\n\n## 👽 Events\n\n### onCreate\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-tiptap @onCreate=\"onCreate\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n/**\n * the tiptap editor instance\n * see https://tiptap.dev/api/editor\n */\nconst onCreate = ({ editor }) =\u003e {\n  // ...\n};\n\u003c/script\u003e\n```\n\n### onTransaction, onFocus, onBlur, onDestroy\n\nThe same as `onCreate`\n\n## 🏗 Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## 📝 Changelog\n\n[Changelog](https://github.com/Leecason/element-tiptap/blob/master/CHANGELOG.md)\n\n## 📄 License\n\n[MIT](https://github.com/Leecason/element-tiptap/blob/master/LICENSE)\n\n## 💝 Buy Me A Coffee\n\nI am so happy that so many people like this project, and I will do better with your support.\n\n\u003cp\u003e\n  \u003cimg alt=\"reward\" src=\"/public/wechat_reward_qrcode.jpg?raw=true\" width=\"300\"\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/leecason\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-blue.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecason%2Felement-tiptap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleecason%2Felement-tiptap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecason%2Felement-tiptap/lists"}