Support

Account

Register Login

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

Search Results for 'Wysiwyg'

reply

  • ACF has a delayed initialization for WYSIWYG fields, and I would suggest using this.

    There is no solution for async loading of fields.

    As for the slow saving. There isn’t much that can really be done here. ACF works by using built in functions for updating post meta fields. ACF has no way of know what content has been changed. The WP function update_post_meta() and equivalent do this work. Basically, because of the way meta values work, this is done 1 field at a time. WP supplies no mechanism for doing it any other way.

    I see this as a flaw in WP and not in ACF. ACF’s goal, to my understanding, is to allow us to create an admin for editing custom meta values using what is available to all of us without ACF. The problem is that it’s really easy to create these monolithic admin interfaces without realizing that there may be a problem down the road.

    This is an inherent limitation when using WP and repeaters/flex fields. There have been many discussions about this here https://support.advancedcustomfields.com/forums/search?bbp_search=slow+saving. If you read any of these you’ll see that I’ve suffered from the same problems myself. There are no good fixes, anything I’ve done has just been hacks that have had varying degrees of success. The only real solution is to be aware of the limitations and develop in a way that works around those limitations, as you suggest, by breaking things up into smaller chunks. Unfortunately, by the time most people realize that there is a limitation they are already having issues because of the limitation.

  • Hi Supporter,

    We are facing a problem in my websites. Actually problem is , i am using wysiwyg editor in my website but wysiwyg editor not showing toolbar icon & after some google research it gives result like something problem with themes js or some other plugin js but after my checking by console & i found my websites doesn’t have any JS Or CSS error, although wysiwyg editor doesn’t show toolbar icon on my wp admin. but i notice it give a error on console like “JQMIGRATE: Migrate is installed, version 1.4.1” but i not sure. why wysiwyg editor not showing toolbar icon in my wp admin pages & post. Please do the needful for me, Please help to resolved this issue. This i very urgent for me. if you need my wordress websites admin credentials then let me know then i can provide you.

    Thanks Supporter

  • The font end performance of these huge pages was and is still good and there is no performance issues with them because of some optimization, for example ensuring that WP gets all of the post meta values in a single DB query (get_post_meta($post_id)). And in many cases, all of the content is not displayed. In the scenario given, the client wanted to be able to create “Pages” where each page could be shown independently but also wanted to allow site visitors to “Show All” pages. 90% of the time only 1 row of the repeater is ever needed. However, the display of all pages only takes a few millisecond more than showing a single page. This was a case of solving the problem bass ackwards. I created a editor to hold all of the pages and then split them up into single pages where I should have created a separate editor for each page and then combined them for the “Show All” option. It was a learning experience. My goal was to make the site easier for the client to edit because I thought (knew) that having to edit multiple documents and set the correct display order would confuse them. Also, there were SEO considerations since we wanted the “Full Article” page to be indexed and not the individual pages and this was easier for me to do if all the content was associated with a single page.

    As far as back end, I usually use “block” display on repeaters, and I try to make it look as presentable as possible working within what ACF provides, I have not tried the new “Group” field yet. I have done some customization to ACF when I think it’s necessary and to make it less confusing when I thing it’s needed, but this is rare. Going back to the same example. The 7 WYSIWYG fields could be laid out is several specific ways, I provided a radio button to select the “Layout” and using conditional logic showed an image that represented that layout. I could have gone further and actually set the content fields to be positioned as they would be on the site, but they weren’t paying me enough to go that far.

  • You probably saw this coming, but the answer to all your questions is “It depends”.

    I have been using ACF for so long that I do not remember a site I’ve built without it. Every site I build for a client is custom based on their needs.

    1. Is there anything like too many ACF fields? Or you always recommend to use ACF.

    The answer to this one is Yes. But mostly this has to do with repeaters and flexible content and saving the post. The number of ACF fields will rarely impact the performance of the front end of the site.

    When you have a lot of repeaters and flex fields, and depending on what types of fields you are using, the number of fields can impact the performance of the admin in 2 ways.

    The first is that the loading of the post editor could be slow when there are a lot of fields that depend on JavaScript, like any of the jQuery fields, this also includes WYSIWYG fields that depend on tinyMCE. When building complex field groups it is important to take advantage of the “Delayed Initialization” provided by some of the ACF fields.

    The second way that it effect the performance of the admin is when saving a post. There is a point where the save process can time out.

    I’ll give you an example of this. I once built a site for a client that had a repeater. Each row of the repeater had 7 WYSIWYG fields. The content of the page required specific formatting for layout out these content fields in a very structured way to meed the client’s requirements. All went well until the client decided to add 30… let’s call them “Panels” to one page of the site. This meant that ACF needed to save 210 WYSIWYG fields and related fields for determining other options. What happened was that the save took longer that 30 seconds, which meant the the browser timed out and it appeared that it crashed the site. (In reality, it was just the browser timing out. The update went merrily on it’s way in the background and completed successfully. When this happens you can wait a minute or 3, use the browser back button and then refresh the editor and all of the changes would appear.) It was because of this that I built this https://github.com/Hube2/acf-prevent-timeouts.

    When building something for a client using ACF it is important to think about how the client can abuse your masterpiece. I did not know that this problem existed when I built this site, but knowing it now I would not build another one the same way. I would likely use a post type using a parent page/post and child pages/posts in order to break things up and therefore avoiding the issue.

    2. When certain layout becomes too complex with tiny fields for everything, do you still use ACF or you look for page builder options in such scenarios?

    I have never used a page builder. I’ve found that they are too generic. They also rarely meet the specific requirements of my clients. Like I said, I build custom sites to exactly match the client’s needs. ACF allows me to do this without trying to shoehorn them into something that may not be exactly what they wanted. I also find that most page builders are bloated and also give the client too many options that allow them to break things easily. When using ACF I can give them only the options that they need. It makes my life easier because it’s harder for them to break things. And it makes their life easier because there is less for them to learn in order to manage their own site. My goal, when building a site is to turn it over to the client and for them to be able to do everything they need. The last thing I ever want to do is manage the content of a client’s site or need to make changes because they cannot understand how to do it themselves.

    3. Finally, lets say you are working on a blog. And at some point you want some custom structures in the middle of article, maybe a table or some other layout. How do you approach it? Do you create ACF templates and split up content area with repeater field so you can use these custom structures in the middle of articles? Or again do you take some other approach?

    The answer to this one is the biggest “It Depends” answer.

    For a blog… meaning “Blog Posts”. for this they usually get just the standard WP editor. Blogs are free form and all content and formatting inside of “The Content” area is up to the client. I may provide other options on the blog, for example a way to allow them to specify a banner image for the page, or some special feature. However, I will never build a way that requires special formatting and layout within this area.

    For the rest of the site. For example, page layouts and custom post types. These are almost always formatted specifically. Meaning that every page must look the same as every other page with set features. These features may be optional on each page, but when they appear they will always be shown in the same place and always appear the same when shown. These pages, templates and post types will have fields for everything that the client should be able to control. Outside of the blog, almost all of my clients require that the structure of specific pages be the same and meets there companies style guide. I may need to build them many specific templates for different page layouts. On occasion I also have included a generic page where the content is just a basic content field where they can control the layout, but this is rare and the client that wants this is usually familiar with WP and the use of things like shortcodes and editing HTML directly.

    In the case you mentioned about a “blog” with custom structures in the middle of the content. If this was a requirement given to me by the client I would likely give them 2 content editors, one for the beginning of the blog and one for the end and the other fields in the middle and it would be up to them do decide where this special feature would be inserted. The other option would be to build a custom shortcode so that they can insert the special features into their page. But like I keep saying, that would depend on the client’s specific needs.

  • I found this smart solution for functions.php:

    function showBeforeMore($fullText){
    if(@strpos($fullText, '<!--more-->')){
        $morePos = strpos($fullText, '<!--more-->');
        print substr($fullText,0,$morePos);
        print "<span class=\"read-more\"><a href=\"". get_permalink() . "\" class=\"read-more-link\">Read More</a></span>";
    } else {
        print $fullText;
    }
}

    <?php showBeforeMore(get_field('YOUR-FIELD-NAME')); ?>

    my goal for Wysiwyg Editor with <!–more–> was to integrate a toggle read-more/less-button:

    
function readmore($fullText){
	if(@strpos($fullText, '<!--more-->')){
		$morePos  = strpos($fullText, '<!--more-->');
		$fullText = preg_replace('/<!--(.|\s)*?-->/', '', $fullText);
		print substr($fullText,0,$morePos);
		print "<div class=\"read-more-content hide\">". substr($fullText,$morePos,-1) . "</div>";
		print "<a class=\"ui lined small button read-more\">Read More</a>";
	} else {
		print $fullText;
	}
}

  • Hello. I’ll add my situation on this thread.

    I am consuming data from ACF in a JavaScript front-end application. Because of our product, we have a lot of <sup> going on in a lot of places. I would love to just use a ‘text’ field, but because of this – I have to use WYSIWYG fields for almost everything.

    The prime example, is that we have an H2. It needs to have a WYSIWYG.

    It is used in the template like this:

    <h2>{{{model.acf.field-name}}}</h2>

    Now because the field is a WYSIWYG, that generates something like this:

    <h2><p>Something with a <sup>™</sup></p>/h2>

    And – you can see how that is a problem with my article type system / styling wise (as well as crawler document structure.

    I *could* remove all p tags from the editor… but I also need those in all of the other cases.

    Any ideas – or ways you’ve worked with this?

    An option in the field would be the best – but I can also just teach my team to write sup in the headings / since it’s only a third of them. A WYSISYG that is known to be only one line etc. ?

    If the WYSISYG weren’t so tall by default, that would also be a part of my choices.

  • ok i solved this thank you so much. finally it worked for me like this to print all the values in subfields:

    if($check['type'] == 'repeater'):
									if( have_rows($name) ):
											while ( have_rows($name) ) : $the_row = the_row();
    											foreach ($the_row as $key => $value) {
        											$content .= "$value </br>" ;
   													 }
   											endwhile; 
									endif;
								elseif($check['type'] == 'wysiwyg'):
									$content .= $value;
								else:

								endif;

  • thanks for your help. I still don’t understand it. I tried removing the while loop and using your solution and I’m able to print all the keys and value but onyl from the first row of the array:

    if($check['type'] == 'repeater'):
									if( have_rows($name) ):
											$values = get_field_object($name)? : [];
											foreach ($values as $key => $value) {
       											$content .= "key: $key - value: $value </br>";
   											 }
									endif;
								elseif($check['type'] == 'wysiwyg'):
									$content .= $value;
								else:

								endif;

    and what I’m actually trying to exactly do is this:

    if( have_rows($name) ):
										
										while ( have_rows($name) ) : the_row();
										
											// write method to print subfields without knowing their names.
											$content .= get_sub_field('effect_name') . "</br>";
											$content .= get_sub_field('effect_magnitude') . "</br>";
											$content .= get_sub_field('effect_description') . "</br>";

										endwhile;
									endif;

    but without knowing the names ‘effect_name’, ‘effect_magnitude’ and ‘effect_description’

  • hey so i found this code:

    function acf_apply_content_filter_for_api($value, $post_id, $field){
     return str_replace( ']]>', ']]>', apply_filters( 'the_content', $value) );
}
function add_content_filter_ACF(){
   if(!is_admin()){
      remove_all_filters('acf/format_value/type=wysiwyg');
      add_filter('acf/format_value/type=wysiwyg', 'acf_apply_content_filter_for_api', 10, 3);
   }
}
add_action('init', 'add_content_filter_ACF');

    and i was trying to subsitute

    remove_all_filters('acf/format_value/type=wysiwyg');
    for
    remove_all_filters('acf/format_value/name=publication_content');

    but the substitution doesnt work. can someone help me and tell me how should i modify the code? Footnotes are crucial to my website. thanks

    PS oh, i see the thread is closed, should I start a new thread?

  • Reviving this thread in case this helps – was looking for the same thing, a way to reduce the initial height of WYSIWYG fields, as it makes the admin overly bulky for small content fields that need more control than Text Area.

    In digging, I found that wp-editor supports editor_height since v3.5 https://codex.wordpress.org/Function_Reference/wp_editor

    Would that allow for ACF to add height as an admin option?

    In the meantime, I’m using the following, but it prevents the client from being able to drag the size larger.

    /*-----------------------------------------------------------------------------------*/
/*	Force Height of ACF WYSIWYG Fields
/*-----------------------------------------------------------------------------------*/
add_action('admin_head', 'my_custom_wysiwyg');
function my_custom_wysiwyg() {
  echo '<style>
    .wp-editor-container textarea.wp-editor-area {
      height: 100px !important;
    } 
  </style>';
}

    Thanks for the help,
    Jonathon

  • Try adding a priority to the function, this worked for me:

    function acf_wysiwyg_remove_wpautop() {
    remove_filter('acf_the_content', 'wpautop' );
}
add_action('acf/init', 'acf_wysiwyg_remove_wpautop', 15);

  • OK, combining that with

    add_action('admin_head', 'admin_styles');
function admin_styles() {
  
	?>
	<style>
		.acf-editor-wrap iframe {			
			min-height: 0;
		}
	</style>
	<?php
	
}
 ?>

    (in functions.php) solved it. (found it on this thread https://support.advancedcustomfields.com/forums/topic/how-to-set-a-custom-height-for-wysiwyg/)

  • This is just a guess. The reason that the WP gallery is responsive when added to the content wysiwyg editor is probably because it is in the content wysiwyg editor. Images are made responsive by WP by applying a filter to the content that does this and this filter is not run when calling do_shortcode() from the template.

    You can try this, but I don’t know if it will work

    
echo wp_make_content_images_responsive(do_shortcode( $shortcode ));

  • Hi Everyone,
    I have the same issue with ACF pro 5.6.3 / WordPress 4.8.2.
    Like @magicstick :
    If visual editor is default tab it’s not working (switching to text tab works)
    If text tab is default, I can switch to visual tab and it works.
    It’s a form in a user Add/Edit form. However I am pulling the acf_form to a front end template page and behavior is the same.
    I’ve tried deactivating all my plugins apart from ACF. No change.
    I’ve tried removing all other jQuery based fields from my field group. No change.
    WYSIWYG working fine on pages flexible fields. (don’t get that at all)

    I was expecting for a resolution with the last version of ACF last week but nothing change.
    Console give me some informations about the problem but I don’t know how to resolve it.
    I see that there is a simple problem of instance between each other:

    acf-input.min.js:3:22419ReferenceError: Can’t find variable: instanceId
    tinymce.min.js:14:3486TypeError: undefined is not an object (evaluating ‘a[b]’)

    Do I have to open a ticket or this problem should be resolved in an other way?

    Thanks a lot for your reply.

    Ced

  • I see there is no way of customizing existing fields settings, so I made up my own solution which is based on the instructions content. Here is the code (in case anyone is interested), what it does is limiting a maximum number of words in WYSIWYG field:

    
// Check  if number of words in WYSIWYG is less than max number
// provided inside field instructions. Supported instructions format is (see the regex):
// Max. 300 words
// max 300 words
// max.300 words
add_filter('acf/validate_value/type=wysiwyg', function ( $valid, $value, $field, $input ){
	if( !$valid ) {
		return $valid;
	}
	
  $matches = [];
  preg_match('/max[^\d]*(\d+) word/i', $field['instructions'], $matches);

  if ( empty( $matches ) || empty( $matches[1] ) ) {
    return $valid;
  }

  $max_words = (int) $matches[1];

  // check words number
  $words_number = str_word_count( strip_tags( $value ) );
  if ( $words_number > $max_words ) {
    $valid = "Text is too long ( ${words_number} words ). Max number of words is ${max_words}.";
  }
	
	// return
	return $valid;
}, 10, 4);

  • I was having the same issue when trying to drag a widget containing a wysiwyg field onto a sidebar. Some testing proved that it was the presence of the Visual tab in the wysiwyg editor. If I changed it to show only the Text tab, the error went away. But I opted to downgrade ACF instead. 5.6.1 works for me, but 5.6.2 and 5.6.3 both generate the “Uncaught TypeError: Cannot read property ‘onpageload’ of undefined” error.

  • I’ve had another look at the ACF WYSIWYG Styling plugin and also the acf docs and made a slight tweak to the code used in that plugin and I’m getting the classes added to my WYSIWYG’s again:

    
function acf_plugin_wysiwyg_styling() { ?>
	<script>
        (function($) {
            acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id, $field) {
                var fieldKey = $field.data('key');
                var fieldName = $field.data('name');
                var flexContentName = $field.parents('[data-type="flexible_content"]').first().data('name');
                var layoutName = $field.parents('[data-layout]').first().data('layout');

                mceInit.body_class += " acf-field-key-" + fieldKey;
                mceInit.body_class += " acf-field-name-" + fieldName;
                if (flexContentName) {
                    mceInit.body_class += " acf-flex-name-" + flexContentName;
                }
                if (layoutName) {
                    mceInit.body_class += " acf-layout-" + layoutName;
                }
                return mceInit;
            });

        })(jQuery);
    </script>
<?php
}
add_action('acf/input/admin_footer', 'acf_plugin_wysiwyg_styling');

  • Here is a bit of code that can be used to target specific tinyMCE edtors that I’ve used to detect changes in an editor in order to trigger other events. I don’t know if this will help anyone or not.

    
