How to use jquery plugins in node templates?

[vphelipe]

I'm trying to use selectize.js on a node. To insert by dragging I did it like this:

  case 'saved message':
      var idOfElement= Math.random().toString(36).substr(2, 11).toUpperCase();
        var savedmessage = `
        <div>
          <div class="title-box"><i class="fab fa-telegram-plane"></i>Saved message</div>
          <div class="box">
            <p>Select the message</p>
            <select id="`+idOfElement+`" df-salvages>`+
            '<option value="">' + languages['msgauto3'][lng] + '</option>';

        myarray.forEach(function (contact) {
            savedmessage += '<option value="'+contact.id+'">'+contact.name+'</option>'
        })

        savedmessage += `</select>
          </div>
        </div>`;
        editor.addNode('savedmessage', 1, 0, pos_x, pos_y, 'savedmessage', { "saved": 'channel_3'},savedmessage );

        $('#'+idOfElement).selectize({
            maxItems: 1,
            plugins: ['remove_button', 'restore_on_backspace'],
            onChange: function(value) {

                var event = new Event('input', { });

                var element = document.getElementById(iddotrem);
                element.dispatchEvent(event);

           }
        });
        break;

It's not a very elegant way, but it worked. But I'm not sure how to initialize selectize when I use editor.import().
Is there any way I can do this?

[jerosoler]

Use the events.

In this case you can use the import event.

editor.on('import', function(import) {
  console.log(import);
  /** YOUR CODE **/
})

Maybe you could also do the same with nodeCreated.

editor.on('nodeCreated', function(id) {
  console.log("Node created " + id);
  /** YOUR CODE **/
})

[vphelipe]

Thank you for your help! Using the events I was able to change what I wanted. Now I have another question: I need to change the node's html, because the select values can change, I can change the values at runtime, but the node's html remains intact and when I import it, it cannot select a value which does not exist in the saved html. Please what way can I use to change node's html?

[jerosoler]

View:

• dynamically added html is not included in the export data #40