Enqueue tinymce scripts in case first instance is ajax

[zackphilipps]

This is hacky... but wp doesn't provide a way to decouple the scripts from the editor itself... so we have a hidden editor in case the first tinymce instance is via ajax.

[zackphilipps]

@kevindees after updating to v4 beta, this is still necessary. I saw that you added wp_enqueue_editor to the WordPressEditor class. The problem is that wp_enqueue_editor initializes tinymce with default settings... not even WordPress default settings. On top of that, we have our own customizations which obviously get lost. (All of this only applies if the wysiwyg is added via ajax.)

I checked ACF source and this is how they are handling it as well... a dummy editor. I'm not suggesting this is the best spot for this code, nor am I suggesting you add this anywhere in TR at all. Just documenting all of this and giving you food for thought.

[kevindees]

Hey @zackphilipps

I'll test this out and see how it works here soon. If all looks good I'll merge it in. Can you send me a sample component I can test with you are using?

Thanks, Kevin

[zackphilipps]

@kevindees It's pretty abstracted, so not easily... It's a component with tabs with fields on each one, and one of the tabs has a WordPress editor with these settings:

$config = [
  'toolbar1' => [
    'styleselect',
    'bold',
    'italic',
    'superscript',
    'bullist',
    'numlist',
    'alignleft',
    'aligncenter',
    'alignright'
  ],
  'toolbar2' => [
    'unlink',
    'h_links',
    'h_quote',
    'h_twitter_quote',
    'BlockquoteLeft',
    'BlockquoteCenter',
    'hr',
    'charmap',
    'undo',
    'redo'
  ],
];

echo $form->wpEditor( 'Editor' )
  ->setSettings( [
    'label' => 'Editor',
    'options' => [
      'editor_height' => 300,
      'media_buttons' => true,
      'teeny' => false,
      'tinymce' => [
        'toolbar1' => implode( ' ', $config['toolbar1'] ),
        'toolbar2' => implode( ' ', $config['toolbar2'] )
      ],
    ]
  ] );

[zackphilipps]

And this JS is also required:

TypeRocket.repeaterCallbacks.push(function($template) {
  var $tinymce = $template.find('.wp-editor-area')
  $tinymce.each(function() {
    tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id'))
  })
})

[kevindees]

And this JS is also required:

TypeRocket.repeaterCallbacks.push(function($template) {
  var $tinymce = $template.find('.wp-editor-area')
  $tinymce.each(function() {
    tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id'))
  })
})

Should this be apart of the PR?

[zackphilipps]

@kevindees good point. I'm still finding my way around the new hotness re: webpack. I'll update in the near future.

[zackphilipps]

@kevindees How are you handling assets? I ran npm run prod and got a lot of unexpected changes. Is this the right script? Also what version of node/npm are you using?

Many thanks.

[kevindees]

I'm using the latest LTS version from node. I only run npm run prod when in the typerocket/typerocket folder typerocket/core does not use npm directly. typerocket/core only holds the files for typerocket/typerocket to use.

[zackphilipps]

Oops, I figured out my issue. My fork was out of date. Check out #22 and https://github.com/TypeRocket/typerocket/pull/168