TinyMCE

Category:Library::External | Category:Library::WYSIWYG

Introduction

TinyMCE is SUPER easy to put in a CI view. You just have to add the TinyMCE to your site, say in ‘scripts/tinymce’ folder. Then add a link to the file in the header of your web page, and set up the TinyMCE init (if you have special wants needs.) You may want to edit TinyMCE's config file as well to your liking.

Download

Download TinyMCE TinyMCE homepage TinyMCE Wiki

Instructions

Below I’ve put my configuration for TinyMCE. (take the + sign out of the script tags to get it to work… all this stuff goes in the HTML head.

<scri+pt src="&lt;?=base_url()?&gt;scripts/tiny_mce/tiny_mce.js" type="text/javascript">

        tinyMCE.init({
            theme : "advanced",
            mode : "textareas",
            plugins : "imagemanager,filemanager,insertdatetime,preview,emotions,visualchars,nonbreaking",
            theme_advanced_buttons1_add: 'insertimage,insertfile',
            theme_advanced_buttons2_add: 'separator,forecolor,backcolor',
            theme_advanced_buttons3_add: 'emotions,insertdate,inserttime,preview,visualchars,nonbreaking',
            theme_advanced_disable: "styleselect,formatselect,removeformat",
            plugin_insertdate_dateFormat : "%Y-%m-%d",
            plugin_insertdate_timeFormat : "%H:%M:%S",
            theme_advanced_toolbar_align : "left",
            theme_advanced_resize_horizontal : false,
            theme_advanced_resizing : true,
            apply_source_formatting : true,
            spellchecker_languages : "+English=en",
            extended_valid_elements :"img[src|border=0|alt|title|width|height|align|name],"
            +"a[href|target|name|title],"
            +"p,"
            invalid_elements: "table,span,tr,td,tbody,font"

        });
        
    

Your init may vary based on the features you want. I didn’t want my clients to screw anything up by pasting in word html, so I made things like table tags & span tags invalid and removed formatting from p tags, etc. I also use imagemanager & filemanager (which I included in the plugins list at the top.).

Notice

Please note that in some cases you will have to add some extra parameters in order to make the emoticons work. For example, if you have 2 pages, one shows all the comments and the other enables users to add a comment, you might need to add the following settings in the tinyMCE.init function:

tinyMCE.init({
        mode : "exact" ,
        elements: "comment",
        theme : "advanced",
        plugins : "emotions",
        relative_urls : false,
        remove_script_host : false,
        urlconvertor_callback: "convLinkVC", 
});

function convLinkVC(strUrl, node, on_save) {
        strUrl=strUrl.replace("../","");
    return strUrl;
}

What this does is that it removes the "../../" that might appear in the image source instead of the actual address to the emoticons.