New to the community? Start here

How to add TinyMCE to a textarea created in CustomPress

In response to a request on this post here is a plugin I created to add TinyMCE to a textarea created in CustomPress:

I have pasted the whole code below. To make it work, simply paste in the field ID in place of my field ID "_ct_textarea_4fd2000002023". You can also add as many as you want to the code.

How does it work? I use jquery to find the textarea to then add the class "theEditor", the extra javascript then does the TinyMCE magic. Thats pretty much it. I am sure with a bit of coding someone could wrap an admin panel around this allowing you to add multiple fields from within the admin.

Be sure to check out the screenshots... and yes I am a bit proud right now.

<?php
/*
Plugin Name: TinyMCE to textbox
Description: Adds TinyMCE to a named textbox
Version: 1.0
Author: Lee Jackson
Author Site: http://www.elliottyoung.co.uk

*/

// Main resource - http://allcreatives.net/2011/02/02/using-the-native-wordpress-tinymce-wysiwyg-editor-with-your-custom-post-meta-textareas/

function tinymce_to_named_textarea() {
    ?>

<script type=&quot;text/javascript&quot;>
                /* <![CDATA[ */
 		jQuery('#_ct_textarea_4fd2000002023').addClass('theEditor')
                jQuery(document).ready( function () {
                    if ( typeof( tinyMCE ) == &quot;object&quot; && typeof( tinyMCE.execCommand ) == &quot;function&quot; ) {

                        tinyMCE.execCommand(&quot;mceAddControl&quot;, true, &quot;_ct_textarea_4fd20000402023&quot;);

                    }
                });

                /* ]]> */
        </script>

<?php
}
// Add hook for admin <head></head>
add_action('admin_head', 'tinymce_to_named_textarea');

?>

  • aecnu
    • WP Unicorn

    Greetings leejacksondev,

    Thank you for your coding contribution to the WPMU Dev Community!

    It is certainly appreciated.

    I will go ahead and see if I can get the lead developer in here with his invaluable insight into this plugin for his advice/advise/opinion of your submitted coding for us.

    Though this may take a bit longer then a normal ticket, I will try to get him in here asap for his eyeball on the coding and his opinion thereof.

    Cheers, Joe

  • glennyboy
    • Design Lord, Child of Thor

    Hi Guys

    I found this plugin very useful, but I wanted to add it to my own Custom Post Div / a Pagelines 'Content Box' and I also wanted to show the 'visual' and 'html' tabs. Here is my updated code:-'

    <?php
/*
Plugin Name: TinyMCE to Content Box
Description: Adds TinyMCE to Content Box
*/
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');
}
}

// 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;
}

.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');
?>

    Obviously substiitute your Div ID.

    Right now it doesn't include 'Add Media' so if anyone would like to extend that would be great.

    Cheers
    Glennyboy

  • glennyboy
    • Design Lord, Child of Thor

    some sort of workaround to the above. add the following at line 46:-

    // 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');
		}
	}
	});

    It will add the media to the nearest TinyMCE

  • drift2
    • Design Lord, Child of Thor

    Here is an easy fix:
    http://www.robbluther.com/tutorials/wordpress/custompress-adding-tinymce-editor-to-your-textarea-box/286

    Here is the post:

    The issue, I knew was in the content-types.php file. This is the case you should look for at about line 1442:

    case 'textarea': {
    $result = sprintf('<textarea class="ct-field ct-textarea" name="%s" id="%s" rows="5" cols="40" >%s</textarea>', $id, $id, esc_textarea( get_post_meta( $post->ID, $id, true ) ) );

    break;
    }
    Here is the updated php:

    case 'textarea': {
    //$result = sprintf('<textarea class="ct-field ct-textarea" name="%s" id="%s" rows="5" cols="40" >%s</textarea>', $id, $id, esc_textarea( get_post_meta( $post->ID, $id, true ) ) );
    $result=wp_editor(get_post_meta( $post->ID, $id, true ), $id, $settings = array() );
    break;
    }
    Now, came the styling issues on the page. The above would not process the post styles, so we were left with a raw dump of data. I wanted all the paragraphs and line breaks included. So we needed to apply_filters. On the template page where I was calling the custom filed type. Here is the final call:

    <?php echo apply_filters('the_content', $post->_ct_textarea_518a822446ca0); ?>
    And that’s all there is to it.

  • glennyboy
    • Design Lord, Child of Thor

    Here is the current code for CustomPress plugin:-

    <?php
