Questo snippet serve a inserire un editor TinyMCE in un form o sostituire una textarea del sito. L'editor può essere inserito in vari modi in base all'utilizzo finale quindi qui cercherò di dare esempi generali.

Nota: Utilizzare un metodo solo per pagina altrimenti ci potrebbero essere errori javascript.

Form metabox frontend submission

Utilizzando l'estensione metabox frontend submission è possibile inserire l'editor proprio come se fosse un campo personalizzato di una metabox. E' poi possibile personalizzarlo tramite il metabox builder grafico grazie alle dot notation come da documentazione metabox. Per collegarlo a campi specifici wordpress potrebbe essere utilizzato anche l'hook rwmb_frontend_after_process, esempio:

add_action( 'rwmb_frontend_after_process', function( $config, $post_id ){
  if( $config['id'] === 'id-metabox' ){
    //codice per ottenere un campo e copiarne il contenuto nel titolo/contenuto/ecc...
  }
}, 10, 2 );

Sostituzione di una textarea esistente, tinymce preregistrato da wordpress

Partendo da una semplice textarea è possibile sostituirla con l'editor tinymce integrato in wordpress seguendo questi passaggi di esempio:

1. accodare lo script tinymce da wordpress utilizzando il blocco gpci/head selezionando script, handle e inserendo wp-tinymce nell'id dell'handle
2. creare la textarea semplice con il blocco gutenberg campo del form e assegnare almeno un id
3. utilizzare il controllo javascript e inserire questo codice di esempio da modificare a piacimento:

TinyMceTextarea = GetCurrentBlockFromCurrentScript();
DynamicVar = 'TinyMceTextareaVar'+PinElement( TinyMceTextarea );
DynamicVars[DynamicVar] = function( element ){
  document.addEventListener( 'DOMContentLoaded', function(){
    let selector = '#'+GetElementFromAttribute( element.firstElementChild, name='id', value=false, direction='nextElementSibling', compare='hasAttribute' ).id;
    tinymce.init( {
      selector:selector,
      height:300,
      menubar:false,
      toolbar:"undo redo | bold italic | alignleft aligncenter alignright | copy | fontfamily | plugin_esterno | pulsante_aggiungi_shortcode",
      //external_plugins:{ 'plugin_esterno':'url_file_javascript' },
      setup:function( editor ){
        //aggiorna la textarea originale in tempo reale
        editor.on( 'input', function(){ document.querySelector( selector ).value = editor.getContent(); } );

        editor.on( 'init', function(){
          let textarea = document.querySelector( selector );					
          textarea.removeAttribute( 'aria-hidden' );
          textarea.style['display'] = 'block';
          textarea.style['margin-top'] = '140px';
          textarea.style['width'] = '280px';
          textarea.style['position'] = 'absolute';
          textarea.style['z-index'] = '-1';
    	} );

        editor.addButton( 'pulsante_aggiungi_shortcode',{				
          text:'Inserisci Shortcode',
          onclick:function(){ editor.insertContent( '[shortcode_personalizzato]' ); },
        } );
      }
    } );
  } );
}
DynamicVars[DynamicVar]( TinyMceTextarea );

Sostituzione di una textarea esistente, TinyMce ufficiale

Come sopra ma utilizzando TinyMce ufficiale per avere una versione più recente e un miglior supporto plugins e documentazione:

1. scaricare TinyMce dal sito ufficiale o dall'account su questo sito
2. estrarre tutto il contenuto in una cartella del sito come: sito/wp-content/themes/gpci-child/js/tinymce/
3. accodare lo script tinymce utilizzando il blocco gpci/head selezionando script, handle e inserendo:
   id handle: tinymce
   src: url del file tinymce.min.js; esempio: https://www.sito/wp-content/themes/gpci-child/js/tinymce/tinymce.min.js
4. creare la textarea semplice ad esempio con il blocco gutenberg campo del form e assegnarle un id
5. utilizzare il controllo javascript del blocco e inserire questo codice di esempio da modificare a piacimento (notare che alcuni nomi funzione e proprietà oggetto tra TinyMce originale e quello integrato in wordpress sono diversi):

TinyMceTextarea = GetCurrentBlockFromCurrentScript();
DynamicVar = 'TinyMceTextareaVar'+PinElement( TinyMceTextarea );
DynamicVars[DynamicVar] = function( element ){	
  document.addEventListener( 'DOMContentLoaded', function(){
  let selector = '#'+GetElementFromAttribute( element.firstElementChild, name='id', value=false, direction='nextElementSibling', compare='hasAttribute' ).id;
  tinymce.init( {
    selector:selector,
    height:300,
    menubar:true,
    toolbar:"undo redo | bold italic | alignleft aligncenter alignright | copy | fontfamily | code | plugin_esterno | pulsante_aggiungi_shortcode",
    plugins:"code",
    //external_plugins:{ 'plugin_esterno':'url_file_javascript' },
    setup:function( editor ){
      //aggiorna la textarea originale in tempo reale
      editor.on( 'input', function(){ document.querySelector( selector ).value = editor.getContent(); } );

      //questa parte serve se la textarea originale ha l'attributo required
      editor.on( 'init', function(){
        let textarea = document.querySelector( selector );
        textarea.removeAttribute( 'aria-hidden' );
        textarea.style['display'] = 'block';
        textarea.style['margin-top'] = '140px';
        textarea.style['width'] = '280px';
        textarea.style['position'] = 'absolute';
      } );

      //questa parte serve ad aggiungere un pulsante per inserire contenuto personalizzato (come uno shortcode)
      editor.ui.registry.addButton( 'pulsante_aggiungi_shortcode', {
        text:'Inserisci Shortcode',
        onAction:function(){ editor.insertContent( '[shortcode_personalizzato]' ); }
      } );
    }
  } );
 }
DynamicVars[DynamicVar]( TinyMceTextarea );