Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Include tiny_mce in a textarea in a non member page WordPress

  • SOLVED

My question is how call tiny_mce in a textarea in a page for <blockquote>no registred</blockquote> user like this [[LINK href="http://tribioon.com/tinymce/"]]http://tribioon.com/tinymce/[[/LINK]]

Answers (2)

2011-04-08

Christianto answers:

well it not simple to make it like default wp editor,
first you have to include required script to page, place this on function.php

function prepare_TinyMCE() {
require_once(ABSPATH.'wp-admin/includes/admin.php');
wp_enqueue_script('common');
wp_enqueue_script('jquery-color');
wp_print_scripts('editor');
wp_print_scripts('media-upload');
wp_enqueue_script('utils');
wp_enqueue_script('thickbox');
if (function_exists('wp_tiny_mce')) wp_tiny_mce();
do_action("admin_print_styles-post-php");
do_action('admin_print_styles');
wp_admin_css();
wp_enqueue_style( 'thickbox' );
}
add_filter('wp_head','prepare_TinyMCE');


and call tinyMCE editor with built in wordpress the_editor('') function, notice the quote this is required for $content parameter.

For other parameter, below is the_editor function you can see it on wp-includes/general-template.php line 1771

/**
* Display visual editor forms: TinyMCE, or HTML, or both.
*
* The amount of rows the text area will have for the content has to be between
* 3 and 100 or will default at 12. There is only one option used for all users,
* named 'default_post_edit_rows'.
*
* If the user can not use the rich editor (TinyMCE), then the switch button
* will not be displayed.
*
* @since 2.1.0
*
* @param string $content Textarea content.
* @param string $id Optional, default is 'content'. HTML ID attribute value.
* @param string $prev_id Optional, default is 'title'. HTML ID name for switching back and forth between visual editors.
* @param bool $media_buttons Optional, default is true. Whether to display media buttons.
* @param int $tab_index Optional, default is 2. Tabindex for textarea element.
*/
function the_editor($content, $id = 'content', $prev_id = 'title', $media_buttons = true, $tab_index = 2) {
$rows = get_option('default_post_edit_rows');
if (($rows < 3) || ($rows > 100))
$rows = 12;

if ( !current_user_can( 'upload_files' ) )
$media_buttons = false;

$richedit = user_can_richedit();
$class = '';

if ( $richedit || $media_buttons ) { ?>
<div id="editor-toolbar">
<?php
if ( $richedit ) {
$wp_default_editor = wp_default_editor(); ?>
<div class="zerosize"><input accesskey="e" type="button" onclick="switchEditors.go('<?php echo $id; ?>')" /></div>
<?php if ( 'html' == $wp_default_editor ) {
add_filter('the_editor_content', 'wp_htmledit_pre'); ?>
<a id="edButtonHTML" class="active hide-if-no-js" onclick="switchEditors.go('<?php echo $id; ?>', 'html');"><?php _e('HTML'); ?></a>
<a id="edButtonPreview" class="hide-if-no-js" onclick="switchEditors.go('<?php echo $id; ?>', 'tinymce');"><?php _e('Visual'); ?></a>
<?php } else {
$class = " class='theEditor'";
add_filter('the_editor_content', 'wp_richedit_pre'); ?>
<a id="edButtonHTML" class="hide-if-no-js" onclick="switchEditors.go('<?php echo $id; ?>', 'html');"><?php _e('HTML'); ?></a>
<a id="edButtonPreview" class="active hide-if-no-js" onclick="switchEditors.go('<?php echo $id; ?>', 'tinymce');"><?php _e('Visual'); ?></a>
<?php }
}

if ( $media_buttons ) { ?>
<div id="media-buttons" class="hide-if-no-js">
<?php do_action( 'media_buttons' ); ?>
</div>
<?php
} ?>
</div>
<?php
}
?>
<div id="quicktags"><?php
wp_print_scripts( 'quicktags' ); ?>
<script type="text/javascript">edToolbar()</script>
</div>

<?php
$the_editor = apply_filters('the_editor', "<div id='editorcontainer'><textarea rows='$rows'$class cols='40' name='$id' tabindex='$tab_index' id='$id'>%s</textarea></div>\n");
$the_editor_content = apply_filters('the_editor_content', $content);

printf($the_editor, $the_editor_content);

?>
<script type="text/javascript">
edCanvas = document.getElementById('<?php echo $id; ?>');
</script>
<?php
}


Then you have to adjust css, and more important adjust image/media upload path and function (its not work outside admin), try to hard coded image/media upload path and function on the_editor to you own function like the_benjamin_editor. Not to mention security concern.

2011-04-07

MDan answers:

Maybe this is what you looking for...
<!--Call TinyMCE-->
<script type="text/javascript" src="../wp-includes/js/tinymce/tiny_mce.js"></script>

<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,link",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
mode : "textareas",
width : "266",
height : "400"
});
</script>