diff --git a/README.md b/README.md index 628893c..8953253 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -**At the moment, this package does not fully support Vuetify 2, but it is planned soon. If you want me to work more on this project, you can give me motivation in the form of a star. Thanks for attention!** - +If you have Vuetify `1.x` (not `2.x`), then you can find docs and demo [here](https://codesandbox.io/s/p2wnzxyo90?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue). +

Version @@ -26,11 +26,11 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://github.com/scrumpy/tiptap) with [vuetify](https://github.com/vuetifyjs/vuetify). -[DEMO on codesanbox](https://codesandbox.io/s/p2wnzxyo90?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue) +[DEMO on codesanbox](https://codesandbox.io/s/vue-template-6p9wp?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue) [ -![](https://i.imgur.com/vfKWfkv.png) -](https://codesandbox.io/s/p2wnzxyo90?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue) +![](https://d1sz9tkli0lfjq.cloudfront.net/items/0s2E3A433x1A2b1l3q24/Image%202019-10-07%20at%203.30.03%20AM.png) +](https://codesandbox.io/s/vue-template-6p9wp?fontsize=14&module=%2Fsrc%2Fexamples%2FSimple.vue) ## Navigation @@ -43,7 +43,6 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://gi - [Props](#props) - [Events](#events) - [Slots](#slots) -- [Frequent issues](#frequent-issues) - [TODO](#todo) @@ -59,6 +58,7 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://gi - the project is ready to actively develop if there is support (stars)! - the ability to create and use your own extensions - choose where the extension buttons should be displayed: in the toolbar or in the bubble menu +- Vuetify `2.x` and `1.x` support ## Installation @@ -71,18 +71,28 @@ npm install --save tiptap-vuetify ## Get started -1) Add `Vue.use` for plugin. You can select your icons group (`iconsGroup`, `'md'` by default). +1) Installing the package and Vuetify 2 from scratch: ```js import Vue from 'vue' +import Vuetify from 'vuetify' +// import plugin import { TiptapVuetifyPlugin } from 'tiptap-vuetify' -// don't forget to import styles +// don't forget to import CSS styles import 'tiptap-vuetify/dist/main.css' +// Vuetify's CSS styles +import 'vuetify/dist/vuetify.min.css' + + +// Vuetify Object (as described in the Vuetify 2 documentation) +const vuetify = new Vuetify() -// first it +// use Vuetify's plugin Vue.use(Vuetify) -// AFTER Vue.use(Vuetify) !!! +// use this package's plugin Vue.use(TiptapVuetifyPlugin, { + // the next line is important! You need to provide the Vuetify Object to this place. + vuetify, // same as "vuetify: vuetify" // optional, default to 'md' (default vuetify icons before v2.0.0) iconsGroup: 'md' }) @@ -95,56 +105,46 @@ More about vuetify icons you can read [here](https://vuetifyjs.com/en/components ```vue ``` +The plugin should be installed automatically after connecting the script. +The only thing is that the Vuetify object must be set in `window.vuetify` so that the plugin gets access to it. +Write if you have questions. + ## Props ### placeholder @@ -321,38 +325,10 @@ You can add content before the toolbar. You can add content after the toolbar. -## Frequent issues - -### A La Carte / VuetifyLoaderPlugin - -You may receive an error like this: - -``` -[Vue warn]: Unknown custom element: - did you register -the component correctly? For recursive components, -make sure to provide the "name" option. -``` - -To solve it, specify for Vuetify that you want to use components that this package uses: - -``` -Vue.use(Vuetify, { - components: { - VTextField, - VTooltip, - VToolbar, - VCard, - VIcon, - VBtn, - } -}); -``` - -In the future version this problem will most likely be solved and you will not need to do anything. - ## TODO - images uploading (free hosting by default) [Relevant issue.](https://github.com/iliyaZelenko/tiptap-vuetify/issues/16) -- site with docs and examples +- site with full-docs and examples - emoticons - tests +- support for more extensions diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue index a1cfada..fe92986 100644 --- a/src/components/Toolbar.vue +++ b/src/components/Toolbar.vue @@ -68,8 +68,11 @@ export default class Toolbar extends Vue { .tiptap-vuetify-editor__toolbar .v-toolbar display: flex + height: auto !important + padding: 5px .v-toolbar__content height: auto !important flex-wrap: wrap + padding: 0 diff --git a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue index c3e1cb0..af2facf 100644 --- a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue +++ b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue @@ -88,7 +88,7 @@ export default class ExtensionActionRenderBtn extends Vue {