Support

Account

Register Login

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

Search Results for 'Wysiwyg'

reply

  • I just did a quick test of a shortcode in both classic editor and an acf WYSIWYG editor. This shortcode simply outputs simple text. The output is the same in both cases with no added whites space elements added to the text.

    Exactly what/how are you adding with the shortcode?

  • Eliot,

    thanks about acf_the_content!

    About TinyMCE: fixed after I’ve added as admin script:

    acf.add_filter(‘wysiwyg_tinymce_settings’, function( mceInit, id, field ){
    // is true before
    mceInit[‘wpautop’] = false;

    return mceInit;
    });

    Thanks!

  • Hi @kuraga

    Thanks for the email,
    Elliot here – ACF dev​​​.

    The PHP filters “the_content”, “the_excerpt” and “term_decription” are run during the output of these values in the theme front-end. They are PHP filters, which won’t affect the WYSIWG field.

    The WYSIWYG field uses a similar, but unique filter, named “acf_the_content”. Using this filter will allow you to customize the WYSIWYG output in your theme.

    The “tiny_mce_before_init” filter is used to cusotmize the tinymce settings. These will affect how the editor saves the value into the DB. In theory, ACF should inherit these settings, but to be extra sure, please checkout the ACF JS filter: https://www.advancedcustomfields.com/resources/javascript-api/#filters-wysiwyg_tinymce_settings

    Hope this helps.

    Cheers
    Elliot

  • @paul_crookell – sort of! What seemed to work for me was to set the value using the ACF JS field API, and then use jQuery to “click” the code view tab. And then the text I was inserting would appear.
    That was good enough for this project so I didn’t dig further – whenever I tried programmatically selecting the wysiwyg view, the value would go blank again.
    My solution, in essence:
    var description = “This text should appear in the TinyMCE textarea!”;
    acf.getField(“field_5d5231b7e8738”).val(description);
    jQuery(“div.acf-field-5d5231b7e8738 button.switch-html”).click();
    Would love to know a more elegant way!

    Ignore all that, I sorted it – updating in one second, hold tight.

  • @etling – did you ever resolve this issue? – i’ve been searching and unable to find a working example. All other fields update on the page apart from wysiwyg fields?

    Cheers
    Paul

  • For stopping removing <p> tags inside WordPress TinyMCE (classic) editor (during switch Visual and Text editor’s tabs),

    I add to ${THEME_FOLDER}/functions.php:

    remove_filter( ‘the_content’, ‘wpautop’ );
    remove_filter( ‘the_excerpt’, ‘wpautop’ );
    remove_filter( ‘term_decription’, ‘wpautop’ );

    function config_tinymce( $config ) {
    $config[‘wpautop’] = false;
    return $config;
    }
    add_filter( ‘tiny_mce_before_init’, ‘config_tinymce’, 10 );

    But this doesn’t work for ACF’s fields editors.

    Help, please? Thanks!

    ———————

    Spoiler:

    function acf_wysiwyg_remove_wpautop() {
    remove_filter( ‘acf_the_content’, ‘wpautop’ );
    }
    add_action( ‘acf/init’, ‘acf_wysiwyg_remove_wpautop’);

    with

    remove_filter( ‘acf_the_content’, ‘wpautop’ );

    don’t work.

    I think, we need something like (analogue of)

    function config_tinymce( $config ) {
    $config[‘wpautop’] = false;
    return $config;
    }
    add_filter( ‘tiny_mce_before_init’, ‘config_tinymce’, 10 );

  • If you need it in the same loop when you go through the repeater then you could try this:

    preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $texthtml, $image);
    echo $image['src'];

    Where of course the $texthtml is your WYSIWYG field.

  • If you need it in the same loop when you go through the repeater then you could try this:

    preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $texthtml, $image);
    echo $image['src'];

    Where of course the $texthtml is your WYSIWYG field.

  • https://wordpress.org/plugins/acf-autosize

    It seems to create intermittent issues. Sometimes my WYSIWYG fields are 4x the viewport height. It’s on a good track, but I would be in favor of something in core.

  • Isn’t each line in the WYSIWYG already wrapped in a <p> tag? Could you accomplish what you’re trying to do by targeting/styling the <p> tags instead of wrapping them in a <span>? What is your reason for wrapping in a <span>?

  • Thanks! 🙂

    #of queries for updating
    Each repeater field has a radio selector and 5 text field (not wysiwyg)
    There’s also no way for a user to add images or select images and I’m not querying images array and such.
    I didn’t know that there would have been another query required to check if the value can be written – this worries me a bit.

    What do you think should be the upper limit for the repeater field?

    I imaging that (properly optimized) custom-coding a web app (not wordpress-dependent) would be more efficient and stable but how much?

    Regarding the last point, I’m just showing each and every field value on the single post but it’s all basically just text

  • – #of queries for updating. I’m just giving you this for information. You actually have 6 fields including the repeater and 6 sub fields in the repeater. There are also this number of ACF field references. When inserting a new post this actually creates 2X this number of queries because WP does a query to see if the meta_key exists or has a value before it inserts the value. So what you actually have is (6*2)+(6*30*2)=372 postmeta queries.

    I would definitely put an upper limit on the number of repeaters they can submit. Depending what these fields are 6 sub fields * 30 could time out on the submission. Text fields and other simple fields should not be an issue, but if you have 6 wysiwyg fields you might have an issue with only a single post being submitted depending on the amount of content being submitted.

    – number of people hitting submit at the same time. I think that 1000 or more people all submitting a post at the same time would bring nearly any site on shared hosting down. I use VPS servers for some of our clients and I’d be worried about these going down. I’m sure we could beef these up to handle it if we needed to but then I’m not sure the clients would actually go for the additional costs. As far as shared hosting goes, depending on the data submitted, you’re going to see the server go down if this happens. You need to figure out what the likelihood of this happening is.

    – post viewing, this should not be an issue. WP does a setup_postdata() when showing a post. This pulls all post meta data in a single query and puts it in the WP cache.

    What you need to be careful of here is not the field content, but what you’re having ACF do with that field content. I will give you one example, image fields. When you return the image ID this will not create extra queries, however, returning an image array will create many additional queries to get all of the data associated with the attachments, some of which you may not need. If you have a lot of images you’re better of returning the ID and then only having WP get what you need instead of letting ACF do the work for you. The same can be said for post object and relationship type fields.

  • I discovered that I need to check the field entitled “Enable Raw HTML”. It seems counter-intuitive, because what I want is no HTML!
    It worked and now I can display WYSIWYG fields. 🙂

    Screenshot-2....png

  • I am trying to:
    output the contents of a custom types field via a content template that has ‘auto-paragraphs’ enabled. Strangely other content templates seem to work fine, but the one called ‘Left Hand Content’ does not after updating. Additionally, one of the visual editors WYSIWYG output is also just dumping raw text into the window with no ‘p’ tags…

    WordPress Version 4.2
    Types Version 1.6.6.3

  • A rich text field (as seen in the lazy blocks plugin) would be a great addition.
    I would love the ability to add such fields instead of the MCE-WYSIWYG field…

  • The value of the field will always be in $field['value'], what format that value is in depends on the type of field it is and what the return format is set to if that is an option available for the field.

    For example, and image field can return an ID, a URL or an array of information and this is what you’ll find in $field['value']

    I’m not sure what you mean by data-type = ‘group’.

    wysiwyg is not an index of $field

    Are you sure you want to be using get_field_objects()? https://www.advancedcustomfields.com/resources/get_field_objects/

  • hello @lefthookdigital
    i read above thread, i have solution to display fileds along with “_name” and copy it by one click

    demo >> http://prntscr.com/r00zwx

    in functions.php add below code

    
