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:

 tinymce track changes plugin Demo can be found:

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

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

            mode: "exact",
            elements: "tinymce",
            theme: "advanced",
            plugins: 'ice,icesearchreplace',
            theme_advanced_buttons1: "bold,italic,underline,|,undo,redo,|,search,replace,|,ice_togglechanges,
            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});
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%">

No comments:

Post a Comment