{"id":14973627,"url":"https://github.com/iliyazelenko/tiptap-vuetify","last_synced_at":"2025-05-15T02:09:00.636Z","repository":{"id":38431844,"uuid":"177612672","full_name":"iliyaZelenko/tiptap-vuetify","owner":"iliyaZelenko","description":"Vuetify editor. Component simplifies integration tiptap editor with vuetify.","archived":false,"fork":false,"pushed_at":"2024-07-10T08:42:41.000Z","size":1600,"stargazers_count":820,"open_issues_count":147,"forks_count":129,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-15T02:09:00.447Z","etag":null,"topics":["renderless","renderless-components","tiptap","tiptap-editor","vue","vuejs2","vuetify","vuetify2","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://iliyazelenko.github.io/tiptap-vuetify-demo/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iliyaZelenko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2019-03-25T15:21:44.000Z","updated_at":"2025-05-13T20:18:44.000Z","dependencies_parsed_at":"2023-01-26T06:45:47.028Z","dependency_job_id":"26c790c6-5ceb-4768-a43a-f41caa623870","html_url":"https://github.com/iliyaZelenko/tiptap-vuetify","commit_stats":{"total_commits":246,"total_committers":45,"mean_commits":5.466666666666667,"dds":0.5040650406504066,"last_synced_commit":"fd134fec8aa48ec8dcdff457c4e1a8879c3fa243"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Ftiptap-vuetify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Ftiptap-vuetify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Ftiptap-vuetify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Ftiptap-vuetify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iliyaZelenko","download_url":"https://codeload.github.com/iliyaZelenko/tiptap-vuetify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259384,"owners_count":22040820,"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":["renderless","renderless-components","tiptap","tiptap-editor","vue","vuejs2","vuetify","vuetify2","wysiwyg","wysiwyg-editor"],"created_at":"2024-09-24T13:49:05.871Z","updated_at":"2025-05-15T02:09:00.513Z","avatar_url":"https://github.com/iliyaZelenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"WYSIWYG editor for Vuetify. The editor is based on [tiptap](https://github.com/scrumpy/tiptap) and uses [vuetify's](https://github.com/vuetifyjs/vuetify) components. :muscle:\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/tiptap-vuetify\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/tiptap-vuetify.svg\" alt=\"Version\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/tiptap-vuetify\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dm/tiptap-vuetify.svg\" alt=\"Downloads\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/tiptap-vuetify\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/l/tiptap-vuetify.svg\" alt=\"License\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://circleci.com/gh/iliyaZelenko/tiptap-vuetify\"\u003e\n      \u003cimg src=\"https://circleci.com/gh/iliyaZelenko/tiptap-vuetify.svg?style=svg\" alt=\"CircleCI Build Status\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://lgtm.com/projects/g/iliyaZelenko/tiptap-vuetify/context:javascript\"\u003e\n      \u003cimg alt=\"Language grade: JavaScript\" src=\"https://img.shields.io/lgtm/grade/javascript/g/iliyaZelenko/tiptap-vuetify.svg?logo=lgtm\u0026logoWidth=18\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://standardjs.com/\"\u003e\n      \u003cimg alt=\"codebeat badge\" src=\"https://badgen.net/badge/code%20style/standard/f2a\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/tiptap-vuetify\"\u003e\n      \u003cimg alt=\"codebeat badge\" src=\"https://img.shields.io/badge/size-6.58%20kB-44cc11.svg\" /\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\nIf you have Vuetify `1.x` (not `2.x`), then you can find docs and demo [here](https://github.com/iliyaZelenko/tiptap-vuetify/blob/version-1.x/README.md).\n\n# [DEMO :bomb:](https://iliyazelenko.github.io/tiptap-vuetify-demo)\n\n[\n![](https://p35.f2.n0.cdn.getcloudapp.com/items/qGuDmGEm/Image+2020-02-01+at+10.14.29+AM.png?v=40d834512cb17e777f36c96b622990f2)\n](https://iliyazelenko.github.io/tiptap-vuetify-demo)\n\n\n\n## Navigation\n\n\u003c!-- TOC --\u003e\n\n- [Features](#features)\n- [Installation 🔧](#installation)\n- [Get started](#get-started)\n- [Props](#props)\n- [Events](#events)\n- [Slots](#slots)\n- [Donate 💰 and high support](#donate-creating-code-at-your-request-out-of-turn)\n- [TODO](#todo)\n\n\u003c!-- /TOC --\u003e\n\n## Features\n\n- used vuetify components\n- support for different types of icons ([fa](https://fontawesome.com/),  [md](https://material.io/tools/icons/), [mdi](https://materialdesignicons.com/), [mdiSvg](https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg))\n- internationalization (en, es, fr, pl, ru, uk, ptbr, tr, he, nl, ja, de, ko, zhHans, fa, sv, cs, it, el), with automatic detection of the current language through the Vuetify. You can make a PR for your language if it is not there, [here](https://github.com/iliyaZelenko/tiptap-vuetify/pull/118/files) is an example.\n- markdown support\n- easy to start using\n- props and events are available\n- TypeScript support\n- the project is ready to actively develop if there is support (stars)!\n- the ability to create and use your own extensions\n- choose where the extension buttons should be displayed: in the toolbar or in the bubble menu\n- support for custom image upload. You can use any method of upload through your Vue component.\n- Vuetify `2.x` and `1.x` support\n\n## Installation\n\n```\nyarn add tiptap-vuetify\n# Or \nnpm install --save tiptap-vuetify\n```\n\n\n## Get started\n\n### Nuxt\n\nIf you have Nuxt.js, [here](https://codesandbox.io/s/github/iliyaZelenko/tiptap-vuetify-nuxt/tree/master/) is a simple demo how to integrate it (`@nuxtjs/vuetify` module is used).\nThe code for this example is taken from [this github repository](https://github.com/iliyaZelenko/tiptap-vuetify-nuxt), you can find more infо there.\n\n### NPM (ES modules)\n\n1) Installing the package and Vuetify 2 from scratch:\n\n```js\nimport Vue from 'vue'\nimport Vuetify from 'vuetify'\n// import plugin\nimport { TiptapVuetifyPlugin } from 'tiptap-vuetify'\n// don't forget to import CSS styles\nimport 'tiptap-vuetify/dist/main.css'\n// Vuetify's CSS styles \nimport 'vuetify/dist/vuetify.min.css'\n\n\n// Vuetify Object (as described in the Vuetify 2 documentation)\nconst vuetify = new Vuetify()\n\n// use Vuetify's plugin\nVue.use(Vuetify)\n// use this package's plugin\nVue.use(TiptapVuetifyPlugin, {\n  // the next line is important! You need to provide the Vuetify Object to this place.\n  vuetify, // same as \"vuetify: vuetify\"\n  // optional, default to 'md' (default vuetify icons before v2.0.0)\n  iconsGroup: 'md'\n})\n```\n\nMore about vuetify icons you can read [here](https://vuetifyjs.com/en/components/icons).\n\n2) Use in your component. Here is a complete example:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- Use the component in the right place of the template --\u003e\n    \u003ctiptap-vuetify\n      v-model=\"content\"\n      :extensions=\"extensions\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n// import the component and the necessary extensions\nimport { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'\n\nexport default {\n  // specify TiptapVuetify component in \"components\"\n  components: { TiptapVuetify },\n  data: () =\u003e ({\n    // declare extensions you want to use\n    extensions: [\n      History,\n      Blockquote,\n      Link,\n      Underline,\n      Strike,\n      Italic,\n      ListItem,\n      BulletList,\n      OrderedList,\n      [Heading, {\n        options: {\n          levels: [1, 2, 3]\n        }\n      }],\n      Bold,\n      Code,\n      HorizontalRule,\n      Paragraph,\n      HardBreak\n    ],\n    // starting editor's content\n    content: `\n      \u003ch1\u003eYay Headlines!\u003c/h1\u003e\n      \u003cp\u003eAll these \u003cstrong\u003ecool tags\u003c/strong\u003e are working now.\u003c/p\u003e\n    `\n  })\n}\n\u003c/script\u003e\n```\n\n### CDN\n  \n**Attention: it seems that this method does not work due to the fact that this is not done in the `tiptap` package itself. Therefore, it most likely will not work. [More details](https://github.com/iliyaZelenko/tiptap-vuetify/issues/146#issuecomment-601548526).**\n\nThere is another use case with the script tag (CDN version of package):\n\n```html\n\u003cscript src=\"https://unpkg.com/tiptap-vuetify\"\u003e\u003c/script\u003e\n```\n\nOr\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/tiptap-vuetify\"\u003e\u003c/script\u003e\n```\n\nThe plugin should be installed automatically after connecting the script.\nThe only thing is that the Vuetify object must be set in `window.vuetify` so that the plugin gets access to it.\nWrite if you have questions.\n\n## Props\n\n### placeholder\n\nPlaceholder is displayed when there is no content in the editor.\n\nHow to use:\n\n```vue\n  \u003ctiptap-vuetify\n    placeholder=\"Write something …\"\n  /\u003e\n```\n\n### extensions\n\nYou can use the necessary extensions. The corresponding buttons are added automatically\n(in the order in which you specify the extension).\n\nHow to import and use them can be seen in the example above.\n\nAvailable extensions (native tiptap extensions from `tiptap-extensions` package):\n\n- `Bold`\n- `Italic`\n- `Strike`\n- `Underline`\n- `Code`\n- `CodeBlock`\n- `Image`\n- `Paragraph`\n- `BulletList` or `OrderedList` (use with the `ListItem` extension)\n- `ListItem`\n- `Link`\n- `Blockquote`\n- `HardBreak`\n- `HorizontalRule`\n- `History`\n- `TodoList` (use with the `TodoItem` extension)\n- `TodoItem`\n\nI can easily add more.\n\n### toolbar-attributes\n\nYou can specify your attributes for the toolbar (`\u003cv-toolbar\u003e` vuetify component).\n\nFor example, change the color:\n```vue\n:toolbar-attributes=\"{ color: 'yellow' }\"\n```\n\n### card-props\n\nAllows you to pass props for the editor's `\u003cv-card\u003e`.\n\n```vue\n\u003ctiptap-vuetify\n  :card-props=\"{ flat: true, color: '#26c6da' }\"\n/\u003e\n```\n\n### editor-properties\n\nTiptap `Editor` properties (passed to the constructor).\n\nYou can see the full list of properties [here](https://github.com/scrumpy/tiptap#editor-properties).\n\nThis is the most powerful way to customize the editor for yourself. Pay particular attention to [`editorProps`](https://prosemirror.net/docs/ref/#view.EditorProps).\n\nOnly these properties are not available: `content`, `onUpdate`, they are used in this package.\nIf you want to add extensions to the `extensions` property, then use the `native-extensions` prop of this package.\n\n\n### native-extensions\n\nYou can transfer native extensions (not related to this package) to the [`extensions`](https://tiptap.scrumpy.io/docs/api/classes.html#extensions-2) property.\n\nHow to use:\n\n```vue\n\u003ctiptap-vuetify\n  :native-extensions=\"nativeExtensions\"\n/\u003e\n```\n\n```js\n// You can import from tiptap's built-in extensions\nimport {\n  TrailingNode\n} from 'tiptap-extensions'\n// or your own extension\nimport Title from './Title'\n\n// in script:\ndata () {\n  return {\n    nativeExtensions: [\n      new Title(),\n      new TrailingNode({\n        node: 'paragraph',\n        notAfter: ['paragraph'],\n      })\n    ]\n  }\n}\n```\n\n[Here](https://github.com/iliyaZelenko/tiptap-vuetify/issues/100#issuecomment-551950075) is example of how to create your extension from scratch.\n\n### custom image upload components\nA custom image upload / selection component allows you to upload images to or select images from your application's backend system.\nThe when properly configured, the component will be displayed as a tab in the Add Image window.\n\nTo implement this, first create a component where users can upload and/or select images. The component will not get any props from the image window.\nWhen a user selects an image, the component must emit a `select-file` event with an object containing `src` and `alt` properties.\nFor example:\n```js\nselectImage() {\n  // When doing an asynchronous upload, you can set the src property to the value provided by the server (backend).\n  this.$emit('select-file', { src: '/path/to/image.jpg', alt: 'Uploaded image' });\n}\n```\n\nTo add your component to the image extension, make the following changes:\nImport your component, e.g.\n```js\nimport FileSelector from '~/Components/FileSelector'\n```\nUpdate `tiptap-vuetify :extensions` value for Image as follows:\n```js\n...\n[Image, {\n  options: {\n    imageSources: [\n      { component: FileSelector, name: 'File Selector' }\n    ]\n  }\n}]\n...\n```\nThe value of `name` will be the tab name.\n\nBy default, your component will be added to tiptap-vuetify's own image sources (URL and data url Upload). If you want to exclude these image sources you can set `imageSourcesOverride: true` in the extension's options.\n\nA basic example implementation can be found in the package's demo code in [FileSelector.vue](demo/Components/FileSelector.vue) and [Index.vue](demo/pages/Index.vue).\n\n### output-format\n\nThe format to output from the v-model. This defaults to `html`\n\nFor example, to get json instead:\n```vue\n\u003ctiptap-vuetify\n  output-format=\"json\"\n/\u003e\n```\n\n### disabled\n\nFlag for disabling entire editor (disabled toolbar items and [ready-only](https://tiptap.scrumpy.io/read-only) content area). Default false.\n\nFor example, disabled editor by component prop: \n```vue\n\u003ctiptap-vuetify\n  :disabled=\"editorDisabled\"\n/\u003e\n```\n\n## Events\n\n### init\n\n**first argument** (object):\n```ts\n{\n  // tiptap editor instance\n  editor: Editor\n}\n```\n\nHow to use:\n\n```vue\n\u003ctiptap-vuetify\n  @init=\"onInit\"\n/\u003e\n```\n\n### keydown\n\nCalled when the editor receives a keydown event.\n\n```vue\n\u003ctiptap-vuetify\n  @keydown=\"onKeyDown\"\n/\u003e\n```\n\n``` js\nmethods: {\n  onkeydown (event, view) {\n    console.log('event', event.key)\n  }\n}\n```\n\nNote: if you need to work with the \u003ckbd\u003eEnter\u003c/kbd\u003e, then look [here](https://github.com/iliyaZelenko/tiptap-vuetify/issues/100#issuecomment-551950075).\n\n[What is `view`?](https://prosemirror.net/docs/ref/#view.EditorView)\n\n## Slots\n\n### toolbar\n\nYou can manually display the toolbar. How to use:\n\n1) Since Vue `2.6.0` (new syntax):\n\n```vue\n\u003ctiptap-vuetify\n  v-model=\"content\"\n  :extensions=\"extensions\"\n  :toolbar-attributes=\"{ color: 'yellow' }\"\n\u003e\n  \u003ctemplate #toolbar=\"{ buttons, commands, isActive }\"\u003e\n    \u003c!--You can render the buttons as you wish (you can see in the source code how this is done).--\u003e\n    \u003cpre\u003e{{ buttons }}\u003c/pre\u003e\n  \u003c/template\u003e\n\u003c/tiptap-vuetify\u003e\n```\n\n2) Before `2.6.0`:\n\n```vue\n\u003ctiptap-vuetify\u003e\n  \u003cdiv \n    slot=\"toolbar\" \n    slot-scope=\"{ buttons, commands, isActive }\"\n  \u003e\n    \u003c!--You can render the buttons as you wish (you can see in the source code how this is done).--\u003e\n    \u003cpre\u003e{{ buttons }}\u003c/pre\u003e\n  \u003c/div\u003e\n\u003c/tiptap-vuetify\u003e\n```\n\n### footer\n\nFooter of the Editor.\n\n### toolbar-before\n\nYou can add content before the toolbar.\n\n### toolbar-after\n\nYou can add content after the toolbar.\n\n## Donate (creating code at your request out of turn)\n\nhttps://github.com/iliyaZelenko/tiptap-vuetify/issues/133\n\n## TODO\n\n- better images support: uploading (free hosting by default) [Relevant issue.](https://github.com/iliyaZelenko/tiptap-vuetify/issues/16) Ability to choose your uploading strategy. [Resize](https://github.com/scrumpy/tiptap/issues/333) image and change other params.\n- site with full-docs and examples\n- emoticons\n- tests\n- support for more extensions\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filiyazelenko%2Ftiptap-vuetify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filiyazelenko%2Ftiptap-vuetify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filiyazelenko%2Ftiptap-vuetify/lists"}