Topic: Bug in Wysiwyg Editor
There is a bug in the Wysiwyg Editor. The editor relies on the v-tippy vue.js library which is not packaged with the editor. Either include the package or remove use of v-tippy.
Thank you.
Hi there again,
To make it work you will have to update your main.js file in the same way as in the MDB Wysiwyg template. You need to add bootstrap css, FA5 and declare v-tippy directive. It should look like this:
import 'bootstrap-css-only/css/bootstrap.min.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import Tippy from 'v-tippy'
import 'v-tippy/dist/tippy.css'
Vue.use(Tippy, {
position: 'bottom',
arrow: true
})
new Vue({
render: h => h(App),
}).$mount('#app')
Best regards
phopkins@atomsoftware.com.au free commented 5 years ago
Excellent. Thank you very much Mikolaj. Could you please add this installation information to the documentation for those of us that just grab the control and expect it to work.
Thank you again.
Hi there again,
I just downloaded MDB Wysiwyg editor and after installation it starts with no errors. How can I reproduce your issues?
Best regards
phopkins@atomsoftware.com.au free commented 5 years ago
Hi Mikolaj, I can reproduce the issue in a standard clean environment.
vue create my-project
Cd my-project
npm install git+https://oauth2:{my key}@git.mdbootstrap.com/mdb/vue/vu-pro.git --save
Copy the wysiwyg library in place and then run:
Npm install mdb-wysiwyg-1.0.0.tgz --save
Include the wysiwyg editor example on the website and then have a look in the debug console for the error.
Thank you.
Hi there,
I've just checked the package and in my opinion v-tippy is correctly included in the plugin as a dependency. Here's the package.json config:
What are the steps to reproduce your issue?
Best regards
phopkins@atomsoftware.com.au free commented 5 years ago
Hi Mikolaj, I've just looked into it further and the problem isn't that the v-tippy library is missing, I just didn't see it, but I get 14 warnings from Vue:
[Vue warn]: Failed to resolve directive: tippy
(found in at node_modules/mdb-wysiwyg/src/components/mdbWysiwygToolbar.vue)
Thank you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.8.3
- Device: Desktop PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No