Bug in Wysiwyg Editor


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.


Mikołaj Smoleński staff answered 3 years ago

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 commented 3 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.


Mikołaj Smoleński staff answered 3 years ago

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:

enter image description here

What are the steps to reproduce your issue?

Best regards


phopkins@atomsoftware.com.au commented 3 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.


Mikołaj Smoleński staff answered 3 years ago

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 commented 3 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: 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