Add more rich text formatting options in the job submission editor

[dericleeyy]

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]

@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]

4824532-zen

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

[bizanimesh]

• 5490988-zd-woothemes
• https://wordpress.org/support/topic/job-location

[bobmatyas]

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[bot]]

Support References

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

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

[bizanimesh]

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

[erricgunawan]

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.

[edv-esgf]

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

[Hastibe]

@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]

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]

@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]

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/