Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more rich text formatting options in the job submission editor #2076

Open
dericleeyy opened this issue Nov 27, 2020 · 12 comments
Open

Add more rich text formatting options in the job submission editor #2076

dericleeyy opened this issue Nov 27, 2020 · 12 comments
Labels
Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". [Type] Enhancement

Comments

@dericleeyy
Copy link

Is your feature request related to a problem? Please describe

Currently, the job submission form has a very limited WYSIWG editor for the job description.

Describe the solution you'd like

Extend the capability of this editor by adding more formatting options like headings.

Describe alternatives you've considered

Support HTML code formatting in the editor.

Additional context

3523513-zen

@Hastibe
Copy link

Hastibe commented Dec 31, 2020

@dericleeyy -- in case it is helpful, I am using the following code in my functions.php file of my child theme (if you aren't using a child theme or prefer using a plugin, use the Code Snippets plugin) to expand formatting options and allow pasting in of limited rich text (use at your own risk, as I am not an expert!):

// Add underline and outdent/indent option to TinyMCE fields
add_filter( 'submit_job_form_wp_editor_args', 'customize_editor_toolbar' );
function customize_editor_toolbar( $args ) {
	$args['tinymce']['toolbar1'] = 'bold,italic,underline,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,undo,redo';
	return $args;
}

// Enable rich text to be pasted into TinyMCE fields

 add_filter( 'submit_job_form_wp_editor_args', function( $args ) {
        // Comment these lines to ENABLE the feature
	// unset( $args['tinymce']['paste_auto_cleanup_on_paste'] ); // I would keep this enabled
	 unset( $args['tinymce']['paste_as_text'] );
	// unset( $args['tinymce']['paste_remove_spans'] );
	// unset( $args['tinymce']['paste_remove_styles'] );
	// unset( $args['tinymce']['paste_remove_styles_if_webkit'] );
	// unset( $args['tinymce']['paste_strip_class_attributes'] );
	return $args;
} );

// Remove, strip, and replace tags when content is pasted into TinyMCE

add_filter('tiny_mce_before_init', 'customize_tinymce');
 
function customize_tinymce($in) {
  $in['paste_preprocess'] = "function(pl,o){ 
  // remove the following tags completely:
    o.content = o.content.replace(/<\/*(applet|area|article|aside|audio|base|basefont|bdi|bdo|body|button|canvas|command|datalist|details|embed|figcaption|figure|font|footer|frame|frameset|head|header|hgroup|hr|html|iframe|img|keygen|link|map|mark|menu|meta|meter|nav|noframes|noscript|object|optgroup|output|param|progress|rp|rt|ruby|script|section|source|span|style|summary|time|title|track|video|wbr|table|tbody|tr|td|th|h1|h2|h3|h4|h5|h6|hr|big|code|font|blockquote|dir|address|cite|del|dfn|ins|kbd|q|samp|small|strike|sub|sup|tt|var|caption|input|dialog|fieldset|pre|a name)[^>]*>/gi,'');
  // remove all attributes from these tags:
    o.content = o.content.replace(/<(div|p|b|strong|i|em|ul|li|dt|dd|dl|u|s) [^>]*>/gi,'<$1>');
    
  // keep only href in the a tag (needs to be refined to also keep _target and ID):
     o.content = o.content.replace(/<a [^>]*href=(\"|')(.*?)(\"|')[^>]*>/gi,'<a href=\"$2\">');
  // replace br tag with p tag:
    if (o.content.match(/<br[\/\s]*>/gi)) {
      o.content = o.content.replace(/<br[\s\/]*>/gi,'</p><p>');
    }
  // replace div tag with p tag, b tag with strong tag, and i tag with em tag:
    o.content = o.content.replace(/<(\/)*div[^>]*>/gi,'<$1p>');
    o.content = o.content.replace(/<(\/)*b[^>]*>/gi,'<$1strong>');
    o.content = o.content.replace(/<(\/)*i[^>]*>/gi,'<$1em>');
  
  // remove double paragraphs:
    o.content = o.content.replace(/<\/p>[\s\\r\\n]+<\/p>/gi,'</p></p>');
    o.content = o.content.replace(/<\<p>[\s\\r\\n]+<p>/gi,'<p><p>');
    o.content = o.content.replace(/<\/p>[\s\\r\\n]+<\/p>/gi,'</p></p>');
    o.content = o.content.replace(/<\<p>[\s\\r\\n]+<p>/gi,'<p><p>');
    o.content = o.content.replace(/(<\/p>)+/gi,'</p>');
    o.content = o.content.replace(/(<p>)+/gi,'<p>');
  }";
  return $in;
}

The last part of the code (after the "Remove, strip, and replace tags when content is pasted into TinyMCE" comment) is pulled mostly from here.

UPDATE: code has been working well for me on a busy job board over the past couple years!

@cena
Copy link

cena commented Mar 3, 2022

4824532-zen

specifically want to add more rich text fields like the ‘Description’ field

@bizanimesh
Copy link

bizanimesh commented Aug 23, 2022

@bobmatyas
Copy link
Contributor

Request for the ability to copy and paste from existing job descriptions while retaining formatting.

https://wordpress.org/support/topic/formatting-in-the-job-description-field-is-not-applied/

@github-actions
Copy link

github-actions bot commented Sep 13, 2022

Support References

This comment is automatically generated. Please do not edit it.

  • 3523513-zen
  • 4824532-zen
  • 5490988-zen
  • 5622416-zen
  • 7677377-zen

@bizanimesh
Copy link

5622416-zd-woothemes - rich text formatting for the application form.

@erricgunawan
Copy link

7677377-zen:

When copying and pasting a list with bullet points from Word to the description box, the bullet points change to smaller ones, even though the description box can make good-looking bullet points on its own.

@github-actions github-actions bot added the Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". label Feb 7, 2024
@edv-esgf
Copy link

edv-esgf commented Feb 7, 2024

Hello, I do have the same issue basically but I cannot manage to get the provided code working.
I use WPCode to add the code only into the page that I need it for and not to mess with functions.php

What am I doing wrong? Code is php right?
Where do I have to put it in that page?
Same issue as @erricgunawan

image

@Hastibe
Copy link

Hastibe commented Feb 7, 2024

@edv-esgf -- the code I provided above is PHP and continues to work well for me when added to functions.php, but I don't use WPCode, so I unfortunately can't help with what configuration will allow it to work through that plugin.

@edv-esgf
Copy link

edv-esgf commented Feb 8, 2024

Hello, good morning. Thank you, I'll try. Is there any position I need to put it in the functions.php or that's not important?

@Hastibe
Copy link

Hastibe commented Feb 8, 2024

@edv-esgf -- generally, not important. I would just put the code below any code that is already there. Also, note that -unless you are using a child theme- updating your theme will remove any customizations to the theme's functions.php file, so you will have to re-add this code to it after updating your theme.

@erricgunawan
Copy link

I need help getting the text editor to show other toolbar options such as inserting media. There are no custom overrides and I have tried several variations of code snippets for the functions.php file including the one I saw here with no success.

https://wordpress.org/support/topic/wysiwyg-need-help/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". [Type] Enhancement
Projects
None yet
Development

No branches or pull requests

7 participants