0

I'm creating a custom content management system with a rich text editor. I'm using tiny MCE but I'm failing to fit the text area in my content div. I have a <div></div> that is 680px. I want Tiny MCE to fit into the <div></div> properly. However it keeps on overflowing. How can I set the textarea to fit on a width of 680px? Thaks. A sample of my code is down below

<?php
require 'janta_class.php';
$jantaObj = new janta_class();
if (!isset($_GET['pgid']) || empty($_GET['pgid'])) {
    $page_id = 1;
} else {
    $page_id = $_GET['pgid'];
}
if (isset($page_id) && !empty($page_id)) {
    $allowedTags = '<p><strong><em><u><h1><h2><h3><h4><h5><h6><img>';
    $allowedTags.='<li><ol><ul><span><div><br><ins><del>';

    //you might want to escape some literals here
    $page_data = $jantaObj->get_page($page_id);
    $page_content = $page_data['page_content'];
    $page_title = $page_data['page_title'];

    $page_content = strip_tags(stripslashes($page_content), $allowedTags);
}
?>

<!-- TinyMCE -->
<script type="text/javascript" src="./editor/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        mode: "exact",
        elements : "rteditor",
        plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        },  
        height:"350px",
        width:"600px"
    });

</script>

<?php //echo $sHeader;   ?>
<form method="post" action="">
    <textarea id="rteditor" name="rteditor" rows="15" cols="80"><?php echo $page_content; ?></textarea>
    <br />
    <input type="submit" name="save" value="Submit" />
    <input type="reset" name="reset" value="Reset" />
</form>
1

2 Answers 2

0

Do not use width with double quotes nor single quotes.

I have got the solution.

Put it like:

width: 300,

and it should work for you. I have tested it with my code.

0

Solution is to set the width in the tinymce initfunction. Be aware that you place integers there and don't use 'px':

    width:"680"
1
  • can you create a tinymce fiddle for this or otherwise provide a page with an example??
    – Thariama
    Aug 24, 2012 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.