Dariusmit

The image is here http://spa.figa.lt/, it’s inside the post. I would like to set a css style for that particular image.

This is crazy how couple lines of code solves my problem.

//this is the solution
$('.addhtml').on("input", function() {
    var input = this.value;
    $('.addhtml').val(input);
});
$('.addhtml').on('keyup', function(e){
    textarea.textarea= $(".addhtml").val();
});
//this is my button
$(document).on('click', 'input.press_div', function(evt){
    if(textarea.textarea=='') {
	textarea.textarea = div;
        $('.addhtml').val(textarea.textarea);
    }
    else {
        textarea.textarea=textarea.textarea + div;
	$('.addhtml').val(textarea.textarea);
    }
    return false;
});

Now my button does not replace the text I type with keyboard anymore. I am happy :).

However when I hit save it still replaces, but that’s not too much a problem. I just need to think off how to force page refresh after user hits save.

My code.

var div = '<div> </div>';
$(document).on('click', 'input.press_div', function(evt){
    if(textarea.textarea=='') {
	textarea.textarea = div;
        $('.addhtml').val(textarea.textarea);
    }
    else {
        textarea.textarea=textarea.textarea + div;
	$('.addhtml').val(textarea.textarea);
    }
    return false;
  });

Okay ye I got it

Finally I got the button doing what it should do.

I enqueued the jquery as you advised and the worked out that if I choose to call to html elements by ID it doesn’t work, but by class it works for some reason. Anyway I don’t know javascript/jquery so it might be the nature of language I dunno.

PHP in plugin file:

function dm_enqueue_scripts()
{
wp_enqueue_script('dm', '/wp-content/plugins/...', null, null, true);
}
add_action('admin_enqueue_scripts', 'dm_enqueue_scripts');

HTML in plugin file:

<input type="button" class="press_b" value="b" />

<textarea class="addhtml" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea[textarea]; ?></textarea>

JQuery in external file:

jQuery(function($){
     $(document).on('click', 'input.press_b', function(evt){
    $('.addhtml').val($('.addhtml').val()+'<b></b>');
    return false;
  });
});

Although I have some issues with widget not saving the <b></b> value.

I am stuck, I tried several approaches, but nothing seems to work, to make that button append the text when I click to the textarea of the wirget.

This is code I got.

<script>
function addHTML_div(){
 $(document).ready(function(){
  $("#add").click(function(){
      $('#txtarea').html('test');
  });
});
 }
</script> 

<script>
function addHTML_b(){
 alert('<?php addhtmltag_b(); ?>');
 }
</script>
<?php

function addhtmltag_div() {
    echo $textarea="<div></div>";
} 

function addhtmltag_b() {
    echo $textarea="<b></b>";
}  

class wp_my_plugin extends WP_Widget {

	// constructor
	function wp_my_plugin() {
            parent::WP_Widget(false, $name = __('My Widget', 'wp_widget_plugin') );
	}

	// widget form creation
	function form($instance) {
            // Check values
            if( $instance) {
            $title = esc_attr($instance['title']);
            $textarea = esc_textarea($instance['textarea']);
            } else {
            $title = '';
            $textarea = '';
            }
            ?>
            <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title', 'wp_widget_plugin'); ?></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>
            <p>
            <label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Textarea:', 'wp_widget_plugin'); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
            </p>
            <p>
            <textarea id="txtarea"></textarea>
            <input type="button" id="add" value="div"></button>
            <button type="button" onclick="addHTML_b()">b</button>
            </p>
            <?php
	}

	// widget update
	function update($new_instance, $old_instance) {
            $instance = $old_instance;
            // Fields
            $instance['title'] = strip_tags($new_instance['title']);
            $instance['textarea'] = strip_tags($new_instance['textarea']);
            return $instance;
	}

	// widget display
	function widget($args, $instance) {
            extract( $args );
            // these are the widget options
            $title = apply_filters('widget_title', $instance['title']);
            $textarea = $instance['textarea'];
            echo $before_widget;
            // Display the widget
            echo '<div class="widget-text wp_widget_plugin_box">';

            // Check if title is set
            if ( $title ) {
            echo $before_title . $title . $after_title;
            }
            // Check if textarea is set
            if( $textarea ) {
            echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>';
            }

            echo '</div>';
            echo $after_widget;
	}

}

Picture of widget.

picture

I googled and actually got the button to execute php function(the button responds and pops me alert with echo in php), but how do I share variable $textarea to actually make $textarea=”<div></div>” since now it does nothing and I think because those variables inside the WP_widget extends class are local. Only my button are inside this class.

<script>
function addHTML(){
 alert('<?php addhtmltag(); ?>');
 }
</script>
<?php

function addhtmltag() {
    echo $textarea="<div></div>";
}

<button type="button" onclick="addHTML()">div</button>