wp_editor in widget breaks after save (no buttons and visual tab broken)

My goal is to get wp_editor working in a simple widget which the admin can use to add text content on an admin options page.

Here we go in wp-admin/widgets.php everything looks sooo good right.

When we try to save... Oh no..... Buttons are gone and the Visual tab no longer works

When I look at the HTML it appears as though after updating TinyMCE just decides it doesn't need to load any buttons... Any ideas?

Edit: here's the source for the plugin I wrote that's throwing this error

add_action('widgets_init', 'string_example_name_init');

function string_example_name_init()
{
    register_widget('string_example_name');
}

class string_example_name extends WP_Widget
{
    public function __construct()
    {
        $widget_details = array(
            'classname' = 'string_example_name',
            'description' = 'String Example Name'
        );

        parent::__construct('string_example_name', 'String Example Name', $widget_details);
    }

    public function form($instance)
    {
        $textcontent = '';
        if( !empty( $instance['textcontent'] ) ) {
            $textcontent = $instance['textcontent'];
        }

        ?

        div class="string-arena-gods" id="texxxt"
            ?php
            $rand    = rand( 0, 999 );
            $ed_id   = $this-get_field_id( 'wp_editor_' . $rand );
            $ed_name = $this-get_field_name( 'wp_editor_' . $rand );

            printf(
                'input type="hidden" id="%s" name="%s" value="%d" /',
                $this-get_field_id( 'the_random_number' ),
                $this-get_field_name( 'the_random_number' ),
                $rand
            );


            $content   = 'Hello World!';
            $editor_id = $ed_id;

            $settings = array(
                'media_buttons' = false,
                'textarea_rows' = 3,
                'textarea_name' = $ed_name,
                'teeny'         = true,
            );


            wp_editor( $content, $editor_id, $settings );
            ?
        /div

        div class='mfc-text'

        /div

        ?php

        echo $args['after_widget'];
    }

    public function update( $new_instance, $old_instance ) {
        $rand = (int) $new_instance['the_random_number'];
        $editor_content = $new_instance[ 'wp_editor_' . $rand ];
        $new_instance['wp_editor_' . $rand] = $editor_content;
        return $new_instance;
    }

    public function widget( $args, $instance ) {
        extract( $args );
        $textcontent = apply_filters( 'textcontent', $instance['textcontent'] );
        ?

        div class="string widget flex"
            ?php


            ?
        /div
        ?php
    }
}

Topic wp-editor tinymce widgets Wordpress

Category Web

1
answered at

I did search much and I did solve such;

standard wdiget class;

class tinyMCE_add_than_affter extends WP_Widget {
    public function __construct() {
         /*addscript*/       
        add_action('admin_enqueue_scripts', array($this => 'add_tinymce_script_css_plugin'));
        $widget_options = array(
            'classname' => 'tinymce_widget',
            'description' => 'TinyMCE Editor',
        );
        parent::__construct('', 'Tiny MCE Editor', $widget_options);
    }
     /*****Important******/
    function add_tinymce_script_css_plugin($hook) {
        if ('widgets.php' == $hook):

            $baseurl = includes_url('js/tinymce');
            $cssurl = includes_url('css/');
            $pluginurl = includes_url('js/tinymce/plugins/');
            $widgettinymcejsurl = plugins_url();
            $pluginnames = [
                'compat3x',
                'wordpress',
                'textcolor',
                'colorpicker'
            ];
            global $tinymce_version;
            $version = 'ver=' . $tinymce_version;
            $css = $cssurl . 'editor.css';
            wp_register_script('tinymce_script_add', "{$baseurl}/tinymce.min.js?$version", array('jquery'), false, TRUE);
            wp_enqueue_script('tinymce_script_add');
            foreach ($pluginnames as $name) {
                wp_register_script("tinymce_script_plugin_add_{$name}", "{$pluginurl}/{$name}/plugin.min.js?$version", array('jquery'), false, TRUE);
                wp_enqueue_script("tinymce_script_plugin_add_{$name}");
            }
            wp_register_style('tinymce_css', $css);
            wp_enqueue_style('tinymce_css');
             /*my script for tinyMCE active*/
            wp_register_script('tinymce_widget_script_add', "{$widgettinymcejsurl}/widget_form_tinymce.js", array('jquery'), false, TRUE);
            wp_enqueue_script('tinymce_widget_script_add');
        endif;
    }

    public function widget($args, $instance) {
        //some code
    }

    public function form($instance) {
        $rand = rand(0, 999);
        $ed_id = $this->get_field_id('tinymce_textarea' . $rand);
        $ed_name = $this->get_field_name('tinymce_textarea' . $rand);
        $rand_id=$this->get_field_id('rand');
        $rand_name=$this->get_field_name('rand');
        extract($instance,EXTR_SKIP);
        ?>
        <label for="<?php esc_attr_e($ed_id); ?>">
            <?php _e("TinyMCE editor"); ?>
        </label>
        <textarea name="<?php esc_attr_e($ed_name); ?>" id="<?php esc_attr_e($ed_id); ?>" cols="30" rows="10">
            <?php _e($tinymce_textarea); ?>
        </textarea>
        <input type="hidden" id="<?php esc_attr_e($rand_id); ?>" name="<?php esc_attr_e($rand_name); ?>" />
        <?php
    }

    public function update($newInstance, $oldInstance) {
        $rand=$newInstance['rand'];
        $instance['tinymce_textarea']=$newInstance['tinymce_textarea'.$rand];
        return $instance;
    }

}

we arrange widget_form_tinymce.js

jQuery(function ($) {
var options={
        selector: 'textarea[id*=tinymce_textarea]',
            height: 200,
            theme: 'modern',
            plugins: ["textcolor colorpicker"],
            toolbar1: 'bold,italic,underline,bullist,numlist,link,unlink,forecolor,undo,redo,alignleft,aligncenter,alignright,alignjustify,styleselect,formatselect,fontselect,fontsizeselect,fullscreen,forecolor,backcolor,textcolorselect'
        };
    tinyMCE.init(options);
    $(document).find('input[id*=savewidget]').hover(function () {
        tinyMCE.triggerSave();
    });

    $(document).on('widget-updated', function (event, $widget) {
        tinyMCE.remove();
        tinyMCE.init(options);
    });
}

Good Luck.

1
answered at

When you hit save, open your console and log any errors. Also tick 'Preserve Log' so you can see any errors when you are changing page. Perhaps your theme is conflicting with a plugin or with wordpress.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.