Add TinyMCE to Pagelines Content Box Section

Glenn Glenn's Blog 2 Comments

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
Add TinyMCE to Pagelines Content Box Section Add TinyMCE to Pagelines Content Box Section 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Comments 2

    1. Post
      Author

      Hi Amar
      This plugin did work as a ‘hack’ on Pagelines Framework with the correct IDs on line 642, but it’s not supported as Pagelines has now moved on to DMS. DMS is a great Framework that has completely dropped The Pagelines Content Box in favour of the ‘TextBox’. I recommend that you head over to Pagelines and get your free copy of DMS and migrate to this vastly superior and supported system.
      Best Regards
      Glenn

Leave a Reply

Your email address will not be published. Required fields are marked *