Support

Account

Register Login

Home › Forums › Search › Search Results for 'Wysiwyg'

Search Results for 'Wysiwyg'

reply

  • HI John,
    That is great, but now how do I loop through the ACF input/textarea fields within that row? In the example:

    acf.add_action('append', function( $el ){
	
	// $el will be equivalent to the new element being appended $('tr.row')
	
	
	// find a specific field
	var $field = $el.find('#my-wrapper-id');
	
	
	// do something to $field
	
});

    I do not understand the $el.find(‘#my-wrapper-id’);. I do not know what the ID of this new row is.

    I was trying to do $el.each(‘input’) or something like that and couldn’t get this to work.

    After a second or whatever, then newly-created row seems to have an ID of sizzle1529351842030 and when you create another row, the previous sizzle-row loses its ID, and so on. Where does the “sizzle” get its numeric portion (1529351842030)? Is that related to the ACF internal ID or is it just a timestamp?

    So what I would like is a way to access all of the ACF inputs/text areas, buttons, selects, on that new row, as I want to populate it dynamically. Also, I am unsure how to set the contents of an ACF wysiwyg (tinymce) field.

  • I think I have part of it figured out, but I have reached the limits of what I know about with jQuery. I have a repeater row set up with various inputs, including a WYSIWYG editor. I would like to add a copy/paste button so I can just duplicate that row’s contents, or even go to another Post and paste a row.

    So far, I have figured out how to add a copy button, and how to add a paste button (which basically creates a row).

    Here is what I have so far; can someone review and help me figure out how to access each of the fields in a repeater row via Javascript?

    // first make some buttons that we are adding dynamically:
var acf_paste_button = '<a class="acf-button button" id="acf_paste_row" href="#" data-event="paste-row">Paste Row</a>';
// TODO: Give the copy button a FA of acf-font icon
var acf_copy_button = '<a class="small acf_copy_row" href="#" data-event="copy-row" title="Click to copy this row">C</a>';
// global: Keep track of button-pasted state:
var acf_button_pasted = false;
// add a button to the bottom of the actions area:
$('.acf-actions').prepend(acf_paste_button);
// add some copy buttons to each row in the ACF:
$('td.acf-row-handle').append(acf_copy_button)
//when you click the paste row button, send a click to the "add row" button
$('body').on('click','#acf_paste_row', function() {
	$('.acf-button.button.button-primary').click();
	acf_button_pasted = true;
});

// when you click the coyp row, put it into a cookie
$('body').on('click','.acf_copy_row', function() {
	alert('todo: COPY the inputs of this row into a cookie');
});

// listen for pasting events:
acf.add_action('append', function( $el ){
	// $el will be equivalent to the new element being appended $('tr.row')	
	if (	acf_button_pasted ) {
		// so we just added a row; now we need to add a copy button for it:
		$el.find('td.acf-row-handle').append(acf_copy_button);		

		// find a specific field
		console.log($el);
		var $field = $el.find('#my-wrapper-id');
		var $field = $el.find('.acf-row');
		console.log($field);
		console.log('now it is time to paste the stuff');
		// set the flag back to false in case you want to paste again.
		acf_button_pasted = false;
		// .acf-input-wrap 
		// do something to $field
		// TODO: Paste values into each of the inputs.
		$el.find('input').val('fish');
		// how to access a WYSIWYG editor?
		//tinymce.activeEditor.execCommand('mceInsertContent', false, " <b>bolded text</b> ");
		$('.tmce-active').execCommand('mceInsertContent', false, " <b>bolded text</b> ");
		// TODO: run through each element
		$el.each( 'input', function(el) {
			console.log(el);
		});
	}
});

  • Hi Wibi,

    Did you ever figure out a solution to this? Wanting to do something similar – limit what options are available on the WYSIWYG in the acf_form for user-generated content.

    Thanks!

  • Not that this is really a solution(since it doesn’t solve 4.X), but as a final resort I upgraded to 5.6.X and I now can see the WYSIWYG editor.

  • Reviving this thread yet again. What demo38 suggests in the post above would be the ideal solution, ACF having a height field for WYSIWYG fields.

    Thanks Elliot!

  • Same problem here. It doesn’t work if I try getitng the unformatted value and applying the filters as John suggested above.

    The gravity forms shortcode works fine in the main editor, but not in my ACF wysiwyg editor.

  • guy_b solution:

    
//Remove WPAUTOP from ACF TinyMCE Editor
function acf_wysiwyg_remove_wpautop() {
    remove_filter('acf_the_content', 'wpautop' );
}
add_action('acf/init', 'acf_wysiwyg_remove_wpautop');<code></code>

    worked for me
    both on field and subfield

    Thanks!

  • Hi James, thanks for looking into this. On further investigation it seems to be a conflict with Woocommerce. The bug does not appear without Woocommerce installed and active, so the steps to reproduce are…

    1) install fresh WordPress
    2) install ACF Pro
    3) install Woocommerce
    4) add ACF wysiwyg field to pages
    5) add an embeddable youtube video URL to the wysiwyg field on a page (video appears)
    6) Save page

    Now when you navigate away you get “Changes you made may not be saved.”. Sometimes you have to click on the page (say, to close the ‘page updated’ message) to get the ‘unsaved changes’ message when navigating away, but other times it appears just by reloading via browser address bar.

    Disable woocomemrce and the problem goes away. Add the youtube URL to the main content rather than the ACF wysiwyg and the problem does not occur (this only occurs with auto embed URLs in the ACF wysiwyg).

  • My issue is as follows. I am creating a shortcode which outputs the ACF form with a custom field group. Some of those fields will update the corresponding user fields. I want to have users update their profiles using ACF and custom fields like apartment number and phone(s)

    1. First problem is that the ACF form outputted by the shortcode is going outside of the WYSIWYG editor and the container. You can see that in Screenshot A. B. and C.

    2. My other problem is that I want the email to not update if it already exists. So if the user enters an email already taken by another user I’d like it to show an error at the top of the page and not submit any values. Actually it would be even better if it showed as an error. See Screenshot G. But what happens is it posts and then the error is just on a page with nothing else. See screenshot D. The email is also updated anyway – see screenshot E. Although the ACF is updated but not the WordPress user which makes sense because it must be unique. See screenshot F.

    Screenshots

    ACF form generated from field group. Email, first name, lastname, meant to update the corresponding user fields.
    https://zorahosting.com/user form.png

    Here is the container showing a custom class ‘form-update-container’. This is the container of the shortcode
    A. https://zorahosting.com/form-update-container.png

    This is the shortcode in the WYSIWYG WordPress editor
    B. https://zorahosting.com/userupdate-shortcode.png

    Shortcode is not showing up in the container but outside of it
    C. https://zorahosting.com/outside-of-container.png

    Error: ‘the email already exists’ shows up on a new page. I’d like the error to show up somewhere else. either at top or bottom of form. In the #message part above the form.
    D. https://zorahosting.com/email-exists-in-window.png

    Email is updated even though it exists. Although the ACF email is allowed to update. It has not updated the user because WordPress won’t allow to of the same email.
    E. https://zorahosting.com/email-updated-anyway.png

    ACF email updated not user from email that existed on form submit
    F. https://zorahosting.com/acf-updated-not-user.png

    Red error box generated by regular expression ( this is not an email )
    G. http://zorahosting.com/red-error-box.png

    Here below is my code

    The shortcode outputting the form:

    – – – – – – – – – – – – – – – – – – – – – – –

    