/*
|--------------------------------------------------------------------------
| acf admin slug
| https://www.advancedcustomfields.com/resources/acf-render_field/
| https://www.coderomeos.org/select-and-copy-data-to-clipboard-using-jquery
|--------------------------------------------------------------------------
*/
add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');
function my_acf_input_admin_footer() {
	if ( get_post_type() != 'acf-field-group' ) { ?>
		<script type="text/javascript">
            jQuery(function($) {
                $('#wpwrap').each(function(index) {
                    $(this).on('click','.copy-to-clipboard input', function() {
                        $(this).focus();
                        $(this).select();
                        document.execCommand('copy');
                        //$(".copied").text("Copied to clipboard").show().fadeOut(1200);
                    });
                });
            });
		</script>
		<?php
	}
}

// Basic
add_action('acf/prepare_field/type=text', 'show_field_details', 1);
add_action('acf/prepare_field/type=textarea', 'show_field_details', 1);
add_action('acf/prepare_field/type=number', 'show_field_details', 1);
add_action('acf/prepare_field/type=range', 'show_field_details', 1);
add_action('acf/prepare_field/type=email', 'show_field_details', 1);
add_action('acf/prepare_field/type=url', 'show_field_details', 1);
add_action('acf/prepare_field/type=password', 'show_field_details', 1);

// Content
add_action('acf/prepare_field/type=image', 'show_field_details', 1);
add_action('acf/prepare_field/type=file', 'show_field_details', 1);
add_action('acf/prepare_field/type=wysiwyg', 'show_field_details', 1);
add_action('acf/prepare_field/type=oembed', 'show_field_details', 1);
add_action('acf/prepare_field/type=gallery', 'show_field_details', 1);

// Choice
add_action('acf/prepare_field/type=select', 'show_field_details', 1);
add_action('acf/prepare_field/type=checkbox', 'show_field_details', 1);
add_action('acf/prepare_field/type=radio', 'show_field_details', 1);
add_action('acf/prepare_field/type=button_group', 'show_field_details', 1);
add_action('acf/prepare_field/type=true_false', 'show_field_details', 1);

// Relational
add_action('acf/prepare_field/type=link', 'show_field_details', 1);
add_action('acf/prepare_field/type=post_object', 'show_field_details', 1);
add_action('acf/prepare_field/type=page_link', 'show_field_details', 1);
add_action('acf/prepare_field/type=relationship', 'show_field_details', 1);
add_action('acf/prepare_field/type=taxonomy', 'show_field_details', 1);
add_action('acf/prepare_field/type=user', 'show_field_details', 1);

// jQuery
add_action('acf/prepare_field/type=google_map', 'show_field_details', 1);
add_action('acf/prepare_field/type=date_picker', 'show_field_details', 1);
add_action('acf/prepare_field/type=date_time_picker', 'show_field_details', 1);
add_action('acf/prepare_field/type=time_picker', 'show_field_details', 1);
add_action('acf/prepare_field/type=color_picker', 'show_field_details', 1);

// Layout
//add_action('acf/prepare_field/type=message', 'show_field_details', 1);
add_action('acf/prepare_field/type=accordion', 'show_field_details', 1);
//add_action('acf/prepare_field/type=tab', 'show_field_details', 1);
add_action('acf/prepare_field/type=group', 'show_field_details', 1);
add_action('acf/prepare_field/type=repeater', 'show_field_details', 1);
add_action('acf/prepare_field/type=flexible_content', 'show_field_details', 1);
add_action('acf/prepare_field/type=clone', 'show_field_details', 1);

function show_field_details($field) {
	$field['label'] .= '<div class="description copy-to-clipboard" style="margin-bottom: 10px; margin-top: 10px;">
		<input readonly="readonly" type="text" value="'.trim($field['_name']).'" style="color: #0c5460;">
	</div>';
	return $field;
}

