Wednesday, August 8, 2012

Add "track changes" feature in tinymce



We can add "track changes" feature in tinymce using ice plugin.
Ice plugin can be downloaded from:
https://github.com/NYTimes/ice/downloads

 tinymce track changes plugin Demo can be found:
http://nytimes.github.com/ice/demo/

Below is the detail:
1) Copy ice_0.4.0/tinymce/ice and   ice_0.4.0/tinymce/icesearchreplace
to  tinymce plugin, such as
 tiny_mce_3/plugins

2)  tinymce init script:
    <script type="text/javascript">

        tinymce.init({
            mode: "exact",
            elements: "tinymce",
            theme: "advanced",
            plugins: 'ice,icesearchreplace',
            theme_advanced_buttons1: "bold,italic,underline,|,undo,redo,|,search,replace,|,ice_togglechanges,
ice_toggleshowchanges,iceacceptall,icerejectall,iceaccept,icereject",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            extended_valid_elements: "p,span[*],delete[*],insert[*]",
            ice: {
                user: { name: 'Geoffrey Jellineck', id: 11},
                preserveOnPaste: 'p,a[href],i,em,b,span'
            },
            height: '400'
        });
       
        function setUserMCE(el) {
            var name = $(el).find(':selected').data('username');
            var id = $(el).find(':selected').data('userid');
            tinymce.execCommand('ice_changeuser', {id: id, name: name});
        }
       
        </script>
3)Display tinymce editor
<script type="text/javascript" src="lib/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<div id="content">
                <div id="tinymce-wrapper">
                    <textarea id="tinymce" style="width: 100%">
                   
                    </textarea>
                </div>
            </div>

No comments:

Post a Comment