Support

Account

Register Login

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

Search Results for 'Wysiwyg'

reply

  • Thank you for the reply, John.

    Yes, I believe I have this in the correct place. Just above the get_header()?

    Basically, everything else looks fine such as repeaters. The WYSIWYG editor also loads fine if I place the acf_form() on a page as it loads. It just seems to be when it comes through AJAX but repeaters, etc look and work just fine when coming through AJAX. I’m firing the ACF JS append script as recommended in the documentation but still no luck.

    Thanks again,
    James

  • I have a similar situation. Would I correct this:

    <?php if( have_rows('page_content') ): ?>
	<?php while( have_rows('page_content') ): the_row(); ?>
		<?php if( get_row_layout() == 'page_content' ): ?>
			<div class="training">	
			<?php the_sub_field('page_description_100'); ?>
			</div>
			<br>
		<?php endif; ?>
	<?php endwhile; ?>
<?php endif; ?>

    By using this?

    <?php if( have_rows('page_content') ): ?>
	<?php while( have_rows('page_content') ): the_row(); ?>
		<?php if( get_row_layout() == 'page_content' ): ?>
			<div class="training">
			<?php echo esc_html( the_sub_field('page_description_100') ); ?>
			</div>
			<br>
		<?php endif; ?>
	<?php endwhile; ?>
<?php endif; ?>

    The notice is still visible in the dashboard. (I’m using the classic editor with some CF7 and YouTube in the WYSIWYG field.)

    Thanks in advance!

  • Hi John, thank you for the reply.

    I understand the lines setting on the textarea field is basically just saying how tall the box is on the backend, and that’s the kind of control I’d like available for the WYSIWYG field since it’s very tall by default.

    However, I didn’t know you could customise the toolbars like that, and that’s very exciting. Thank you for pointing that out to me.

  • First, you might not understand the lines setting on the textarea field, this is just the initial lines shown, unless you are talking about the character limit settings, and this would not work very will when using html because all of the code would count as added characters.

    The WYSIWYG field has a setting for full or basic to limit the controls that are available. In addition to this the controls can be alter using a filter as described here https://www.advancedcustomfields.com/resources/customize-the-wysiwyg-toolbars/

    The developers don’t visit this forum, if you want to suggest this to them you need to contact them here, open a ticket in your account, or make a suggestion here.

  • @relish27 WYSIWYG field do not need to be altered to apply shortcodes. WYSIWYG fields do this automatically.

  • Does this work if you have a shortcode in a WYSIWYG field that is in an ACF flexible content field? I’m not having any luck with it.

  • Yes, this has been discussed here many times.

    When there are many rows in a repeater (this includes flex fields because they are just a special kind of repeater) and or there are a lot of fields for each layout, performance of the admin will degrade as more rows are added. Eventually this will cause a timeout on the saving of edits.

    There are ways to improve initial page load, this can be done by setting fields like wysiwyg fields to not initialize until they are being edited.

    There is nothing that can be done in ACf to improve/speed up saving under these conditions. ACF calls update_post_meta() or other similar function for each field. This means that every field creates its own DB queries to update the value. Repeaters do not scale well.

  • I have experienced the same issue, while watching the DOM it seems like the link modal is constantly showing/hiding. (The DOM element keeps flashing on each change).

    I’ve added some custom CSS to fix the z-index problems, but the flashing (hiding/showing?) means it’s not really fixed.

    It only seems to occur for new links. If you swap the WYSIWYG to text mode, add the HTML for a link and then swap back to visual, you can edit it the link fine (as long as you have the z-index fixed).

    Not sure if that’s useful information, but that’s as far as I got with it.

  • Hi John,

    Sorry, I left out some details here. I was doing a wysiwyg_tinymce_settings filter.
    I was able to resolve this issue by adding editor.save(); in my javascript code.

    Thanks

  • A WYSIWYG field can contain html tags, returns and multiple spaces. To find the length of the text you would need to strip out all of the html tags and remove consecutive spaces as well as potentially converting any html entities to text equivalents before you check the string length.

  • Also this isn’t what I am trying to do – I need to target the wysiwyg as well as the color picker field and then assign the color picker field to the wysiwyg block formats paragraph, heading 1 etc. and the link color.

  • So looking at the javascript api I have this that works (not what I want):

    
