Support

Account

Home Forums Search Search Results for 'Wysiwyg'

Search Results for 'Wysiwyg'

reply

  • I don’t know if I said this before, but a page link field located in one place is not aware of changes to the slug for a page. The link field stores the current url when it is updated.

    This same thing will happen when you add a link in WP to the content area. If you create a link in the WYSIWYG using the WP add link filter you will experience the same issue of you then change the slug of the page you are linking to.

    ACF uses the built in WP link field and the ACF field is just a wrapper for WP functionality that already exists. In order to have the field and links updated when a slug is changed would require searching the content and all custom fields for every post to find the old link and replace it with a new link.

    The solution I employ is to install a redirect plugin, there are several available. I work at an SEO company and everyone here knows that when a URL on the site is altered that 301 redirect must be added. This is because in order to get search engines to index the new page instead of the old page that these redirects need to be put in place. A side effect of using a redirect tool is that these links that get broken by changing a slug do not result in a 404 page. My company also employs tool for our clients that scan internal links to find 404s and redirected pages so that these can be corrected later.

    Automating the updating of all links pointing to a page when a page slug is changed would be extremely difficult, if not impossible to achieve.

  • Hi,

    I am not quite sure if this is the right topic but before opening a new thread I’d like to try it here first as it is somehow the same issue. Pls let me know if this would be worth a new topic…

    My problem:
    I use AFC very effective and pleased in the whole project. Since I created a new flip card group component I have the issue that editing the specific page creates an overload on RAM and CPU on my server. Viewing the page and clicking around in the admin console is fine. Only when I start editing and especially when I try to save my changes, the server looses connection to the database…

    here is my layout:

    <?php
    
    namespace Flynt\Components\BnbCmsFlipCardGroup;
    
    function getACFLayout()
    {
        return [
            'name' => 'BnbCmsFlipCardGroup',
            'label' => 'BNB CMS Flip Card Group',
            'sub_fields' => [
                [
                    'label' => __('Allgemeines', 'flynt'),
                    'name' => 'general',
                    'type' => 'tab',
                ],
                [
                    'label' => __('Jumpmark', 'flynt'),
                    'name' => 'jumpmark',
                    'type' => 'text',
                    'instructions' => 'ACHTUNG: Jumpmarks MÜSSEN pro Seite einzigartig sein und dürfen KEINE Leerzeichen, Sonderzeichen oder Umlaute enthalten.<br>Doppelte Jumpmarks verringern die SEO QualitÀt und nur die erste Jumpmark wird angesprungen.',
                ],
                [
                    'label' => 'Farbe (Hintergrund-Rahmen)',
                    'name' => 'color',
                    'type' => 'select',
                    'choices' => [
                        'black-black' => 'Standard Schwarz',
                        'yellow-red' => 'Gelb-Rot',
                        'red-yellow' => 'Rot-Gelb',
                        'green-red' => 'GrΓΌn-Rot',
                        'red-green' => 'Rot-GrΓΌn',
                        'yellow-purple' => 'Gelb-Lila',
                        'purple-yellow' => 'Lila-Gelb',
                        'green-purple' => 'GrΓΌn-Lila',
                        'purple-green' => 'Lila-GrΓΌn',
                    ],
                ],
                [
                    'label' => __('Headline', 'flynt'),
                    'name' => 'headline',
                    'type' => 'text',
                ],
                [
                    'label' => __('Text', 'flynt'),
                    'name' => 'text',
                    'type' => 'wysiwyg',
                    'media_upload' => 0,
                    'delay' => 1,
                ],
                [
                    'label' => __('Globaler Prefix Text Vorderseite', 'flynt'),
                    'name' => 'prefix',
                    'type' => 'text',
                ],
                [
                    'label' => __('Flip Card Elemente', 'flynt'),
                    'name' => 'flip_card_items',
                    'type' => 'tab',
                ],
                [
                    'label' => __('Flip Cards', 'flynt'),
                    'name' => 'flip_cards',
                    'type' => 'repeater',
                    'collapsed' => 'field_pageComponents_pageComponents_BnbCmsFlipCardGroup_flip_cards_text_front',
                    'layout' => 'row',
                    'min' => 1,
                    'button_label' => 'HinzufΓΌgen',
                    'sub_fields' => [
                        [
                            'label' => __('Text', 'flynt'),
                            'name' => 'text_settings',
                            'type' => 'tab',
                        ],
                        [
                            'label' => __('Text Vorderseite', 'flynt'),
                            'name' => 'text_front',
                            'type' => 'text',
                        ],
                        [
                            'label' => __('Text RΓΌckseite', 'flynt'),
                            'name' => 'text_back',
                            'type' => 'wysiwyg',
                            'media_upload' => 0,
                            'delay' => 1,
                        ],
                        [
                            'label' => __('Bild', 'flynt'),
                            'name' => 'image_setting',
                            'type' => 'tab',
                        ],
                        [
                            'label' => 'Image',
                            'name' => 'image',
                            'type' => 'image',
                            'return_format' => 'id',
                            'preview_size' => 'medium',
                        ],
                        [
                            'label' => 'Bildrechte',
                            'name' => 'image_copyright',
                            'type' => 'text',
                            'instructions' => 'Überschreibt die Daten aus dem Feld "Beschreibung" der Mediathek.<br>NOTIZ: KEINE Zeilenumbrüche. Anführungszeichen müssen einen vorhergehenden Backslash haben (z.B. \"Lorem Ipsum\").',
                        ],
                        [
                            'label' => 'Bild Alt-Text',
                            'name' => 'image_alt',
                            'instructions' => 'Überschreibt die Daten aus dem Feld "Alternativer Text" der Mediathek. Wird nur gesetzt, sollte keine Bildunterschrift gesetzt werden!<br>NOTIZ: KEINE Zeilenumbrüche. Anführungszeichen müssen einen vorhergehenden Backslash haben (z.B. \"Lorem Ipsum\").',
                            'type' => 'text',
                        ],
                        [
                            'label' => 'Bild Helligkeit',
                            'name' => 'image_mode',
                            'type' => 'radio',
                            'choices' => [
                                'false' => 'Dark copyright',
                                'true' => 'Bright copyright',
                            ],
                        ],
                        [
                            'label' => 'Bild Abdeckung',
                            'name' => 'image_coverage',
                            'type' => 'radio',
                            'instructions' => '
                            Cover: Der ersetzte Inhalt wird in der Grâße angepasst, sodass das SeitenverhÀltnis beibehalten wird wÀhrend die gesamte Inhaltsbox des Elements ausgefüllt wird: die konkrete Objektgrâße wird als eine AbdeckbeschrÀnkung auf die verwendete Breite und Hâhe des Elements bestimmt.
                            <br>
                            <br>
                            Contain: Der ersetzte Inhalt wird in der Grâße angepasst, sodass das SeitenverhÀltnis beibehalten wird wÀhrend es an die Inhaltsbox des Elements angepasst wird: die konkrete Objektgrâße wird als eine InhaltsbeschrÀnkung auf die verwendete Breite und Hâhe des Elements bestimmt.
                        ',
                            'choices' => [
                                'cover' => 'Cover',
                                'contain' => 'Contain Whole Image',
                            ],
                        ],
                        [
                            'label' => 'Bild Position',
                            'name' => 'image_position',
                            'type' => 'group',
                            'sub_fields' => [
                                [
                                    'label' => 'Bild Position Wert #1',
                                    'name' => 'image_position_value1',
                                    'type' => 'radio',
                                    'choices' => [
                                        'top' => 'top',
                                        'bottom' => 'bottom',
                                        'left' => 'left',
                                        'right' => 'Right',
                                        'center' => 'Center',
                                    ],
                                    'layout' => 'horizontal',
                                ],
                                [
                                    'label' => 'Bild Position Wert #2',
                                    'name' => 'image_position_value2',
                                    'type' => 'radio',
                                    'choices' => [
                                        'top' => 'top',
                                        'bottom' => 'bottom',
                                        'left' => 'left',
                                        'right' => 'Right',
                                        'center' => 'Center',
                                    ],
                                    'layout' => 'horizontal',
                                ],
                                [
                                    'label' => 'Prozentwerte',
                                    'name' => 'percentage',
                                    'type' => 'text',
                                    'instructions' => '
                                Insert 1-2 values as
                                <br>
                                A) Prozentwerte <b>z.B. 50% 20%</b> fΓΌr die horizontale und vertikale Achse
                                <br>
                                <b>OR</b>
                                <br>
                                B) Pixel <b>z.B. 100px 20px</b> fΓΌr eine pixelgenaue Position
                                ',
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ];
    }

    As a hotfix we where able to solve it by increasing the RAM and CPU on the server but I am afraid that this will pop up again as we did not even have the full content on our staging system so far.

    Any ideas why? As we will have to go live with the feature pretty soon, I am a bit concerned I missed something in the structure to prevent this issue…

    thx in advance.

  • Hi!

    Some who know what i’m doing wrong?

    Can’t get the custom tab or field to display for each specific variation, when i choose the variants color and size, the unique description appears, not the tab and field.

    It’s unique product User manual links foreach.

    Variation custom field code is from this forum and works so far!
    Problem is to display when specific variation is active or not, and to hide and display the “Downloads” tab window, when there is or not a download file link in the wysiwyg editor field?

    
    add_filter('acf/location/rule_values/post_type', 'acf_location_rule_values_Post');
    function acf_location_rule_values_Post( $choices ) {
    	$choices['product_variation'] = 'Product Variation';
        return $choices;
    }
    
    add_action( 'woocommerce_product_after_variable_attributes', function( $loop, $variation_data, $variation ) {
        global $abcdefgh_i; 
        $abcdefgh_i = $loop;
        add_filter( 'acf/prepare_field', 'acf_prepare_field_update_field_name' );
        
        $acf_field_groups = acf_get_field_groups();
        foreach( $acf_field_groups as $acf_field_group ) {
            foreach( $acf_field_group['location'] as $group_locations ) {
                foreach( $group_locations as $rule ) {
                    if( $rule['param'] == 'post_type' && $rule['operator'] == '==' && $rule['value'] == 'product_variation' ) {
                        acf_render_fields( $variation->ID, acf_get_fields( $acf_field_group ) );
                        break 2;
                    }
                }
            }
        }
        
        remove_filter( 'acf/prepare_field', 'acf_prepare_field_update_field_name' );
    }, 10, 3 );
    
    function  acf_prepare_field_update_field_name( $field ) {
        global $abcdefgh_i;
        $field['name'] = preg_replace( '/^acf\[/', "acf[$abcdefgh_i][", $field['name'] );
        return $field;
    }
        
    add_action( 'woocommerce_save_product_variation', function( $variation_id, $i = -1 ) {
        if ( ! empty( $_POST['acf'] ) && is_array( $_POST['acf'] ) && array_key_exists( $i, $_POST['acf'] ) && is_array( ( $fields = $_POST['acf'][ $i ] ) ) ) {
            foreach ( $fields as $key => $val ) {
                update_field( $key, $val, $variation_id );
            }
        }
    }, 10, 2 );
    
    function xxx_admin_head_post() {
    	global $post_type;
    	if ($post_type === 'product') {
    		wp_register_script( 'xxx-acf-variation', get_template_directory_uri() . '/inc/ss.js', array(
    			'jquery-core',
    			'jquery-ui-core'
    		), '1.1.0',
    			true ); // Custom scripts
    		
    		wp_enqueue_script( 'xxx-acf-variation' ); // Enqueue it!
    
    	}
    }
    
    /* actions fired when adding/editing posts or pages */
    /* admin_head-(hookname) */
    add_action( 'admin_head-post.php', 'xxx_admin_head_post' );
    add_action( 'admin_head-post-new.php',  'xxx_admin_head_post' );
    

    Showing the tab:

    
    /* Create Technical details tab */
    //adding new tab//
    add_filter( 'woocommerce_product_tabs', 'product_tab' );
    function product_tab( $tabs ) {
    if ( get_field('downloads', $post_id) ) {
    $tabs[] = array(
    'title' => 'Downloads',
    'priority' => 15,
    'callback' => 'show_content'
    );
    }
    return $tabs;
    }
    function show_content() {
    $downloads = get_field('downloads', $post_id);
    if( $downloads ):
    echo get_field('downloads', $post_id);
    endif;
    }
    

    The settings in the ACF – admin panel is this as attached images below:
    the name “Vare” = “Product”

  • A workaround (and not a great one) is that you can embed an Elementor template shortcode in the WYSIWYG editor area. For occasional use this would perhaps be OK. If you need to use Elementor on tons of pages, this is untenable, though.

  • A non-JS option:
    Just swap out ‘company_detail’ for the name of your WYSIWYG field.
    And set/alter the length of the excerpt by changing the ’32’

    <p>
    	<?php
    		$raw_content 		= get_field( 'company_detail' );
    		$trimmed_content	= wp_trim_words( $raw_content, '32' );
    		$clean_excerpt		= apply_filters( 'the_excerpt', $trimmed_content );
    		echo esc_attr( $clean_excerpt );
    	?>
    </p>
  • I.e.

    1- If the acf_form_head(); goes before the get_header, the WYSIWYG format bar doesn’t show
    2- If the acf_form_head() goes after the get_header, the format bar works but when I publish a post the page returns a blank

  • @hube2 the reason it was somehwere else is because I need to have it before the <header> otherwise the form doesn’t work well. However I see the WYSIWYG formatting bar when I move the acf_form_head() next to it. Now the page goes blank when I create the post. So either way I have an issue.

  • It depends on what type of field it is. If you are putting the shortcode in to anything other than a wysiwyg field then you need to use an acf/format value filter to do shortcodes on the value.

  • ACF does not alter loading of jQuery in any way.

    When you put a shortcode in a WYSIWYG field ACF calls that shortcode when the content is rendered, including any JS code that shortcode might contain. That JS code is being run before jQuery is defined.

    As I said it my first reply. Something is pushing the loading of jQuery after the content is loaded. Look in the page’s generated HTML. Where is jQuery loaded?

  • I’m encountering something similar: Gravity Forms shortcode in an ACF WYSIWYG field does not render the form fields (https://cloudup.com/ch3uqruShiw). However I do not have the jQuery error that OP has.

    Official support for Gravity Forms with ACF fields would be excellent, but also recognize this can lead to requests to officially support other plugins as well.

    It is strange that Gravity Forms no longer supports WYSIWYG, but the “Add Form” button remains in place (https://cloudup.com/cfHgaPJ8c3f).

  • Elliot replied:
    “Good question. The WYSIWYG field does rely on WordPress including the tinymce library, but I can assure you that we will always maintain this field, even if WordPress were to completely remove this library from core :)”

    Good to hear! πŸ™‚

  • You have a button group field. In this case I take back my previous statement. You only need one wysiwyg field that is shown if the radio field has any selection made.

    You don’t need to create any conditional logic based on the selection, Radio Button Has any value will work.

    In your template you then show the value in the wysiwyg field in the correct tab based on what the choice is.

    
    if ($value == 'choice1') {
      // do x
    } elseif ($value == 'choice2') {
      // do y
    }
    

    this will all depend on your other logic where you are showing these added tabs.

  • It is actually a similar question like this one: https://support.advancedcustomfields.com/forums/topic/generate-fields-for-each-select-option/

    I’m now down to the point where i need some kind of code to do this:
    If the radio button does not have choices when you edit the field group then you’ll need to create acf/prepare_field filters for each of these fields and dynamically create the conditional logic.

    What’s hard to grasp for me:
    The wysiwyg field needs to be different for every button group selection, but what about the field key? This needs to be the same every time?
    I understand the php export with the arrays but not how to code the conditional logic with the wysiwyg field.

    i.e.
    1) I select ‘button one’ from the button group in the product edit page.
    2) A wysiwyg field is show where i enter some value
    3) I select ‘button two’ from the button group and enter some value
    4) Echo this in the tab content (with just the_field('field_name');?

  • So i exported the field group with it’s conditional wysywig field based on the choice in the button group to php:

    
    if (function_exists('acf_add_local_field_group')) :
        acf_add_local_field_group(array(
            'key' => 'group_xxxxxxxxxx',
            'title' => 'The product tabs',
            'fields' => array(
                array(
                    'key' => 'field_of_the_product_tabs_xxxxx',
                    'label' => 'The tabs',
                    'name' => 'the_tabs',
                    'type' => 'button_group',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => 0,
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    // These choices are generated by the repeater with a text subfield from the option page
                    'choices' => array(
                        'choice1' => 'choice1',
                        'choice2' => 'choice2',
                    ),
                    'allow_null' => 0,
                    'default_value' => '',
                    'layout' => 'horizontal',
                    'return_format' => 'value',
                ),
                // So this wysywig field needs to be created everytime a choice is added from the option page
                // Corresponding to the selected button group choice
                array(
                    'key' => 'field_xxxxxxxx',
                    'label' => 'product tab content',
                    'name' => 'pro_tab_content',
                    'type' => 'wysiwyg',
                    'instructions' => '',
                    'required' => 0,
                    // array van conditional logic ie.                
                    'conditional_logic' => array(
                        array(
                            array(
                                'field' => 'field_of_the_product_tabs_xxxxx',
                                'operator' => '==',
                                'value' => 'choice1', // the selected button group choice ie. choice1, choice2...
                            ),
                        ),
                    ),
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'default_value' => '',
                    'tabs' => 'all',
                    'toolbar' => 'full',
                    'media_upload' => 1,
                    'delay' => 0,
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'post_type',
                        'operator' => '==',
                        'value' => 'product',
                    ),
                ),
            ),
        ));
    
    endif;
    

    I think i’m missing some skills or knowledge because i can’t wrap my head around in how to create a wysiwyg field specific for it’s product tab.
    A ‘static’ field and displaying that in the tab content is easy, but then every tab has the same value πŸ˜‰

    
    /* --
    WooCommerce Tabs content
    -- */
    function woo_tab_content($slug, $tab)
    {
       // the content in this function is display in the WooCommerce tabs
    
    }
    
  • I feel the same way. I don’t event use the classic editor, though I have it installed. I have it hidden on all sites I build and use only ACF WYSIWYG fields.

    I can’t really answer all of your questions. You should contact the developer.

    Guberbug includes a classic block, this classic block uses tinyMCE.

    As long as this block exists then tnyMCE will always be included in WP.

    Even if this goes away I am confident that Elliot will find a way to keep the WYSIWYG field working.

    But like I said, for a definitive answer you’d need to ask the developer.

  • Yes, exactly.
    The field to be generated / displayed is a wysiwyg field. The values ​​in that field are then shown in the appropriate tab. The functionality should be the same as this plugin. I just prefer to do this in ACF of course πŸ˜‰

  • From your description it appears that the plugin is not applying filters to the ACF wysiwyg fields.

    The ACF to rest API is a 3rd party plugin. I hate to do this to you but you should contact the developer of that plugin or ask them the question. The reason I hate to do this is that it does not appear that plugin is being maintained.

    I did some looking and I did find this on the github repo https://github.com/airesvsg/acf-to-rest-api/issues/215

    I would amend that code because if the plugin is not applying autop then it not running any filters on the fields.

    
    add_filter( 'acf/rest_api/{type}/get_fields', function( $data, $response ) {
    	if ( isset( $data['acf']['my_field'] ) ) {
    		// my change here
    		$data['acf']['my_field']->post_content = apply_filters('acf_the_content', $data['acf']['my_field']->post_content );
    	}
    
    	return $data;
    }, 10, 2 );
    
  • Well, I found a solution using Wysiwyg Editor
    Content. I add a media from the button provided and it works…

  • I can also confirm this issue. ACF Wysiwyg field “Visual” editor content not displayed or editable on WP5.5+ (field displayed in an Sidebar position in the block editor, in this case). When Classic Editor plugin is installed, it works again.

  • I’m having this issue now! In my case it happens when clicking the link edit button in the wysiwyg field (I’m using it in a custom block) from the side panel edit. The link edit dialogue box is prevented from popping up because it’s trying to align to the left of the wysiwyg input, but since it’s too wide it just flickers.

    If you make a link that’s towards the right of the input, it loads the pop way in the middle of the screen. But if you try linking text along the left side of the input, it just flickers. It doesn’t do it in the main edit screen though.

    I’m on WP 5.7, in Mac Chrome, ACF v. 5.9.5.

    I do not have my scrollbars set to always show (although I love it, it’s very buggy imo).

  • I use clone fields heavily to make managing component blocks and their fields easier. There are some things about the Group setting that I dislike similar to alpipego. Since the seamless fields have conditional displays within that field group, is it possible to have a “nested” set of display fields for seamless fields too that are honored at the parent-level? For example:

    Background Settings Field Group

    – Background Type (radio)
    — Option 1: None
    — Option 2: Color
    — Option 3: Image
    – Background Color (color picker; displays when “Option 2: Color” is selected)
    – Background Image (image; displays when “Option 3: Image” is selected)

    Then in a flexible field, there is a group of flexible fields that reuses the background settings field group like so.

    – Content (WYSIWYG)
    – Media Type (radio)
    — Option 1: Image
    — Option 2: Form
    – Image (image; displays when “Option 1: Image” is selected)
    – Form (post object; displays when “Option 2: Form” is selected)
    – Form Background (clone; displays when “Option 2: Form” is selected) <– Honor this conditional display in parent flexible fields, and then honor conditional display in fields of field group

  • I did some testing on and I cannot recreate it.

    What editor is shown is determined by the last action a user takes in a wysiwyg field, any field. WP, not ACF stores a value on the last selection, visual or text and the next time the editor is loaded all of the wysiwyg fields will be set to this tab.

    I do not know how or where this value is stored by WP, but you can see it in action on an user where it is working correctly. Open any post, change the mode of any wysiwyg editor, wait a second or 2 and reload the page, all editors should not be in the last mode selected.

    Further testing shows that this selection is stored somewhere and is not related to a cookie value. Clearing cookies for the site doe not effect it. Again, looking for how this is stored I can find nothing. I did find this https://wordpress.stackexchange.com/questions/41412/rich-text-editor-settings-persist-throughout-all-rich-text-editors however, I do not see the meta value in the DB changing.

    The only thing that I can think of is the there is a filter on the WP hook user_can_richedit that is returning false for this user type.

  • Since this topic still has some attention I came back to share my solution. I misunderstood the way of making a more simple toolbar. The current solution suites my needs:

    
    if (class_exists('acf')) {
      add_filter('acf/fields/wysiwyg/toolbars', 'wysiwyg_toolbars');
    }
    
    function wysiwyg_toolbars($toolbars) {
      $toolbars['Very Very Simple'] = array();
      $toolbars['Very Very Simple'][1] = array('bold', 'italic', 'underline', 'strikethrough');
    
      $toolbars['Very Simple'] = array();
      $toolbars['Very Simple'][1] = array('bold', 'italic', 'underline', 'strikethrough', 'link');
    
      return $toolbars;
    }
    

    After that, you can assign the field type to your designated field, just like you normally would do.

Viewing 25 results - 276 through 300 (of 1,298 total)