jQuery(document).ready(function($){
  
  // add an action to a wysiwyg field
  // this function will fire every time a tinyMCE editor is initialized
  tinyMCE.on('addEditor', function(e) {
    
    // this makes sure it is an acf editor
    if (typeof(e.editor) == 'undefined' || !e.editor.id.match(/^acf-editor/)) {
      // not an acf wysiwyg field
      return
    }
    // get the text area of the acf field matching the id
    // and make sure that the field key matches the one we want
    // to add the action to
    var $field_key = $('#'+e.editor.id).closest('.acf-field').data('key');
    
    // see if it is the field key of the field we want to deal with
    if ($field_key != 'field_58923ed03766b') {
      // not our field
      return;
    }
    
    // this is the bit that adds a tigger on the input of the editor
    var object = $('#'+e.editor.id);
    e.editor.on('input', function(ed) {
      // trigger the action we want to act on
      object.trigger('input');
    });
    
  }); // end tinyMCE.on
  
}); // end ready function

  • Mmm yeah I was using the ACF WYSIWYG Styling plugin, but that is now only adding the class ‘acf-field-name-undefined’ to the wysiwyg iframe. The javascript solution above only gives me a javascript error in wordpress now as well.

    Does anyone have a solution that works with the latest acf version?

  • Hello..

    I’m not 100% sure what you are asking… but, from what I do understand, it sounds like.. yes, it can be done.

    Are you saying that:

    a) you want to assign a post to a category
    b) display content *below* that post, depending on the category?

    If so… here would be my approach:

    1) Create an Options Page
    2) Add a Repeater Field to the Options Page (call it something like: category-content)
    3) Add 2 Sub-Fields to the Repeater, one to choose the Category, one to add the content (a WYSIWYG fields perhaps, or a Textarea)
    4) Then… in a custom function, you can leverage the WordPress filter: the_content to append the content to a post, depending on the category

    I realize that doesn’t tell you *how* to do it precisely, but if I am correct in what you want… hopefully you have a game plan now where you can dig in and figure it all out.

    It’s all doable with ACF and a little PHP code.

    Hope that helps!
    Keith

  • My workaround was to disable the WYSIWYG editor.

  • This is how Ive handled fitting wysiwyg editors height to its content, with a fallback to a min height.

    		if ( typeof acf !== 'undefined' ) {
		acf.add_action( 'wysiwyg_tinymce_init', function( ed, id, mceInit, $field ) {

			// set height of wysiwyg on frontend
			var minHeight = 200;
			var mceHeight = $( ed.iframeElement ).contents().find( 'html' ).height() || minHeight;

			if ( mceHeight < minHeight ) {
				mceHeight = minHeight;
			}

			$( ed.iframeElement ).css( 'height', mceHeight );
		} );
	}

  • Okay so I think the shortcode thing is probably in the right direction.

    Here’s what I’m trying right now. I created a custom post type called “Galleries”. The only field group for it is the repeater that I mentioned earlier.

    In order to insert a gallery in the middle of a blog post, my plan is to have a shortcode that injects one post (the custom Gallery Post ) into another.

    I just trie ddoing this using this plugin: https://wordpress.org/plugins/post-content-shortcodes/

    But it only seems to work for injecting The Content (from the WYSIWYG editor) and won’t pull in anything else from the php loop etc.

    Any way of doing that? Or am I going to make my own shortcode etc using the codex?

  • I contacted support and was able to resolve the issue. What I needed to reference was the api-value.php file starting from line 293 in the plugin folder. This pointed me to how I can target the specific field name to make the footnotes work. Updated code (changes in bold):

    add_filter(‘acf/format_value/name=publication_content‘, ‘format_value_wysiwyg’, 10, 3);

    function format_value_wysiwyg( $value, $post_id, $field )
    {
    $value = apply_filters( ‘the_content’, $value );
    return $value;
    }

  • Hey @dadra

    I encountered a similar issue, and was researching forums to see if anyone found a solution and found this post. I’m using the Easy Footnotes plugin. I implemented @jolora solution, but the footnotes are also repeating in all the ACF WYSIWYG fields on the same post. Did you happen to find a solution to this issue? Thanks!

Viewing 25 results - 476 through 500 (of 1,298 total)
1 2 3 … 19 20 21 … 50 51 52