add_action('acf/field_group/admin_footer', 'my_acf_field_group_admin_footer');
function my_acf_field_group_admin_footer() { ?>
	<script type="text/javascript">
        (function( $ ){
            $('.description.copy-to-clipboard').remove();
        })(jQuery);
	</script>
	<?php
}

  • The problem is that the custom “setup” function is overriding the ACF one, which prevents ACF from listening to the “change” event of the TinyMCE instance.

    Without this listener, the ACF Block won’t be able to detect a “change”, which prevents it from saving/updating.

    The solution is to create a backup of the original setup function and call that within the custom one. Like so:

    function custom_acf_tinymce() {
?>
<script>
acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id, $field) {
	var _setup = mceInit.setup;
	mceInit.setup = function(editor) {
		_setup.apply(this, arguments);
		editor.on('click', function(e) {
			console.log('Editor was clicked');
		});
	};
	return mceInit;
});
</script>
<?php
}
add_action('acf/input/admin_footer', 'custom_acf_tinymce');

  • If you are not seeing the Visual/Text tabs on the right, to get this I need to select “Text Only” under the Tabs setting for the WYSIWYG. What you’re seeing is what I see if I click on the “Text” tab. Otherwise, it seems to be working as expected for me.

  • We have the same problem. When specifying tabs, full toolbars, media buttons. It resets after saving to use: Only visual tab, basic toolbar and no media buttons.

    We’re using a repeater with flexible content. The wysiwyg field is inside one of the flexible fields.

  • I had to hack my own solution to get the syntax highlighting to show up for the wysiwyg editor. It would be nice if it was built in. Simply insert this code in your functions.php file to get code mirrors’ syntax highlighting:

    /* ADD CODE MIRROR CSS */
    function admin_style() {
    wp_enqueue_style(‘admin-styles’, ‘https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css&#8217;);
    }
    add_action(‘admin_enqueue_scripts’, ‘admin_style’);

    /* ENQEUE CODE MIRROR JS */
    function my_enqueue() {
    wp_enqueue_script(‘code_mirror_script1’, ‘https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.js&#8217;);
    wp_enqueue_script(‘code_mirror_script2’, ‘https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/xml/xml.js&#8217;);
    }
    add_action(‘admin_enqueue_scripts’, ‘my_enqueue’);

    /* ADD CODE MIRROR ADDITIONAL STYLES */
    add_action(‘admin_head’, ‘custom_css’);
    function custom_css() {
    echo ‘
    <style>
    .tmce-active .mce-tinymce{display:block !important;visibility:visible !important;}
    .html-active .mce-tinymce{display:none !important;visibility:hidden !important;}
    .tmce-active .CodeMirror{display:none;}
    </style>
    <script>
    jQuery(document).ready(function($){
    function rundCodeMirror(){
    var areas = document.getElementsByClassName(“wp-editor-area”);
    for(var i = 0; i < areas.length; i++) {
    CodeMirror.fromTextArea(areas.item(i), {
    mode : “xml”,
    htmlMode: true,
    lineNumbers: true
    });
    }
    }
    setTimeout(rundCodeMirror, 1000);
    });
    </script>
    ‘;
    }

  • I’m having similar issues. If you put a repeater with a wysiwyg into a block, there’s barely any room in the sidebar for people to type. And I agree that many clients will find the need to switch between editing and preview modes irritating. I guess tweaking the css for the editor pages could help, maybe allocating more of the screen width to the sidebar and reducing some of the margins/paddings of the custom fields themselves, but it would be great if an ‘official’ approach was available from ACF. The more people start doing this kind of thing the more it will become a problem that needs resolving properly.

  • I have the same problem media grid not work I discontinue “Advanced Custom Fields: qTranslate” Plugin Return to normal

    Advanced Custom Fields – Version 5.8.7
    Advanced Custom Fields: qTranslate – Version 1.7.25

    Advanced Custom Fields Rollback Version to 5.8.2 Normal work
    Field type to”Wysiwyg Editor” Click Visual Not work And get the following error:

    Uncaught TypeError: Cannot read property ‘onpageload’ of undefined
    at wp-tinymce.js?ver=4960-20190918:9855
    at e (wp-tinymce.js?ver=4960-20190918:9857)
    at _e.y.bind (wp-tinymce.js?ver=4960-20190918:434)
    at Object.M [as bind] (wp-tinymce.js?ver=4960-20190918:2789)
    at Object.init (wp-tinymce.js?ver=4960-20190918:9897)
    at Object.r [as go] (editor.min.js?ver=5.3:1)
    at HTMLButtonElement.<anonymous> (common.js?ver=5.3:47)
    at Function.each (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,moxiejs,plupload,&load[chunk_1]=jquery-ui-resizable&ver=5.3:2)
    at a.fn.init.each (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,underscore,moxiejs,plupload,&load[chunk_1]=jquery-ui-resizable&ver=5.3:2)
    at HTMLButtonElement.<anonymous> (common.js?ver=5.3:44)

  • Wow thank you! The explanation was very helpful and the example added a bit to my understanding of PHP and ACF. Very much appreciated.

    By your example of both ‘switch’ and ‘if’ method it looks that I may have solved the issue of content being repeated and retained in each row. However, I’m not able to actually to continue any further with this method without being able to assign an ID or class to each of the 4 potential radio button selections.

    The output is correct, but it needs a container and formatting.

    Is there anyway to integrate a <div> container to wrap around each of the options, or at least assign an ID or Class to each one?

    Example of what I have working now:

    if ($content_type == 'image') {
  the_sub_field('image_content');
} 
elseif ($content_type == 'wysiwyg') {
  the_sub_field('wysiwyg_content');
} 
elseif ($content_type == 'quote') {
  the_sub_field('text_content');
} 
elseif ($content_type == 'video') {
  the_sub_field('video_content');
}

    And example of what I’m trying to accomplish (I know this is incorrect, but this is my brute example):

    elseif ($content_type == 'video') {
  <div class="full-width">the_sub_field('video_content');</div>
}

  • ok i have sort of narrowed it down. I tried to recreate the issue onanother fresh wordpress install and I was able to step by step recreate it. Turns out that the code is all good, it is what is entered in to the wysiwyg field that breaks it. The code being used in the field is a shop style collective widget. When i use text it is no problem but when i use the code from them for the widget it breaks it. Strangely enough it only breaks it in the post slider module, and not anywhere else it is used within the beaver builder site. Furthermore when i go through the widget code and remove the iframe portion of the code, viola it stops the endless loop. so it has something to do with that. My question is now is this a ACF change that made it stop or a BB module change that made it stop working or is it a WP core change…. and then how could I possibly make it work again.

Viewing 25 results - 326 through 350 (of 1,294 total)
1 2 3 … 13 14 15 … 50 51 52