Come si aggiungono i pulsanti della barra degli strumenti a un menu a discesa personalizzato in stagno?

Question

Ho creato un menu a discesa personalizzato in TinyMCE come questo:

tinymce.init({ 
    toolbar: "alignment", 

    setup: function(editor) { 
     editor.addButton('alignment', { 
      type: 'menubutton', 
      text: 'Alignment', 
      icon: false, 
      menu: [ 
       { text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}}, 
       { text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}}, 
       { text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}}, 
       { text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}}, 
      ] 
     }); 

    } 

}); 

che crea questo:

Tuttavia quello che vorrei è quello di spostare solo i pulsanti di allineamento dalla principale barra degli strumenti nel menu a discesa.

Come faccio a mettere questi pulsanti reali dalla barra degli strumenti, in un menu a discesa? È come il codice sopra o è un modo completamente diverso?

Quindi, in pratica, posizionare questi pulsanti nel menu a discesa sopra con gli stati di attivazione/disattivazione.

Answer 1

Prova questa impostazione - Plunker

tinymce.init({ 
    selector: "textarea", 
    toolbar: "styleselect | bold italic | alignment | alignmentv2", 
    setup: function(editor) { 
     editor.addButton('alignment', { 
      type: 'listbox', 
      text: 'Alignment', 
      icon: false, 
      onselect: function(e) { 
      tinyMCE.execCommand(this.value()); 
      }, 
      values: [ 
       {icon: 'alignleft', value: 'JustifyLeft'}, 
       {icon: 'alignright', value: 'JustifyRight'}, 
       {icon: 'aligncenter', value: 'JustifyCenter'}, 
       {icon: 'alignjustify', value: 'JustifyFull'}, 
      ], 
      onPostRender: function() { 
      // Select the firts item by default 
      this.value('JustifyLeft'); 
      } 
     }); 

     editor.addButton('alignmentv2', { 
      type: 'menubutton', 
      text: 'Alignment v2', 
      icon: false, 
      menu: [ 
       {icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }}, 
       {icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }} 
      ] 
     }); 
    } 
}); 

Answer 2

@NoBugs, è possibile migliorare il metodo onselect per eseguire l'aggiornamento icona di allineamento.

Dapprima, esaminando struttura this oggetto nel metodo onselect vedremo che this.settings.values esercizi di proprietà un array con valori definiti all'inizio.

Utilizzando una delle molte funzioni di utilità find otteniamo l'oggetto valore selezionato e aggiornare l'icona in base alle esigenze:

onselect: function() { 
    selectedItem = find(this.settings.values, {value: this.value()}) 
    this.icon(selectedItem.icon) 
    tinyMCE.execCommand(this.value()); 
} 

Speranza, questo aiuta. Saluti!

Answer 3

Probabilmente è meglio risolverlo utilizzando un pulsante di divisione personalizzato. In questo modo possiamo assegnare l'ultima opzione selezionata al pulsante principale.

vedere il risultato qui - CodePen

tinymce.init({ 
    selector: '#editor', 
    menubar: false, 
    toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent', 

    setup: function (editor) { 
    editor.on('init', function() { 
     this.getDoc().body.style.fontSize = '16px'; 
     this.getDoc().body.style.fontFamily = 'Georgia'; 
    }); 
    editor.addButton('alignmentsplit', { 
     type: 'splitbutton', 
     text: '', 
     icon: 'alignleft', 
     onclick: function(e) { 
     tinyMCE.execCommand(this.value); 
     }, 
     menu: [{ 
      icon: 'alignleft', 
      text: 'Align Left', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyLeft'); 
      this.parent().parent().icon('alignleft'); 
      this.parent().parent().value = 'JustifyLeft' 
      } 
     }, { 
      icon: 'alignright', 
      text: 'Align Right', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyRight'); 
      this.parent().parent().icon('alignright'); 
      this.parent().parent().value = 'JustifyRight'; 
      } 
     }, { 
      icon: 'aligncenter', 
      text: 'Align Center', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyCenter'); 
      this.parent().parent().icon('aligncenter'); 
      this.parent().parent().value = 'JustifyCenter'; 
      } 
     }, { 
      icon: 'alignjustify', 
      text: 'Justify', 
      onclick: function() { 
      tinyMCE.execCommand('JustifyFull'); 
      this.parent().parent().icon('alignjustify'); 
      this.parent().parent().value = 'JustifyFull'; 
      } 
     } 
     ], 
     onPostRender: function() { 
     // Select the first item by default 
     this.value ='JustifyLeft'; 
     } 
    }); 
    } 
}); 

Nota: Se si ri-selezionare un'opzione di allineamento sul contenuto che è già allineato in questo modo, TinyMCE commuta l'allineamento formattazione off. Questo è il comportamento predefinito di TinyMCE, ma è necessario indicare che la sezione dispone già di quella formattazione tramite uno stato di attivazione/disattivazione sul pulsante affinché ciò abbia più senso per l'utente. Questo non è stato implementato sopra.