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

admin管理员组

文章数量:1122832

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

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

• widgets
• tinymce
• wp-editor

Share Improve this question edited May 19, 2016 at 16:06 Aidan Waite asked May 19, 2016 at 10:58 Aidan WaiteAidan Waite 1133 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： tinymcewpeditor in widget breaks after save (no buttons and visual tab broken)