Pagelines is an awesome WordPress Framework that enables Drag & Drop functionality within WordPress as a CMS – we like it a lot. A great feature of Pagelines is ‘sections’ that allow you to drop in different forms of content from navigation to galleries. A section that we use a lot is the Pagelines ‘Content Box’ which is available in the Pagelines Store. The section allows you to add plain html and other content i in plain text format in the Pagelines admin sections (and therefore on the front end) and whilst that’s very useful, it’s not particularly functional. What we wanted was a way to add the resident TinyMCE editor into that plugin so that we could switch between ‘visual’ and ‘html’ modes. Here is the WordPress plugin that we have cobbled together:-
<?php
/*
Plugin Name: TinyMCE to Content Box
Description: Adds TinyMCE to Content Box
Version: 1.0
Author: Slick Media
*/
function tinymce_to_box_content() {
?>
<script type="text/javascript">
/* <![CDATA[ */
jQuery('#pagelines_content_box_content').addClass('theEditor')
jQuery(document).ready( function () {
if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function"
) {
tinyMCE.execCommand("mceAddControl", true, "pagelines_content_box_content");
// Insert the tabs
jQuery('<div class="tinymce-tabs"> <a class="html pagelines_content_box_content">HTML</a> <a class="visual pagelines_content_box_content" class="active">Visual</a> <div style="clear: both;"></div></div>').insertBefore('#pagelines_content_box_content');
}
// make them visual html
function activateTinyMCETab(selectedTab, visualTab, htmlTab, elementId) {
if (selectedTab == 'visual') {
tinyMCE.execCommand('mceAddControl', false, elementId);
jQuery(visualTab).addClass('active');
jQuery(htmlTab).removeClass('active');
}
if (selectedTab == 'html') {
tinyMCE.execCommand('mceRemoveControl', false, elementId);
jQuery(visualTab).removeClass('active');
jQuery(htmlTab).addClass('active');
}
}
// make sure the media inserts into the right content box
var activeTinyEditor = '';
jQuery( document ).ready( function(){
jQuery( '#media-buttons a' ).live( 'click', function(){
var id = jQuery( this )
.closest( '#pagelines_content_box_content' )
.siblings( '#pagelines_content_box_content_ifr')
//.children( 'textarea' )
.attr( 'id' );
activeTinyEditor = id;
});
if ( parent != self )
{
if ( typeof parent.tinyMCE != 'undefined' && parent.tinyMCE.activeEditor ) {
parent.tinyMCE.get( parent.activeTinyEditor ).focus();
parent.tinyMCE.activeEditor.windowManager.bookmark = parent.tinyMCE.activeEditor.selection.getBookmark('simple');
}
}
});
// Select the tab elements
var pagelines_content_box_content_visual = '.tinymce-tabs .visual.pagelines_content_box_content';
var pagelines_content_box_content_html = '.tinymce-tabs .html.pagelines_content_box_content';
// Enforce initial active selection
jQuery(pagelines_content_box_content_visual).addClass('active');
jQuery(pagelines_content_box_content_html).removeClass('active');
// Activate the visual tab
jQuery(pagelines_content_box_content_visual).click(function() {
activateTinyMCETab('visual', pagelines_content_box_content_visual, pagelines_content_box_content_html, 'pagelines_content_box_content');
});
// Activate the html tab
jQuery(pagelines_content_box_content_html).click(function() {
activateTinyMCETab('html', pagelines_content_box_content_visual, pagelines_content_box_content_html, 'pagelines_content_box_content');
});
});
/* ]]> */
</script>
<style type="text/css">
#pagelines_content_box_content_ifr {
background-color: #ffffff;
}
#pagelines_content_box_content_tbl[style] {
min-width: 100%;
max-width: 100%;
}
.tinymce-tabs {
height: 30px;
}
.tinymce-tabs .html, .tinymce-tabs .visual {
background-color: #f1f1f1;
border-color: #dfdfdf #dfdfdf #dfdfdf;
color: #999999;
border-style: solid;
border-width: 1px;
cursor: pointer;
float: right;
height: 18px;
margin: 5px 5px -2px 0px;
padding: 4px 5px 2px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
}
.tinymce-tabs .active {
background-color: #e9e9e9;
border-color: #cccccc #cccccc #e9e9e9;
color: #333333;
}
</style>
<?php
}
// Add hook for admin <head></head>
add_action('admin_head', 'tinymce_to_box_content');
?>
Simply install the plugin to your WordPress plugins directory and activate it to add the TinyMCE editor to Pagelines Content Box.
Add Media Options
This version doesn’t include ‘Add Media’ option directly, but you can add media by opening in full screen view.
Add TinyMCE to a Custom Post Type Textarea
With the same logic you can easily add the TinyMCE editor to any custom post type. Use a code inspector to find the ID for the original Textarea and substitute it for our original content box ID which is ‘pagelines_content_box_content’.
Credits
We definately can’t take the full plaudits for this plugin and it’s based on an original starting point by Lee Jackson posting on wpmudev (that offer great WordPress plugins):-
How tro add TinyMCE to a textarea created in CustomPress
and a very insightful article and original code by Dav Donaldson on :-
How to Add Multiple TinyMCE Editors to Your WordPress Theme or Plugin
About the Author
