WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 months ago

#36689 closed defect (bug) (maybelater)

New WPLink in Modal Window

Reported by: berengerzyla Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.5.1
Component: TinyMCE Keywords:
Focuses: javascript, administration Cc:
PR Number:

Description

Hello!

I have an issue with the last WPLink.

I use an editor in a TinyMCE window (editor.windowManager.open), instantiated as follow:

$.extend( {}, tinyMCEPreInit.mceInit.content, {

	body_class: 'description',
	selector: '#description',
	toolbar1: 'bold,italic,link,unlink',
	toolbar2: '',
	toolbar3: '',
	toolbar4: '',
	theme_advanced_statusbar_location: 'none',
	elementpath: false,
	wpautop: false,
	remove_linebreaks: false,
	forced_root_block : "",
	apply_source_formatting: true

} );

This version doesn't work anymore (used to), for in wpview/plugin.js, it throws an error, as I want to edit without the p tags.

{{{Uncaught TypeError: first.getBoundingClientRect is not a function
line 243 of wpview/plugin.js.}}}

But even if I comment out wpautop and force_root_block in the initialization, the WPLink won't show up.
It gets populated (the link url is put into wp-link-preview), if I look at the DOM, but is not positioned and stays at display:none.

Any idea? Any tip on how I could debug that?

Thank you!

Change History (3)

#1 @berengerzyla
4 years ago

Here is some more information about the context:

  • The modal is tied to a button in the main editor, and then adds a shortcode/placeholder.
  • The form of the modal is taken from a template.

Here is the opening segment:

editor.windowManager.open( {

  html: this.template_form( […] ),
  onpostRender: function() {

    var options = $.extend( {}, tinyMCEPreInit.mceInit.content, {

      body_class: 'description',
      selector: '#description',
      toolbar1: 'bold,italic,link,unlink',
      toolbar2: '',
      toolbar3: '',
      toolbar4: '',
      theme_advanced_statusbar_location: 'none',
      elementpath: false,
      wpautop: false,
      remove_linebreaks: false,
      forced_root_block : "",
      apply_source_formatting: true

    } );

    tinymce.init( options );
    tinyMCE.execCommand( 'mceAddEditor', false, 'description' );

  },
  onclose: function() {

    tinyMCE.execCommand( "mceRemoveEditor", false, 'description' );

  },

} );

… and a simple extract of my field in the template:

<div class="form-group row">
  <label class=col-sm-3 for=description>{{ data.labels.description }}</label>
  <div class=col-sm-9>
    <textarea class="form-control tinymce form-control-sm" name=description id=description rows="3">{{ data.values.description }}</textarea>
  </div>
</div>

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


3 years ago

#3 @azaozz
4 months ago

  • Resolution set to maybelater
  • Status changed from new to closed

Looking again, still can't figure out what the problem is. The code that used to throw that error doesn't exist any more in wpview/plugin.js. From the wp-link popup not showing up it sounds like some code is not running. TinyMCE silences some errors in its plugins to prevent them from bringing the whole editor down.

In any case, this is now superseded by the block editor. Closing as maybelater. Feel free to reopen if you were able to figure out what the cause is. Adding another TinyMCE instance inside of a dialog of a TinyMCE instance seems like may be causing conflicts between the two instances.

Note: See TracTickets for help on using tickets.