add_action('acf/input/admin_footer', function(){
    ?>
    <script>

        acf.addFilter('wysiwyg_tinymce_settings', function( mceInit, id, field ){
			//if( field.get('data-toolbar') !== 'event_basic' ) {
            if(field.get('key') !== 'field_63f8196bb4c98'){
                return mceInit;
            }
            mceInit.block_formats = 'Paragraph=p;Heading 4=h4';
            return mceInit;
        });

    </script>
    <?php
});

    The item blocked out is one part I want to work, it works on all wysiwyg not the type of that is needed:

    
//if( field.get('data-toolbar') !== 'event_basic' ) {

  • Sounds like the same issue as this https://support.advancedcustomfields.com/forums/topic/wysiwyg-visual-editor-is-blank-with-6-2-upgrade/

  • I have been battling this problem as well and thought I’d add some info. One of my options page fields is a 'type' => 'wysiwyg' field. If the user adds any html field that generates quotes in the markup I get the 404. As long as the markup does not contain quotes it submits fine.

    For example, centering text generates <p style="text-align: center;"> which blows out the page, but <h2> is just fine.

    I don’t have a solution (yet) other than changing the field type.

  • To do this:

    1) remove the WYSIWYG editor, or hide the editor with the setting in the acf field.

    2) create an acf/save_post action that copies the content of the ACF wysiwyg field to post_content.

  • new Infos?

    https://support.advancedcustomfields.com/forums/topic/the-wysiwyg-field-is-editable-via-builder/
    https://support.advancedcustomfields.com/forums/topic/wpbakery-in-a-acf/
    https://support.advancedcustomfields.com/forums/topic/initializing-page-builder-in-acf-wysiwyg-field/

  • You cannot add WYSIWYG buttons to that field. This functionality is only available for the WP description field when you view the media library in list view and then edit the image details in the WP admin. This functionality is not available when viewing/editing in grid view and is a limitation of this view in WP. ACF uses the the build in WP image selector and editor for the gallery field for the grid view.

    The value of the description field for attachments is saved in the “post_content” column of the “_posts” table

    You can accomplish this by adding a field group to the media (attachment) post type with a WYSYWYG field with a basic toolbar and then creating an acf/save_post action for attachment post types that copies the value of your custom field to post_content.

  • The acf shortcode requires entering into a field that supports shortcodes, like the WP editor or an WYSIWYG field. How to get this working with another plugin would be a question for the developers of the other plugin.

  • Hi, with this solution often the WYSIWYG editor breaks when you hover over the block inserter elements. I have seen this in multiple sites that use this technique.

    It seems that the ACF code breaks whenever the preview is not yet fully loaded.

    A native acf solution for this would be highly appreciated.

    You would like clients to see a preview image of what they are actually going to insert. The current idea of an actual render of the component seems like a nice idea but requires a lot more work from the developer and is not worth it. Adding an image would be such a simple solution.

  • Thank you for your response! I can add php code while using elementor either by using dynamicooo´s raw PHP widget or by just adding a PHP Code snippet with the code snippet plugin.

    But the code:

    remove_filter(‘acf_the_content’, ‘wpautop’);

    Does not remove the p tags (line breaks) that are added to any WYSIWYG content that gets loaded into a page by the elementor dynamic tag.

    Currently my workaround is that I remove the space those p tags create (which is caused by the theme settings at least thats what someone else told me):

    p {
    margin-bottom:unset;
    }

    This won´t help if I would want a WYSIWYG text content included manuelly set linebreaks to flow into an existing text.

    Meaning something like this won´t work:

    This is the text that is in the page and now I want <THIS SNIPPET INCLUDING THIS
    INTENTIONAL LINE BREAK> to be sticked into the original text.

    Because it would look like this:

    This is the text that is in the page and now I want
    <THIS SNIPPET INCLUDING THIS
    INTENTIONAL LINE BREAK>
    to be sticked into the original text.

    If you have a working approach for that, then it would be fine to know it just in case 🙂

  • None of the shortcodes that you have in your question are valid ACF sortcodes, unless you are using some other plugin or something that makes them valid. Are these from one of the other plugins you mentioned?

    But that is neither here nor there, as you stated, the extra breaks and lines are being added by wpautop(). This filter works on the entire content of the WYSIWYG field and altering the individual parts of the content will have no effect.

    The wpautop filter is run when ACF formats the value.

    What you need to do is to remove that filter for the specific field. Since you are using elementor I’m assuming that you cannot modify the code that actually outputs the value of the field. Unfortunately, without modifying the code where the value is output there really isn’t any way to do this without affecting every field.

    Using PHP I would remove this filter before I got the field and then add the filter back so that it did not affect other fields.

    
remove_filter('acf_the_content', 'wpautop');
$value = get_field('field_name');
add_filter('acf_the_content', 'wpautop');

    This cannot be done in elementor.

    Using elementor I would likely try using a textarea field and add a filter to ACF that would cause ACF to do shortcodes on this particular field. There is an example of doing exactly this in the documentation for acf/format_value.

  • // Add Script to admin
function add_acf_wysiwyg_default_value()
{
?>
    <script type="text/javascript">
        var elementID = 'Your acf div id';
        var defaultValue = '<style>.style-1 { color: red; }</style><div class="style-1">Default Value....</div>';

        window.onload = async function() {
            if (document.querySelector('#' + elementID)) {
                if (document.querySelector('#' + elementID).innerHTML == '') {
                    await document.getElementById('' + elementID + '-html').click();
                    document.querySelector('#' + elementID).innerHTML = defaultValue;
                    document.getElementById('' + elementID + '-tmce').click();
                }
            }
        }
    </script>
<?php
}
add_action('admin_footer', 'add_acf_wysiwyg_default_value');

  • I’m trying to create a new toolbar to use for WYSWIYG fields, called “Editorial”. Initially I would like to only have the formatselect, bold and italic in its toolbar. I also want to remove the default toolbars.

    I’ve created it according to the documentation and the filter looks like this:

    
add_filter( 'acf/fields/wysiwyg/toolbars' , 'kh_toolbars'  );
function kh_toolbars( $toolbars )
{
    // Uncomment to view format of $toolbars
    /*
    echo '< pre >';
        print_r($toolbars);
    echo '< /pre >';
    die;
    */

    // Add a new toolbar called "Editorial", with limited options
    $toolbars['Editorial' ] = array();
    $toolbars['Editorial' ][1] = array( 'formatselect', 'bold' , 'italic' , 'underline' );

    // remove the default toolbars completely
    unset( $toolbars['Basic' ] );
    unset( $toolbars['Full' ] );

    // return $toolbars - IMPORTANT!
    return $toolbars;
}

    The toolbar is possible to select when editing the field, so I select “Editorial” there as it’s the only option after removing the default ones.

    When looking at the WYSIWYG field in the editor though, the toolbar is populated with the default buttons as well. I can also try to remove ‘italic’ for example in the array of the filter, but the italic button is still there after that.

    I would also like to know the best solution for limiting the selection of block_formats within the formatselect for a specific toolbar.

    Any idea what I’m doing wrong here?

  • Hi John,

    I think I found the cause of the issue just don’t know what’s causing it (no error in the console unfortunately), so if an ACF field has a conditional that is checking if the WYSIWYG text editor field contains something/nothing the issue will occur.

    Here’s my setup (should’ve provided these earlier sorry!):
    WordPress 6.0.3
    Advanced Custom Fields PRO 6.0.3
    PHP 7.4.1

    Here is the PHP code of the ACF setup:

    