/*
Plugin Name: TinyMCE to CustomPress Meta
Description: Adds TinyMCE to Custom Press Meta
Version: 1.0
Author: Slick Media
*/
function tinymce_to_custompress() {
?>
<script type="text/javascript">
/* <![CDATA[ */
jQuery('#your_custom_meta_id').addClass('theEditor')
jQuery(document).ready( function () {
if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function"
) {
tinyMCE.execCommand("mceAddControl", true, "your_custom_meta_id");

// Insert the tabs
jQuery('<div class="tinymce-tabs"> <a class="html your_custom_meta_id">HTML</a> <a class="visual your_custom_meta_id" class="active">Visual</a> <div style="clear: both;"></div></div>').insertBefore('#your_custom_meta_id');
}
// 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( '#your_custom_meta_id' )
				.siblings( '#your_custom_meta_id_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 your_custom_meta_id_visual = '.tinymce-tabs .visual.your_custom_meta_id';
var your_custom_meta_id_html = '.tinymce-tabs .html.your_custom_meta_id';

// Enforce initial active selection
jQuery(your_custom_meta_id_visual).addClass('active');
jQuery(your_custom_meta_id_html).removeClass('active');

// Activate the visual tab
jQuery(your_custom_meta_id_visual).click(function() {
 activateTinyMCETab('visual', your_custom_meta_id_visual, your_custom_meta_id_html, 'your_custom_meta_id');
});

// Activate the html tab
jQuery(your_custom_meta_id_html).click(function() {
activateTinyMCETab('html', your_custom_meta_id_visual, your_custom_meta_id_html, 'your_custom_meta_id');
});

});
/* ]]> */
</script>
<style type="text/css">
#your_custom_meta_id_ifr {
	background-color: #ffffff;
}
#your_custom_meta_id_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_custompress');
?>

    As above please just add in this functionality directly to the meta values in the code. It should be really easy for latest versions of Wordpress!

  • Mike
    • Flash Drive

    This is exactly what I was hoping to find today, but I am a little confused with the versions in this thread where to put the code.

    in the last post by @glennyboy - he gives a detailed plugin, but it isn't clear to me if that should be a free-standing file inserted into the plugin or if it should be inserted into the content-types.php.

    In the post by @drift2 - with the addition of the code by @glennyboy - is this code still valid or what should be added to include the plugin code?

    It would be great if this functionality was native in the plugin, but since it isn't, I do want to add it for a current project. I'm just confused as to how after reading the threads here.

    Mike

  • glennyboy
    • Design Lord, Child of Thor

    Hi Mike

    Create a folder under plugins and call it whatever - add the code as a php file and again call it whatever i.e. 'add-tinymce-custompress.php'. This will then work as any other plugin and you can activate it - thus adding in the field's specified.

    I think Lee above will agree that this is a major Hack and as such I can't really recommend it moving forward. I've been pushing wpmudev for months to upgrade this plugin - it's much, much easier for the developer(s) here to add TinyMCE directly to the plugin rather than having to build in the functionality with a plugin 2 plugin. Right now the plugin is seriously flagging behind other Custom Post creation plugins and this needs attention.

    Best

    Glennyboy

  • Alexander
    • DEV MAN’s Mascot

    @Mike, I'd go for the solution proposed by @drift2 above.

    https://premium.wpmudev.org/forums/topic/how-to-add-tinymce-to-a-textarea-created-in-custompress#post-442775

    It uses wp_editor which will load tinyMCE for you by default. It's one line of code that needs to be changed.

    Disadvantages would be that you'd need to redo this change when you update the plugin.

    The solution by @glennyboy would prevent the need to change CustomPress, but I fear you're at the risk for needing to fix things if Wordpress releases an update with changes to their tinyMCE styling of javascript. This is even more likely now, as much more of the dashboard is being transitioned to Javascript code vs PHP. Using wp_editor is a safe bet because you're just interacting with the WP API, and any changes from Wordpress would be made for you.

    @glennyboy, We definitely hear your concern about the plugin. This is something we're aware of and you're not the only one to bring it up. I can't give ETAs or make any promises, but I can assure you that many of our plugins are under going usability updates and improvements.

    Best regards,

  • Vinod Dalvi
    • WP Unicorn

    Hi @BePresence,

    It's not yet added in the plugin as members are using the custom code to achieve it and so we didn't get enough feature requests for it.

    I will move this over to the features & feedback section. This way it can be considered for future development, and we can also see what other community members think about the feature request.

    If for somehow the the above shared code doesn't work for you then you can use the following modified code to achieve it.

    function tinymce_to_named_textarea() {
    ?>

<script type="text/javascript">
                /* <![CDATA[ */
                jQuery(document).ready( function () {
                	jQuery('#_ct_About_Me_textarea_ca57').addClass('mceEditor');
                    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
						tinyMCE.init({
						    mode : "specific_textareas",
						        editor_selector : "mceEditor",
						        editor_deselector : "mceNoEditor"
						    });
                    }
                });

                /* ]]> */
        </script>

<?php
}
// Add hook for admin <head></head>
add_action('admin_head', 'tinymce_to_named_textarea');

    Cheers,
    Vinod Dalvi

  • Tony G
    • Mr. LetsFixTheWorld

    Adding a +1 here, I came to the forum today looking for exactly this functionality. Was kinda surprised not to find a rich text option in the selection of field types. I'll use a plain text area now and swing back around to this thread later.

    Thanks to all who have contributed.

  • leejacksondev
    • Site Builder, Child of Zeus

    Advanced Custom Fields or Pods are my tools of choice to be honest now a days. They are much more flexible. CustomPress needs a lot of work, but its better they concentrate on their other product.

    Disclaimer: Just my opinion, I am still in love with WPMU :slight_smile:

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.