function zUpdate( $atts, $content = null ) {
	
	$current_id = get_current_user_id();
	$user_id = 'user_' . $current_id;	
	
	$options = array(
	    'post_id' => $user_id,
	    /* my field group grabs unit, home phone, and cell phone acf */
	    'field_groups' => array('3307', ),
	    'submit_value' => 'Update' 
	);
	$form = acf_form( $options );
	return $form;	

}

    The shortcode updating the form with ACF data updating the WP user data

    

function my_acf_save_post( $post_id ) {
		if( empty($_POST['acf']) ) {
			return;
		}
		
		if( is_admin() ) {
			return;
		}
		
		//get current email before change
		$current_email = get_the_author_meta('user_email', $wp_user_id);
		
		if( $_POST['post_id'] != 'new' ) {
			
			$emailField = $_POST['acf']['field_5ae7a967009de'];
			$wp_user_id = str_replace("user_", "", $post_id);
			
			if (isset($emailField)) {
				if (email_exists( $emailField )) {
					echo "<p>Email already exists</p>";
					update_field('field_5ae7a967009de', $current_email, $post_id);
				} else {
					$args = array(
						'ID'         => $wp_user_id,
						'user_email' => esc_attr( $emailField )
					);            
					wp_update_user( $args );
				}  
			}
			$first_name = $_POST['acf']['field_5ae7a4b8e5948'];
			$last_name = $_POST['acf']['field_5ae7a8cf8e3e0'];
			$user_data = wp_update_user( array( 'ID' => $wp_user_id, 'first_name' => $first_name, 'last_name' => $last_name ) );	
		}
		
		return $post_id;
}

    both are called at the end of course:

    – – – – – – – – – – – – – – – – – – – – – – –

    