acf_add_local_field_group(array(
    'key' => 'group_6348ca70dcee0',
    'title' => 'News Posts',
    'fields' => array(

        array(
            'key' => 'field_634f750f155ad',
            'label' => 'This field is the cause of the issue?',
            'name' => 'using_a_conditional_to_hide_this_field_so_cilents_wont_tamper_with_it',
            'type' => 'text',
            'instructions' => '',
            'required' => 0,
            'conditional_logic' => array(
                array(
                    array(
                        'field' => 'field_6348de369a480',
                        'operator' => '==',
                        'value' => '',
                    ),
                ),
            ),
            'wrapper' => array(
                'width' => '',
                'class' => '',
                'id' => '',
            ),
            'show_in_graphql' => 1,
            'default_value' => '',
            'maxlength' => '',
            'placeholder' => '',
            'prepend' => '',
            'append' => '',
        ),
        array(
            'key' => 'field_6348de2a9a47f',
            'label' => 'Contents',
            'name' => 'contents',
            'type' => 'repeater',
            'instructions' => '',
            'required' => 0,
            'conditional_logic' => 0,
            'wrapper' => array(
                'width' => '',
                'class' => '',
                'id' => '',
            ),
            'show_in_graphql' => 1,
            'layout' => 'block',
            'pagination' => 0,
            'min' => 0,
            'max' => 0,
            'collapsed' => '',
            'button_label' => 'Add Content',
            'rows_per_page' => 20,
            'sub_fields' => array(
                array(
                    'key' => 'field_6348de679a483',
                    'label' => 'Content Type',
                    'name' => 'content_type',
                    'type' => 'select',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => 0,
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'show_in_graphql' => 1,
                    'choices' => array(
                        'text' => 'Text',
                        'image' => 'Image',
                        'video' => 'Video',
                    ),
                    'default_value' => false,
                    'return_format' => 'value',
                    'multiple' => 0,
                    'allow_null' => 0,
                    'ui' => 0,
                    'ajax' => 0,
                    'placeholder' => '',
                    'parent_repeater' => 'field_6348de2a9a47f',
                ),
                array(
                    'key' => 'field_6348de369a480',
                    'label' => 'Text',
                    'name' => 'text',
                    'type' => 'wysiwyg',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => array(
                        array(
                            array(
                                'field' => 'field_6348de679a483',
                                'operator' => '==',
                                'value' => 'text',
                            ),
                        ),
                    ),
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'show_in_graphql' => 1,
                    'default_value' => '',
                    'delay' => 0,
                    'tabs' => 'all',
                    'toolbar' => 'full',
                    'media_upload' => 0,
                    'parent_repeater' => 'field_6348de2a9a47f',
                ),
                array(
                    'key' => 'field_6348de499a481',
                    'label' => 'Image',
                    'name' => 'image',
                    'type' => 'image',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => array(
                        array(
                            array(
                                'field' => 'field_6348de679a483',
                                'operator' => '==',
                                'value' => 'image',
                            ),
                        ),
                    ),
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'show_in_graphql' => 1,
                    'return_format' => 'array',
                    'library' => 'all',
                    'min_width' => '',
                    'min_height' => '',
                    'min_size' => '',
                    'max_width' => '',
                    'max_height' => '',
                    'max_size' => '',
                    'mime_types' => '',
                    'preview_size' => 'medium',
                    'parent_repeater' => 'field_6348de2a9a47f',
                ),
                array(
                    'key' => 'field_6348de569a482',
                    'label' => 'Video ID',
                    'name' => 'video_id',
                    'type' => 'text',
                    'instructions' => 'Input the YouTube (https://www.youtube.com/watch?v=YOUTUBE_ID) or Vimeo video ID (https://vimeo.com/VIMEO_ID)',
                    'required' => 0,
                    'conditional_logic' => array(
                        array(
                            array(
                                'field' => 'field_6348de679a483',
                                'operator' => '==',
                                'value' => 'video',
                            ),
                        ),
                    ),
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'show_in_graphql' => 1,
                    'default_value' => '',
                    'placeholder' => '',
                    'parent_repeater' => 'field_6348de2a9a47f',
                ),
            ),
        ),
    ),
    'location' => array(
        array(
            array(
                'param' => 'post_type',
                'operator' => '==',
                'value' => 'post',
            ),
        ),
        array(
            array(
                'param' => 'post_type',
                'operator' => '==',
                'value' => 'stories',
            ),
        ),
    ),
    'menu_order' => 0,
    'position' => 'normal',
    'style' => 'default',
    'label_placement' => 'top',
    'instruction_placement' => 'label',
    'hide_on_screen' => array(
        0 => 'the_content',
        1 => 'featured_image',
    ),
    'active' => true,
    'description' => '',
    'show_in_rest' => 1,
));

  • I don’t know the answer to this, I am just assuming.

    It appears that filters are not being applied to the content when you get it using rest api. ACF WYSIWYG fields depend on applying filters acf_the_content for formatting.

    Looking at the acf code I don’t see any reason why the content should not be formatted correctly, you might want to contact the developers.

    As a work-a-round you could add this by adding your own filter. There is an undocumented hook acf/rest/format_value_for_rest, this hook has all the standard variations similer to the acf/format_value hook

    
return apply_filters( 'acf/rest/format_value_for_rest', $value_formatted, $post_id, $field, $value, $format );

    Looking into it more the way the field is formatted is based on an acf setting, "rest_api_format" and the default for this setting is “light”, and WYSIWYG fields are do not run through the standard format_value filters when set to light.

    So after all of what I said, the corrective action is to add a filter the changes this setting to “standard”. However, this will change how all values are filtered and may have undesired affects on other field types, so the value of other field types may not return what you are expecting. See this https://www.advancedcustomfields.com/resources/wp-rest-api-integration/#controlling-output-format. If you use a filter to change this setting then you’ll likely need to find a way to alter the setting only for specific field types, and I don’t see any way of doing that.

Viewing 25 results - 201 through 225 (of 1,299 total)
1 2 3 … 8 9 10 … 50 51 52