admin管理员组

文章数量:1125914

I have tried to validate the post content that must not be empty. Here are my codes:

      // HTML codes for Classic Editor in HTML mode:
      <textarea placeholder="Describe Ads here" class="wp-editor-area" style="height: 369px; margin-top: 36.8px;" autocomplete="off" cols="40" name="content" id="content" aria-hidden="false">Some content go here</textarea>

      // HTML codes for Classic Editor in Visual mode:
      <body id="tinymce" class="mce-content-body content post-type-gem-item post-status-publish page-template-default locale-en-us mceContentBody wp-editor wp-autoresize html5-captions" data-id="content" contenteditable="true" style="overflow-y: hidden;"><p>Content goes here</p></body>


      // jQuery:  
      
      jQuery('#content').prop('required', true);    // works for HTML mode of Classic Editor
      
      jQuery('#tinymce').prop('required', true);    // does not work for Visual mode of Classic Editor

Any help is very appreciated.

I have tried to validate the post content that must not be empty. Here are my codes:

      // HTML codes for Classic Editor in HTML mode:
      <textarea placeholder="Describe Ads here" class="wp-editor-area" style="height: 369px; margin-top: 36.8px;" autocomplete="off" cols="40" name="content" id="content" aria-hidden="false">Some content go here</textarea>

      // HTML codes for Classic Editor in Visual mode:
      <body id="tinymce" class="mce-content-body content post-type-gem-item post-status-publish page-template-default locale-en-us mceContentBody wp-editor wp-autoresize html5-captions" data-id="content" contenteditable="true" style="overflow-y: hidden;"><p>Content goes here</p></body>


      // jQuery:  
      
      jQuery('#content').prop('required', true);    // works for HTML mode of Classic Editor
      
      jQuery('#tinymce').prop('required', true);    // does not work for Visual mode of Classic Editor

Any help is very appreciated.

  • jquery
  • editor
Share Improve this question asked Jan 26, 2024 at 13:47 daro2013daro2013 251 silver badge6 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

It looks like you're trying to validate the content of a WordPress Classic Editor, ensuring it's not empty, both in HTML and Visual modes. The issue arises with the Visual mode which is powered by TinyMCE. Unlike standard HTML form elements, TinyMCE's content isn't directly linked with its underlying textarea element in a way that the required attribute would work as expected.

To achieve validation for both modes, you should intercept the form submission process and manually check the content of the TinyMCE editor. Here's an approach you can take:

Bind to the Form Submission Event: Attach an event handler to the form's submission event.

Check Content for Both Modes: In the event handler, retrieve the content from the Classic Editor in both HTML and Visual modes. If the editor is in Visual mode, you'll need to get the content from the TinyMCE instance.

Prevent Form Submission if Content is Empty: If the content is empty, prevent the form from being submitted and alert the user.

Here's a jQuery script that demonstrates this approach:

jQuery(document).ready(function($) {
    // Assuming your form has an ID of 'post'
    $('#post').submit(function(e) {
        var content = '';

        // Check if Classic Editor is in Visual mode
        if(tinymce.get('content') && !tinymce.get('content').hidden) {
            content = tinymce.get('content').getContent();
        } else {
            // Classic Editor in HTML mode
            content = $('#content').val();
        }

        // Check if content is empty
        if(content.trim() === '') {
            e.preventDefault(); // Prevent form submission
            alert('The content must not be empty.');
        }
    });
});

This script should work in both modes of the Classic Editor. It's important to note that if your form has a different ID or if there are multiple forms, you might need to adjust the selector accordingly. Also, make sure that TinyMCE is loaded before this script runs, as it relies on the TinyMCE API to get the content in Visual mode.

本文标签： How to make WP Classic Editor required in jQuery

版权声明：本文标题：How to make WP Classic Editor required in jQuery 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736675623a1947166.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。