add_action('acf/save_post', 'my_acf_save_post', 1);

add_shortcode('userupdate', 'zUpdate');

  • I would like to report that I’m experiencing the same issue. A front end ACF form is used to create a pending CPT and contains image fields. The uploaded images show up in the List view in Media Library but not in the Grid view. So they are successfully uploaded and for the most part very much the same as any other image – I’ve not been able to pinpoint the difference by looking in the database so far.

    Unfortunately switching the uploader to the ‘WordPress’ media uploader isn’t a good solution for this site because we don’t want the users to be able to browse and select images that are already in the Media Library.

    My client noticed it out for the same reason as OP’s client – they needed to add the image to another field. WordPress uses the Grid View for the Media Library that pops up when attaching images to fields or adding them to the WYSIWYG, so the images can’t be added to any other fields.

  • @danielgc, Your simple style solution within the action admin_head, was all I needed. You can take things further by tracking down specific iframes on your posts and pages like so…

    add_action('admin_head', 'admin_styles');
function admin_styles() {
	?>
	<style>
		iframe[id^='wysiwyg-acf-field-favicon_'] {
			min-height:40px;
		}
	</style>
	<?php
}
 ?>

    In my case, I’m targeting only the favicon fields on my WP admin pages, to have a height adjustment.

  • Hello! I have problem with Wysiwyg Editor when I’m using WordPress 4.9.5 + ACF PRO (Version 5.6.10) + qTranslate-X (Version 3.4.6.8) + Advanced Custom Fields: qTranslate (Version 1.7.23).

    If I choose tabs Visual $ Text in field settings:
    On post/page edit page in Wysiwyg Editor I see the only tabs and not formatted text in text area, and no toolbars.
    If I click on any tab, visual or text in Wysiwyg Editor the toolbars become visible.

    If I choose single tab Visual OR Text in field settings:
    On post/page edit page in Wysiwyg Editor I see the only not formatted text in text area, and no toolbars.
    And if I’m trying to click somewhere on Wysiwyg Editor the toolbars are not appear.

    I can send screen video 🙂

  • I solved this with acf/render_field_settings/type=wysiwyg and acf/render_field/type=wysiwyg, like this: https://gist.github.com/stianandreassen/6dc87c88c43b2bc43d0ea1a94bd5cd1e

    With this I get a number field on each WYSIWYG where I can define the desired height for the Editor.

  • Yes, you can just change a textarea to a wysiwyg field and the content in the db will not be lost. The only difference is in formatting. wysiwyg fields follow the rules of wysiwyg fields and are formatted using “the_content” filters while textarea fields are only formatted using whatever options you’ve got set for that textarea. There may be some differences in the display of the content on the front of the site.

  • I just realised that the default taxonomy description is also a wysiwyg editor (never realised this. I never use it).

    Have you tried that as well ?

  • Forget that last part (for now).

    I just did a test. I added a wysiwyg field to my taxonomy and added my shortcode, which is [home_url].

    When I var_dumped this field as follows:

    var_dump(get_field('content','{taxonomy}_{term_id}')); exit;

    it gives me my home_url.

    If I then echo it on my page it produces the same value.

    And I didn’t apply any filter or do something extra. This is straight out of the box. So my first guess now is you have something activated (like a filter or so) which stops this shortcode from outputting.

    Have you tested this with all plugins deactivated and on a default WP theme ?

  • Hi Beee,

    Thanks for response, yes the shortcode registered. If I am using the standard WP WYSIWYG it worked. Any suggestions?

    Thanks

  • I have copied content-product_cat.php to my theme Woocommerce folder and tried this answer

    /**
	 * woocommerce_after_subcategory hook.
	 *
	 * @hooked woocommerce_template_loop_category_link_close - 10
	 */
	do_action( 'woocommerce_after_subcategory', $category ); ?>

