Change wordpress light editor to advanced
I made this script to change the light version of wordpress editor in a certain page to Advanced after user clicks the Unlock button and confirm that he want to unlock the advanced version and it will subtract 5 coins from his balance to do so, but for some reason when user clicks the Unlock button it does nothing and when user refresh the page it subtract the coins successfully but the light editor and the unlock button still shows and no advanced editor!
Here's the php code of the page that has the editor:
<?php
// At the top of your PHP file (where other scripts are enqueued)
wp_enqueue_script('jquery');
wp_enqueue_script('custom-script', plugins_url('/wp-manga-user-upload-pro/assets/custom-script.js'), array('jquery'), '1.0', true);
$current_user = get_current_user_id();
if(!$current_user) return;
$args = array(
'posts_per_page' => -1,
'orderby' => 'post_title',
'upload_chapters' => 1,
'meta_query' => array(array('key' => '_wp_manga_chapter_type',
'value' => 'text'
),array('key' => '_wp_manga_chapter_type',
'value' => 'video'
),'relation' => 'OR')
);
// is require owner?
if(isset($atts['owner']) && $atts['owner']){
$args['author'] = $current_user;
$args['post_status'] = array('publish', 'pending');
}
$mangas = madara_manga_query($args);
?>
<div id="muupro_form">
<form id="madara-user-upload-pro-form" class="madara-user-upload-pro-form" method="post">
<?php $loading_inner = '<div class="single-chart">
<svg viewBox="0 0 36 36" class="circular-chart orange">
<path class="circle-bg" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"></path>
<path class="circle" stroke-dasharray="30, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"></path>
<text x="18" y="20.35" class="percentage">30%</text>
</svg>
</div>'; ?>
<?php muupro_template( 'loading', false, compact(['loading_inner']) ); ?>
<input type="hidden" name="userID" value="<?php echo esc_attr( $current_user ); ?>">
<div class="form-group-wrapper">
<!-- Select manga -->
<div class="form-group row">
<label class="col-md-3">
<?php esc_html_e('Novel name', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<select name="manga" id="select-manga" class="form-group select2">
<?php if( $mangas->have_posts() ){ ?>
<option></option>
<?php foreach( $mangas->posts as $post ){
?>
<option value="<?php echo esc_attr( $post->ID ) ?>" <?php echo (isset($_GET['id']) && $_GET['id'] == $post->ID) ? 'selected="selected"' : '';?>>
<?php echo esc_html( $post->post_title ); ?>
<?php if( !empty( get_post_meta( $post->ID, 'pending_manga', true ) ) ){ ?>
<?php printf( __( '[Pending]', MUUPRO_TEXTDOMAIN ) ); ?>
<?php } ?>
</option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<!-- Chapter number -->
<div class="form-group row title-field">
<label class="col-md-3">
<?php esc_html_e('Chapter number', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<input class="form-control" type="text" name="chapter-number" required="required" value="" placeholder="<?php esc_attr_e( 'Chapter number here', MUUPRO_TEXTDOMAIN ); ?>">
</div>
</div>
<?php if(!isset($atts['volume']) || $atts['volume']) {?>
<!-- Chapter volume -->
<div class="form-group row title-field" id="group-select-volume">
<label class="col-md-3">
<?php esc_html_e('Chapter Volume', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<select name="chapter-volume" id="chapter-volume" class="form-group select2" value="">
<option value="0"><?php esc_html_e('-- No Volume --', MUUPRO_TEXTDOMAIN); ?></option>
</select>
<label for="chapter-create-volume">
<input type="checkbox" style="display:inline-block" name="chapter-create-volume" id="chapter-create-volume" value="1"/> <?php echo esc_html__('Create New?', MUUPRO_TEXTDOMAIN);?></label>
</div>
</div>
<div class="form-group row title-field" style="display:none" id="grp-new-volume-name">
<label class="col-md-3">
<?php esc_html_e('New Volume Name', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<input type="text" class="form-control" name="volume-name" id="chapter-new-volume"/>
</div>
</div>
<?php }?>
<?php if(!isset($atts['title']) || $atts['title']) {?>
<!-- Chapter title -->
<div class="form-group row title-field">
<label class="col-md-3">
<?php esc_html_e('Chapter title', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<input class="form-control" type="text" name="chapter-title" value="" placeholder="<?php esc_attr_e( 'Optional', MUUPRO_TEXTDOMAIN ); ?>">
</div>
</div>
<?php }?>
<?php if(isset($atts['extendname']) && $atts['extendname']) {?>
<!-- Chapter extend title -->
<div class="form-group row extendname-field">
<label class="col-md-3">
<?php esc_html_e('Chapter Extend Name', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<input class="form-control" type="text" name="chapter-extendname" value="" placeholder="<?php esc_attr_e( 'Optional', MUUPRO_TEXTDOMAIN ); ?>">
</div>
</div>
<?php } ?>
<?php if(isset($atts['seo']) && $atts['seo']) {?>
<!-- Chapter SEO -->
<div class="form-group row title-field">
<label class="col-md-3">
<?php esc_html_e('Chapter SEO Description', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<input class="form-control" type="text" name="chapter-seo" value="" placeholder="<?php esc_attr_e( 'Optional', MUUPRO_TEXTDOMAIN ); ?>">
</div>
</div>
<?php }?>
<?php if(isset($atts['warning']) && $atts['warning']) {?>
<!-- Chapter Warning Text -->
<div class="form-group row title-field">
<label class="col-md-3">
<?php esc_html_e('Chapter Warning Text', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<input class="form-control" type="text" name="chapter-warning-text" value="" placeholder="<?php esc_attr_e( 'Optional', MUUPRO_TEXTDOMAIN ); ?>">
</div>
</div>
<?php }?>
<?php do_action('muupro_upload_chapter_fields');?>
<div class="form-group row">
<label class="col-md-3">
<?php esc_html_e('Chapter Content', MUUPRO_TEXTDOMAIN); ?>
</label>
<div class="col-md-9">
<?php wp_editor('', 'chapter_content_editor', array('media_buttons' => false, 'teeny' => true));
echo '<input type="hidden" id="editor_status" value="light">';
echo '<button id="unlock_button" type="button">Unlock Advanced Editor</button>'; ?>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-3"></div>
<div class="col-md-9 submit-row">
<button type="submit"><i class="icon ion-md-cloud-upload"></i> <?php esc_html_e( 'Add Chapter', MUUPRO_TEXTDOMAIN ); ?></button>
</div>
</div>
</form>
</div>
and here's my JS code:
jQuery(document).ready(function($) {
// Function to modify editor features based on the state
function updateEditorFeatures(advanced) {
if (advanced) {
// Show advanced features
$('#chapter_content_editor').closest('.wp-editor-wrap').find('.mce-toolbar, .mce-menubar, .mce-statusbar').show();
} else {
// Hide advanced features to simulate a 'light' editor
$('#chapter_content_editor').closest('.wp-editor-wrap').find('.mce-toolbar, .mce-menubar, .mce-statusbar').hide();
}
}
// Function to execute after TinyMCE is initialized
function onTinyMCEInitialized() {
updateEditorFeatures(false); // Start with light editor configuration
$('#unlock_button').on('click', function() {
if (confirm("Unlock the advanced editor for 24 hours for 5 Coins?")) {
var currentUserId = $('input[name="userID"]').val();
$.ajax({
url: '/wp-content/plugins/wp-manga-user-upload-pro/template/shortcodes/unlock_editor.php',
type: 'POST',
data: { action: 'unlock_editor', user_id: currentUserId },
success: function(response) {
if (response === 'unlocked') {
updateEditorFeatures(true); // Switch to advanced features
$('#unlock_button').hide();
} else {
alert("Insufficient Coins or error.");
}
},
error: function(xhr, status, error) {
console.error("AJAX Error: " + status + ": " + error);
alert("An error occurred while processing your request.");
}
});
}
});
}
// Check if TinyMCE is loaded and attach the initialization event
if (typeof tinymce !== 'undefined') {
tinymce.on('init', onTinyMCEInitialized);
} else {
// If TinyMCE is not found, you might want to handle this case
}
});
and here's the PHP function to subtract the coins:
<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
error_log('Editor state before: ' . get_user_meta($current_user, 'editor_state', true));
update_user_meta($current_user, 'editor_state', 'advanced');
error_log('Editor state after: ' . get_user_meta($current_user, 'editor_state', true));
$current_user = get_current_user_id();
if (isset($_POST['action']) && $_POST['action'] == 'unlock_editor') {
$user_coins = mycred_get_users_balance($current_user);
if ($user_coins >= 5) {
mycred_subtract('unlock_editor', $current_user, 5, 'Unlocked advanced editor');
update_user_meta($current_user, 'editor_state', 'advanced');
echo 'unlocked';
} else {
echo 'insufficient';
}
exit;
}
I tried multiple methods but none of them succeeded