Using quicktags in widget textarea

  • Resolved Guido

    (@guido07111975)


    8 years, 3 months ago

    Hi,

    My question is simple: how to add quicktags to a textarea which is located inside a widget?

    I have found a very useful tutorial and it works, but not for textarea’s which are located inside a widget. This because each widget has it’s own ID.

    My plugin functions file:

    
function my_custom_quicktags() {
	wp_enqueue_script( 'quicktag_script', plugins_url( '/js/quicktags.js' , __FILE__ ), array('quicktags') ); 
}
add_action( 'admin_print_scripts', 'my_custom_quicktags' );

    My quicktags.js file:

    
jQuery(document).ready(function() { 
	quicktags({	
		id: 'my_textarea_id',
		buttons: 'em,strong,link' 
	});
});

    Textarea ID inside my widget file:

    
id="<?php echo $this->get_field_id('text'); ?>"

    So, how to get textarea ID in my quicktags.js file?

    Guido

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    Hi Guido!

    You could use wp_localize_script().

    The caveat is the ID must be established before the “wp_enqueue_scripts” action fires in the head section. If it’s a fixed value, then it’s no problem, but if it’s assigned dynamically when the widget output occurs, then we have a problem.

    Another approach would be to have jQuery determine the ID by some alternate selector path, which can then be passed to quicktags.

    Thread Starter Guido

    (@guido07111975)

    Hi BC,

    As far as I know you cannot add a textarea ID via localize script.

    Each widget has it’s own id. If my widget is called ‘my-widget’ and my textarea instance is called ‘text’, the textarea ID of widget number 2 will be: 

    
widget-my-widget-2-text

    Even worse, if I haven’t saved the widget yet, it’s called:

    
widget-my-widget-__i__-text

    My conclusion: this might not be the proper way to add quicktags..

    Another approch is to add the quicktag bar to every textarea, so not depending on ID. For example to all textarea’s ending with:

    
text

    How about that?

    Guido

    Moderator bcworkz

    (@bcworkz)

    Yeah, that’s what I meant by assigned dynamically. I suspected as much.

    Then using jQuery selectors would be your best option I think. I’m no jQuery expert but I don’t think wildcard selectors are supported. In any case I’ve never found it necessary, there’s always been enough surrounding context. For example, you could collect all textareas inside of generic div widget containers with the class “my-widget” with jQuery("div.my-widget textarea")

    Then step through the results to get the actual ID of each textarea for use in the quicktags() call.

    BC

    • This reply was modified 8 years, 3 months ago by bcworkz. Reason: corrected typo
    Thread Starter Guido

    (@guido07111975)

    Hi BC,

    I think getting a widget instance outside the widget class is quite difficult and maybe even impossible, check the response in this topic. Also no fix found in my other topic.

    Guido

    Moderator bcworkz

    (@bcworkz)

    I think the SE response is from a PHP perspective, in which case there is great difficulty. But for getting the HTML element’s ID I still think jQuery will work. It will not address the larger issue of getting values out of options in general without some convoluted solution. Even with jQuery, you still would not know which widget is which when it comes to applying user selected options. It’s like the option indexes, you have a list, but no idea what’s what.

    It may have to be whatever action you apply from outside the widget would need to be applied to all instances since each individual one cannot be readily discerned. If someone wished to hide the “phone” field on the signup form for example, isn’t it likely they may wish to hide all instances of the phone field anyway? Controlling each instance individually would be nice, but perhaps offers a level of control very few are really interested in.

    Thread Starter Guido

    (@guido07111975)

    Hi BC,

    In this case it’s the quicktags bar above a textarea. I think you can compare this with the wp_editor in this or this plugin for example. Until now I don’t fully understand how they include the wp_editor without getting issues like mine.

    Guido

    ps. Hiding the Phone field as mentioned in my other (older) topic was about something else (a widget signup form). I did solve that one with a shortcode attribute (the widget includes a separate file with a form which is wrapped in a shortcode).

    Thread Starter Guido

    (@guido07111975)

    Closing this topic, don’t have enough knowledge to make this work.

    Guido

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Using quicktags in widget textarea’ is closed to new replies.

Tags