Froala Editor

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/css/froala_editor.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/css/froala_style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/js/froala_editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/js/plugins/link.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/js/plugins/video.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/css/plugins/video.min.css">
<button class="clear">
  Clear Zones
</button>
<div class="testingZone">
  <div id="editorA">Editor A</div>
</div>

JavaScript

var popup_select = '';
var globalVariable = 'default';

let optArticle = [
  [
    "Articolo 1",
    "Sottotitolo Articolo 1",
    "Lorem ipsum dolor sit ame."
  ],
  [
    "Articolo 2",
    "Sottotitolo Articolo 2",
    "Lorem ipsum dolor sit amet."
  ]
];
let optRequisiti = [
  [
    "Requisito 1",
    "Sottotitolo Requisito 1",
    "Lorem ipsum dolor sit ame."
  ],
  [
    "Requisito 2",
    "Sottotitolo Requisito 2",
    "Lorem ipsum dolor sit amet."
  ]
];
let optCosts = [
  [
    "Costo 1",
    "Sottotitolo Costo 1",
    "Lorem ipsum dolor sit ame."
  ],
  [
    "Articolo 2",
    "Sottotitolo Articolo 2",
    "Lorem ipsum dolor sit amet."
  ]
];


$.extend($.FroalaEditor.POPUP_TEMPLATES, {
  "customPlugin.popup": '[_BUTTONS_][_CUSTOM_LAYER_]'
});


// Define popup buttons.
$.extend($.FroalaEditor.DEFAULTS, {
  popupButtons: ['my_dropdown', 'popupClose', '|', 'popupButton1', 'popupButton2', 'popupButton3', 'popupButton4'],
});

// The custom popup is defined inside a plugin (new or existing).
$.FroalaEditor.PLUGINS.customPlugin = function(editor) {
  // Create custom popup.
  function initPopup() {
    // Popup buttons.
    var popup_buttons = '';

    // Create the list of buttons.
    if (editor.opts.popupButtons.length > 1) {
      popup_buttons += '<div class="fr-buttons">';
      popup_buttons += editor.button.buildList(editor.opts.popupButtons);
      popup_buttons += '</div>';
    }

    // Load popup template.
    var template = {
      buttons: popup_buttons,
      //        custom_layer: '<ul><li>Requisiti</li><li>Criteri</li><li>Costi</li></ul>'
      //custom_layer: '<p>Requisiti</p><p>Criteri</p><p>Costi</p>'
      custom_layer: ''
    };

    // Create popup.
    var $popup = editor.popups.create('customPlugin.popup', template);

    return $popup;
  }


  //function logCustom_layer(){
  //var $layers = editor.popups.get('customPlugin.popup');
  //console.log($layers);
  //}

  // Show the popup
  function showPopup() {
    // Get the popup...