TinyMCE and CakePHP

Question

I am using the cakephp tinymce helper. I know I can change the themes from simple and advanced, etc. I'm wondering if it's possible to go further than that and explicitly set the different font, etc the user can choose?

So if I only wanted the user to be able to use a paragraph tag and the pre tag?

Answer 1

Hey Jonesy, I think this page explains it better than I could! http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements

And just in case you were hoping to allow the user to use some CSS tags, you can use the lines:

theme_advanced_buttons1: "styleselect, ...whatever other advanced buttons you'd like on line 1"

and

content_css: "location of stylesheet that contains the options you would like to provide"

in your init function.

Hope this helps!

Answer 2

You can also write your own Skin and apply it using the tinymce init function. For more information on howto write an own skin for tinymce look at this tutorial from moxiecode.

Answer 3

I don't use the helper (didn't know there was one). I just put the init code in an element and include that where I need it. See: http://book.cakephp.org/view/97/Elements. If you need to be able to specify different configurations, you can pass an array to the element then echo out the values into the javascript like:

    <script type="text/javascript">
        $().ready(function() {
            $('textarea').tinymce({
                // Location of TinyMCE script
                //          // General options
                theme : "advanced",
                plugins : "<?php echo $pluginsString ?>",
                ...
    </script>

This is how I do it:

<?php
echo "\n".$javascript->link('jQuery/jquery-1.3.2',false);
echo "\n".$javascript->link('tiny_mce/jquery.tinymce.js',false);
echo "\n".$javascript->link('tiny_mce/tiny_mce.js',false);
?>
<script type="text/javascript">


    $().ready(function() {
        $('textarea').tinymce({
            // Location of TinyMCE script
            //          // General options
            theme : "advanced",
            plugins : "safari,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",

            // Theme options
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,fontselect,fontsizeselect,|,image,link,unlink,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,|,pastetext,pasteword,|,fullscreen",
            theme_advanced_buttons2 : "bullist,numlist,|,blockquote,|,anchor,cleanup,code,|,forecolor,backcolor,|,tablecontrols",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,
            relative_urls : false,
            file_browser_callback : "fileBrowserCallBack"



        });
    });
    function fileBrowserCallBack(field_name, url, type, win)
    {
    //var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
    var connector = "<?php echo Router::url('/js') ?>/tiny_mce/filemanager/browser.html?Connector=connectors/php/connector.php";
    var enableAutoTypeSelection = true;

    var cType;
    tinyfck_field = field_name;
    tinyfck = win;

    switch (type) {
            case "image":
                cType = "Image";
                break;
            case "flash":
                cType = "Flash";
                break;
            case "file":
                cType = "File";
                break;
    }

    if (enableAutoTypeSelection && cType) {
            connector += "&Type=" + cType;
    }

    window.open(connector, "tinyfck", "modal,width=600,height=400");
    }
</script>

That callback function is for the Fck file manager/loader plugin for Tiny: http://freshmeat.net/projects/tinyfck/