Topic: How to initialize WYSIWYG on a dynamically generated HTML element?

Marvin Herbold priority asked 3 years ago

Simple question - how do you initialize WYSIWYG on a dynamically generated HTML element?

For example, to initialize form-outline on dynamically generated HTML elements, one would do:

        document.querySelectorAll( '.form-outline' ).forEach( ( element ) =>
            new mdb.Input( element ).init();
        } );

To start off with initializing WYSIWYG on dynamically generated HTML elements I have the following so far...

        document.querySelectorAll( '.wysiwyg' ).forEach( ( element ) =>
            // what to do here?
        } );

Thank you for your help.

Grzegorz Bujański staff answered 3 years ago

In fact, WYSIWYG must be initialized on a div element. You can add these attributes via JS.

document.querySelector('.wysiwyg-textarea').dataset.myCustomAttribute = 'value';

Marvin Herbold priority answered 3 years ago

I tried that already (it was the first thing I tried) - but when I do that, I get an error -

all.min.js:323 Uncaught TypeError: Illegal invocation
at Object.find (all.min.js:323)
at o.value (all.min.js:323)
at new o (all.min.js:323)
at HTMLTextAreaElement.<anonymous> (index.js?v=10:199)
at Function.each (jquery-3.5.1.min.js:2)
at S.fn.init.each (jquery-3.5.1.min.js:2)
at Object.processElements (index.js?v=10:197)
at Object.complete (index.js?v=10:338)
at c (jquery-3.5.1.min.js:2)
at Object.fireWith (jquery-3.5.1.min.js:2)

After checking the documents some more, it looks like I cannot use WYSIWYG on a textarea element - I must be using a div element instead. Unfortunately, there are attributes that I need to have set on the textarea element for my code to work -- so I need to do some thinking.

Grzegorz Bujański staff answered 3 years ago

Try this:

const wysiwygInstance = new WYSIWYG(element);

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No