<?php 
 $queried_object = get_queried_object(); 
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;  
 
$thumbnail = get_field('productdesc', $queried_object);
 
$thumbnail = get_field('productdesc', $taxonomy . '_' . $term_id);

?>    

<?php the_field( 'productdesc', $queried_object ); ?>

    But it doesnt help. Any help please!

  • I would add a post object field to your flexible content field that returns the page ID. It provides a page link. When you loop through the flexible content field you can add logic: if the post object field = the page you want the content to appear, echo the WYSIWYG field. I can guide you through this if you are unfamiliar.

  • What type of field is your project_total_prints field? I’m assuming it is a WYSIWYG field. And are you trying to get the number of media (pictures) that have been uploaded to this field?

  • This reply has been marked as private.

  • change

    
function remove_empty_tags_around_shortcodes_acf_wysiwyg( $value, $post_id, $field ) {

    to

    
function remove_empty_tags_around_shortcodes_acf_wysiwyg( $value ) {

    and

    
add_filter('acf/load_value/type=wysiwyg', 'remove_empty_tags_around_shortcodes_acf_wysiwyg', 10, 1);

    to 

    
add_filter('acf_the_content', 'remove_empty_tags_around_shortcodes_acf_wysiwyg', 10, 1);

    See the notes here https://www.advancedcustomfields.com/resources/wysiwyg-editor/

  • I was able to solve the problem of birthdays by calculating age through this tip.:
    doitwithwp

    And put to work in the taxonomy with adataption of the display:
    $rows = get_field('ocupacao', $taxonomy . '_' . $term_id);

    After I just needed to create a wysiwyg field it could be just text and put the shortcode and the magic happens =)! I hope to help others who have doubts =).
    [show-my-age birthday="02/13/1985"].

  • This is supposedly solved but I’m still having a problem. This does not work:
    remove_filter ('acf_the_content', 'wpautop');

    First, my WYSIWYG fields are in a repeater, if that makes a difference.

    Second, my fields contain shortcodes. If I output my fields like this:
    the_sub_field('wysiwyg_field', false, false);
    The extra line breaks and p tags are gone, but shortcodes are not executed.

    update: guy_b’s solution did solve the issue.

  • Should be admin option on the field(s) itself see https://www.advancedcustomfields.com/resources/wysiwyg-editor/

Viewing 25 results - 451 through 475 (of 1,305 total)
1 2 3 … 18 19 20 … 51 52 53