Example:
Note: use this function if tag problem htmlspecialchars_decode()
<?php
class Editor_Fields_Widget extends WP_Widget {
function __construct() {
// Instantiate the parent object
$widget_ops = array(
'classname' => 'widget_title_fields_entries',
'description' => esc_attr__('WP Editor Field Widget - Created by deshisoft', 'eye-theme')
);
$control_ops = array(
'width' => 275
);
parent::__construct( false, 'WP Editor Field Widget', $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
extract( $args );
// Widget output
$title = apply_filters('widget_title', $instance['title']);
// WP Editor
$content = apply_filters( 'wp_editor', $instance['content'] );
echo $before_widget;
echo '<div style="border:1px solid #ddd; background:#f6f6f6;padding:15px;">';
echo esc_attr($title);
echo $content;
echo '</div>';
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
// Save widget options
$instance = array();
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['content'] = ( !empty($new_instance['content']) ? $new_instance['content'] : '' );
return $instance;
}
function form( $instance ) {
// Output admin widget options form
$title = $instance['title'];
$text = $instance['text']; ?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>
<?php if ( isset($instance['content']) ) { $content = $instance['content'];}
else {$content = "";}
//$output_title = ( isset($instance['output_title']) && $instance['output_title'] == "1" ? true : false );
?>
<input type="hidden" id="<?php echo $this->get_field_id('content'); ?>" name="<?php echo $this->get_field_name( 'content' ); ?>" value="<?php echo esc_attr($content); ?>">
<p>
<a href="javascript:WPEditorWidget.showEditor('<?php echo $this->get_field_id( 'content' ); ?>');" class="button"><?php _e( 'Edit content', 'wp-editor-widget' ) ?></a>
</p>
<?php
}
}
function editor_field_register_widgets() {
register_widget( 'Editor_Fields_Widget' );
}
add_action( 'widgets_init', 'editor_field_register_widgets' );
//add_action('widgets_init',array( $this, 'editor_field_register_widgets' ) );
/**
* WP Editor Widget singelton
*/
class WPEditorWidget{
/**
* Action: init
*/
public function __construct() {
add_action( 'load-widgets.php', array( $this, 'load_admin_assets' ) );
add_action( 'load-customize.php', array( $this, 'load_admin_assets' ) );
add_action( 'widgets_admin_page', array( $this, 'output_wp_editor_widget_html' ), 100 );
//add_action( 'customize_controls_print_footer_scripts', array( $this, 'output_wp_editor_widget_html' ), 1 );
add_action( 'customize_controls_print_scripts', array( $this, 'output_wp_editor_widget_html' ), 1 );
//add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_controls_print_footer_scripts' ), 2 );
add_action( 'customize_controls_print_scripts', array( $this, 'customize_controls_print_scripts' ), 2 );
add_filter( 'wp_editor_widget_content', 'wptexturize' );
add_filter( 'wp_editor_widget_content', 'convert_smilies' );
add_filter( 'wp_editor_widget_content', 'convert_chars' );
add_filter( 'wp_editor_widget_content', 'wpautop' );
add_filter( 'wp_editor_widget_content', 'shortcode_unautop' );
add_filter( 'wp_editor_widget_content', 'do_shortcode', 11 );
} // END __construct()
/**
* Action: load-widgets.php
* Action: load-customize.php
*/
public function load_admin_assets() {
wp_register_script( 'wp-editor-widget-js', get_bloginfo('template_url') . '/inc/wp-editor-widget/js/admin.js', array( 'jquery' ));
wp_enqueue_script( 'wp-editor-widget-js' );
wp_register_style( 'wp-editor-widget-css', get_bloginfo('template_url') . '/inc/wp-editor-widget/css/admin.css', array() );
wp_enqueue_style( 'wp-editor-widget-css' );
} // END load_admin_assets()
/**
* Action: widgets_admin_page
* Action: customize_controls_print_footer_scripts
*/
public function output_wp_editor_widget_html() {
?>
<div id="wp-editor-widget-container" style="display: none;">
<a class="close" href="javascript:WPEditorWidget.hideEditor();" title="<?php esc_attr_e( 'Close', 'wp-editor-widget' ); ?>">
<span class="icon"></span></a>
<div class="editor">
<?php
$settings = array(
'media_buttons' => true,
//'textarea_rows' => 10,
'editor_height' => 230,
'teeny' => true,
);
wp_editor('', 'wpeditorwidget', $settings );
?>
<p>
<a href="javascript:WPEditorWidget.updateWidgetAndCloseEditor(true);" class="button button-primary"><?php _e( 'Save and close', 'wp-editor-widget' ); ?></a>
</p>
</div>
</div>
<div id="wp-editor-widget-backdrop" style="display: none;"></div>
<?php
} // END output_wp_editor_widget_html
} // END class WPEditorWidget
global $wp_editor_widget;
$wp_editor_widget = new WPEditorWidget;
?>
Theme Folder -> function.php
Add this line:
require get_template_directory() . '/inc/wp-editor-widget/wp_editor_widget.php'; // inc folder name depend on your theme.