I’ve wanted to create a custom widget in WordPress. For better UX, I want to insert a minimal TinyMCE WYSIWYG editor into the widget.
MY PROBLEM
I’ve integrated the WYSIWYG with the wp_editor() function, but when I enter a value and hit the save button, the buttons disappear and the text is white (but still there).
In firebug, following errors are listed :
-
D.hasChildNodes is not a function (editor-template.js, line 1)
-
NS_ERROR_UNEXPECTED: (tiny_mce.js, line 1)
Here’s the code I’ve got so far:
MY CODE
Form function:
public function form( $instance ) {
//$pages =
$settings = array(
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,underline',
'theme_advanced_buttons2' => '',
'theme_advanced_buttons3' => ''
),
'textarea_name' => $this->get_field_name( 'description' )
);
if ( $instance ) {
$title = $instance[ 'title' ];
$page = $instance['page'];
$description = $instance['description'];
$image_uri = $instance['image_uri'];
} else {
$title = __( 'New title', 'wpb_widget_domain' );
$page = __( 'New Page', 'wpb_widget_domain' );
$image_uri = __( 'New Image', 'wpb_widget_domain' );
$description = __( 'New Description', 'wpb_widget_domain' );
}
?>
[some code that doesn't matter]
<p>
<label for="<?php echo $this->get_field_id( 'description' ); ?>"><?php _e( 'Description:' ); ?></label><br />
<?php wp_editor( $description, $this->get_field_id( 'description' ), $settings ) ?>
</p>
[some code that doesn't matter]
<?php
}
Update function:
public function update( $new_instance, $old_instance ) {
var_dump($new_instance);
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['page'] = ( ! empty( $new_instance['page'] ) ) ? strip_tags( $new_instance['page'] ) : '';
$instance['image_uri'] = ( ! empty( $new_instance['image_uri'] ) ) ? strip_tags( $new_instance['image_uri'] ) : '';
$instance['description'] = ( ! empty( $new_instance['description'] ) ) ? strip_tags( $new_instance['description'] ) : '';
return $instance;
}
One other thing that may be important:
When I dump the $_POST, the value of the description field is not updated.
Anyone?
Thanks in advance.
HS.
I think this is a tinymce core bug which occurs when the method
remove()
on the editor is called. Which tinymce version are you using?