Acf block + custom tinymce button postmeta database duplication

• PacomeGcom

• September 14, 2021 at 5:52 am

Hello, first, thanks for acf it’s amazing !

I come today to, if possible, get help about and edge case that doesn’t make sense to me. I’m using ACF to generate custom blocks + i’m using ACF js api to customise tinymce ( custom init settings, toolbars and a custom button ).

Toolbars and init settings are working as intended.

The thing is, when loading tinymce in backoffice every postmeta is duplicated in the database. It causes problems to save changes and it’s a pain to deal with once datas start getting duplicated.

My first guess is, my function to add custom button to editor is bad. I tought i understood the tinymce setup function just right but it seems like i dont.

Things i already tried to fix my problem before posting here to get help if possible :
Using wysiwyg_tinymce_init in place of wysiwyg_tinymce_settings to store my setup function, problem being, when switching the block from edit to view i lose my custom tinymce button.

So my questions are : what am i doing wrong with my custom button ? what are the good practices to add button to tinymce using ACF api ?

acf.add_filter('wysiwyg_tinymce_settings', function( mceInit, id, field ){
    mceInit.verify_html = false;
    mceInit.plugins = 'textcolor,colorpicker,lists,fullscreen,image,wordpress,wpeditimage,wplink,hr';
    mceInit.toolbar1 = 'formatselect,bold,italic,underline,strikethrough,forecolor,blockquote,hr';
    mceInit.toolbar2 = 'alignleft,aligncenter,alignright,alignjustify,bullist,numlist,link,unlink,undo,redo,removeformat,customButton';
    mceInit.setup = function(ed){
        ed.addButton( 'customButton', {
            type: 'button',
            text: 'Ajouter un bouton',
            onclick: function() {
                ed.insertContent('test');
            }
        });
    }
    return mceInit;
});

• PacomeGcom

• September 15, 2021 at 9:08 am

I found a solution to my problem by adding the custom button another way :

In functions.php :

// Prevent empty tags from being removed by TinyMCE
add_filter('tiny_mce_before_init', 'add_my_options');
function add_my_options($opt) {
    $opt['extended_valid_elements'] = '*[*]';
    return $opt;
}

add_action( 'after_setup_theme', 'arch_theme_setup' );
if ( ! function_exists( 'arch_theme_setup' ) ) {
  function arch_theme_setup(){
    add_action( 'init', 'arch_buttons' );
  }
}

if ( ! function_exists( 'arch_buttons' ) ) {
  function arch_buttons() {
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
          return;
      }
      add_filter( 'mce_external_plugins', 'arch_add_buttons' );
      add_filter( 'mce_buttons', 'arch_register_buttons' );
  }
}
if ( ! function_exists( 'arch_add_buttons' ) ) {
  function arch_add_buttons( $plugin_array ) {
      $plugin_array['archbtn'] = get_template_directory_uri().'/lib/blocks/blockscript/custom-button.js';
      return $plugin_array;
  }
}
if ( ! function_exists( 'arch_register_buttons' ) ) {
  function arch_register_buttons( $buttons ) {
      array_push( $buttons, 'archbtn' );
      return $buttons;
  }
}

custom-button.js :

(function() {
    tinymce.PluginManager.add('archbtn', function( editor, url ) {
        editor.addButton( 'archbtn', {
            type: 'button',
            text: 'Ajouter un bouton',
            onclick: function() {
                editor.insertContent('test');
            }
        });
    });
})();

I still plan on using acf js api for this kind of thing because i found it to be cleaner. But i still don’t understand why my database entry in postmeta table got duplicated everytime tinymce was loaded.

So if anybody knows why it is doing this, i’m very curious and want to understand 🙂 !

Have a nice day