1

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. enter image description here

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

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
    }
}
0

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.

  • No logs in the console unfortunately (with preserve log checked). Tried deactivating all plugins except the one in question and same issue. – Aidan Waite May 19 '16 at 16:02
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.