Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Repeatable and sortable TinyMCE fields for WP Alchemy class
<?php while($mb->have_fields_and_multi('GROUP-NAME')): ?>
<?php $mb->the_group_open(); ?>
<p class="update-warning">Remember, you must save the page for the sort order to take effect.</p>
<?php $metabox->the_field('CONTENT-FIELD'); ?>
<label for="<?php $metabox->the_name(); ?>">FIELD LABEL</label>
<div class="customEditor">
<textarea rows="10" cols="50" name="<?php $mb->the_name(); ?>" id="<?php $mb->the_name(); ?>"><?php $mb->the_value(); ?></textarea>
<a href="#" class="dodelete button">Remove</a>
<?php $mb->the_group_close(); ?>
<?php endwhile; ?>
/*global tinyMCE */
jQuery(document).ready(function($) {
* Meta: TinyMCE
function RunTinyMCE() {
var i = 1;
$(' .customEditor textarea').each(function(e) {
var id = $(this).attr('id');
if (!id) {
id = 'customEditor-' + i++;
$(this).attr('id', id);
} //Apply TinyMCE to everyone except the one to copy
tinyMCE.execCommand('mceAddControl', false, id);
RunTinyMCE(); //run onload
$.wpalchemy.bind('wpa_copy', function(the_clone) { //run when copy is made
* Meta: Fields Sorting
var textareaID;
cancel: ':input,button,.customEditor', // exclude TinyMCE area from the sort handle
axis: 'y',
opacity: 0.5,
tolerance: 'pointer',
change: function() { // show update-required notice when sort is made
start: function(event, ui) { // turn TinyMCE off while sorting (if not, it won't work when resorted)
textareaID = $(ui.item).find('.customEditor textarea').attr('id');
tinyMCE.execCommand('mceRemoveControl', false, textareaID);
stop: function(event, ui) { // re-initialize TinyMCE when sort is completed
tinyMCE.execCommand('mceAddControl', false, textareaID);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment