I am using wp_editor. I added require class as editor_class. Here is the rendered html:
<fieldset class="frontier_post_fieldset">
<legend>বিস্তারিত</legend>
<div id="frontierpost" class="input-group require" data-require-min="1">
<div id="wp-frontier_post_content-wrap" class="wp-core-ui wp-editor-wrap tmce-active">
<link rel="stylesheet" id="editor-buttons-css" href="http://localjegeachi.com/wp-includes/css/editor.min.css?ver=4.9.4" type="text/css" media="all">
<div id="wp-frontier_post_content-editor-tools" class="wp-editor-tools hide-if-no-js">
<div id="wp-frontier_post_content-media-buttons" class="wp-media-buttons">
<button type="button" id="insert-media-button" class="button insert-media add_media" data-editor="frontier_post_content">
<span class="wp-media-buttons-icon"></span> Add Media
</button>
</div>
<div class="wp-editor-tabs">
<button type="button" id="frontier_post_content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="frontier_post_content">Visual</button>
<button type="button" id="frontier_post_content-html" class="wp-switch-editor switch-html" data-wp-editor-id="frontier_post_content">Text</button>
</div>
</div>
<div id="wp-frontier_post_content-editor-container" class="wp-editor-container form-group">
<div id="qt_frontier_post_content_toolbar" class="quicktags-toolbar">
<input type="button" id="qt_frontier_post_content_strong" class="ed_button button button-small" aria-label="Bold" value="b">
<input type="button" id="qt_frontier_post_content_em" class="ed_button button button-small" aria-label="Italic" value="i">
<input type="button" id="qt_frontier_post_content_link" class="ed_button button button-small" aria-label="Insert link" value="link">
<input type="button" id="qt_frontier_post_content_block" class="ed_button button button-small" aria-label="Blockquote" value="b-quote">
<input type="button" id="qt_frontier_post_content_del" class="ed_button button button-small" aria-label="Deleted text (strikethrough)" value="del">
<input type="button" id="qt_frontier_post_content_ins" class="ed_button button button-small" aria-label="Inserted text" value="ins">
<input type="button" id="qt_frontier_post_content_img" class="ed_button button button-small" aria-label="Insert image" value="img">
<input type="button" id="qt_frontier_post_content_ul" class="ed_button button button-small" aria-label="Bulleted list" value="ul">
<input type="button" id="qt_frontier_post_content_ol" class="ed_button button button-small" aria-label="Numbered list" value="ol">
<input type="button" id="qt_frontier_post_content_li" class="ed_button button button-small" aria-label="List item" value="li">
<input type="button" id="qt_frontier_post_content_code" class="ed_button button button-small" aria-label="Code" value="code">
<input type="button" id="qt_frontier_post_content_more" class="ed_button button button-small" aria-label="Insert Read More tag" value="more">
<input type="button" id="qt_frontier_post_content_close" class="ed_button button button-small" title="Close all open tags" value="close tags">
</div>
<div id="mceu_24" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px; width: 100%;">
<div id="mceu_24-body" class="mce-container-body mce-stack-layout">
<div id="mceu_25" class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item mce-first" hidefocus="1" tabindex="-1" role="group">
<div id="mceu_25-body" class="mce-container-body mce-stack-layout">
<div id="mceu_26" class="mce-container mce-toolbar mce-stack-layout-item mce-first" role="toolbar">
<div id="mceu_26-body" class="mce-container-body mce-flow-layout">
<div id="mceu_27" class="mce-container mce-flow-layout-item mce-first mce-last mce-btn-group" role="group">
<div id="mceu_27-body">
<div id="mceu_0" class="mce-widget mce-btn mce-menubtn mce-fixed-width mce-listbox mce-first mce-btn-has-text" tabindex="-1" aria-labelledby="mceu_0" role="button" aria-haspopup="true">
<button id="mceu_0-open" role="presentation" type="button" tabindex="-1">
<span class="mce-txt">Paragraph</span>
<i class="mce-caret"></i>
</button>
</div>
<div id="mceu_1" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Bold">
<button id="mceu_1-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-bold"></i>
</button>
</div>
<div id="mceu_2" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Italic">
<button id="mceu_2-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-italic"></i>
</button>
</div>
<div id="mceu_3" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Bulleted list">
<button id="mceu_3-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-bullist"></i>
</button>
</div>
<div id="mceu_4" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Numbered list">
<button id="mceu_4-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-numlist"></i>
</button>
</div>
<div id="mceu_5" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Blockquote">
<button id="mceu_5-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-blockquote"></i>
</button>
</div>
<div id="mceu_6" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Align left">
<button id="mceu_6-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-alignleft"></i>
</button>
</div>
<div id="mceu_7" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Align center">
<button id="mceu_7-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-aligncenter"></i>
</button>
</div>
<div id="mceu_8" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Align right">
<button id="mceu_8-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-alignright"></i>
</button>
</div>
<div id="mceu_9" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Insert/edit link">
<button id="mceu_9-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-link"></i>
</button>
</div>
<div id="mceu_10" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Insert Read More tag">
<button id="mceu_10-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-wp_more"></i>
</button>
</div>
<div id="mceu_11" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Fullscreen">
<button id="mceu_11-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-fullscreen"></i>
</button>
</div>
<div id="mceu_12" class="mce-widget mce-btn mce-last" tabindex="-1" role="button" aria-label="Toolbar Toggle">
<button id="mceu_12-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-wp_adv"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="mceu_28" class="mce-container mce-toolbar mce-stack-layout-item mce-last" role="toolbar" style="display: none;">
<div id="mceu_28-body" class="mce-container-body mce-flow-layout">
<div id="mceu_29" class="mce-container mce-flow-layout-item mce-first mce-last mce-btn-group" role="group">
<div id="mceu_29-body">
<div id="mceu_13" class="mce-widget mce-btn mce-first" tabindex="-1" role="button" aria-label="Strikethrough">
<button id="mceu_13-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-strikethrough"></i>
</button>
</div>
<div id="mceu_14" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Horizontal line">
<button id="mceu_14-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-hr"></i>
</button>
</div>
<div id="mceu_15" class="mce-widget mce-btn mce-colorbutton" role="button" tabindex="-1" aria-haspopup="true" aria-label="Text color">
<button role="presentation" hidefocus="1" type="button" tabindex="-1">
<i class="mce-ico mce-i-forecolor"></i>
<span id="mceu_15-preview" class="mce-preview"></span>
</button>
<button type="button" class="mce-open" hidefocus="1" tabindex="-1">
<i class="mce-caret"></i>
</button>
</div>
<div id="mceu_16" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Paste as text">
<button id="mceu_16-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-pastetext"></i>
</button>
</div>
<div id="mceu_17" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Clear formatting">
<button id="mceu_17-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-removeformat"></i>
</button>
</div>
<div id="mceu_18" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Special character">
<button id="mceu_18-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-charmap"></i>
</button>
</div>
<div id="mceu_19" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Decrease indent">
<button id="mceu_19-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-outdent"></i>
</button>
</div>
<div id="mceu_20" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Increase indent">
<button id="mceu_20-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-indent"></i>
</button>
</div>
<div id="mceu_21" class="mce-widget mce-btn" tabindex="-1" role="button" aria-label="Undo" aria-disabled="false">
<button id="mceu_21-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-undo"></i>
</button>
</div>
<div id="mceu_22" class="mce-widget mce-btn mce-disabled" tabindex="-1" role="button" aria-label="Redo" aria-disabled="true">
<button id="mceu_22-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-redo"></i>
</button>
</div>
<div id="mceu_23" class="mce-widget mce-btn mce-last" tabindex="-1" role="button" aria-label="Keyboard Shortcuts">
<button id="mceu_23-button" role="presentation" type="button" tabindex="-1">
<i class="mce-ico mce-i-wp_help"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mceu_30" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
<iframe id="frontier_post_content_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press Alt-Shift-H for help." style="width: 100%; height: 300px; display: block;"></iframe>
</div>
<div id="mceu_31" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
<div id="mceu_31-body" class="mce-container-body mce-flow-layout">
<div id="mceu_32" class="mce-path mce-flow-layout-item mce-first">
<div role="button" class="mce-path-item mce-last" data-index="0" tabindex="-1" id="mceu_32-0" aria-level="1">p</div>
</div>
<span id="mceu_55" class="mce-wordcount mce-widget mce-label mce-flow-layout-item">Words: 1</span>
<div id="mceu_33" class="mce-flow-layout-item mce-resizehandle mce-last">
<i class="mce-ico mce-i-resize"></i>
</div>
</div>
</div>
</div>
</div>
<textarea class="require wp-editor-area form-control" style="height: 300px; display: none;" autocomplete="off" cols="40" name="frontier_post_content" id="frontier_post_content" aria-hidden="true"></textarea>
</div>
</div>
<script type="text/javascript">
function hestiaEditorInlineStyle( ed ) {
ed.onInit.add( function() {
// Added custom CSS in editor.
tinyMCE.activeEditor.dom.addStyle("body.mce-content-body a { color: #e91e63; }");
} );
};
</script>
</div>
</fieldset>
I want to read content of the textarea input having require class as follows:
$('.submit_btn').click(function(event){
$('.require').each(function(){
THIS = $(this); // THIS - global variable. if THIS is followed by 'var' it willl be local here
console.log('value : '+THIS.val());
validate();
});
submitORnot(event);
});
But it does not work. Is there any other approach to read the content?
