CODEWITHSUNDEEP
pluginstinymce-4silverstripe-4
seppzzz
seppzzz

Reputation: 229

Silverstripe 4 TinyMCE Plugin: How to Save and Restore Scroll Position Uniquely per Record

I'm developing a TinyMCE plugin for the Silverstripe CMS that saves and restores the scroll position after editing and saving long text content. The current implementation works fine for restoring the scroll position within a single session using sessionStorage.setItem('tinymceScrollPosition', scrollPosition);. However, I'm running into an issue when switching between different records.

The problem is that the saved scroll position from the last edited record is used when editing a new record. I understand this happens because the key stored in sessionStorage is not unique per record.

Goal:

I need to create a unique identifier for the TinyMCE editor instance so that the scroll position can be saved and restored correctly for each record individually.

Current Implementation:

Here’s the relevant code snippet from my plugin:

(function() {
    tinymce.create('tinymce.plugins.scrollposition', {
        init:function(ed,url){

            // Restore scroll position when TinyMCE is initialized
            ed.on('init',function(){
                console.log('Editor initialized. Attempting to restore scroll position.');
                var savedScrollPosition=sessionStorage.getItem('tinymceScrollPosition');
                if(savedScrollPosition!==null){
                    var iframeWindow=ed.getWin();
                    iframeWindow.scrollTo(0,parseInt(savedScrollPosition,10));
                    //console.log('Restored scroll position: '+savedScrollPosition);
                    sessionStorage.removeItem('tinymceScrollPosition');
                }else{
                    //console.log('No scroll position found in sessionStorage.');
                }
            });

            // Save scroll position when content changes, or the editor loses focus
            function saveScrollPosition(){
                var iframeWindow=ed.getWin();
                var scrollPosition=iframeWindow.scrollY;
                sessionStorage.setItem('tinymceScrollPosition',scrollPosition);
                //console.log('Saved scroll position: '+scrollPosition);
            }

            ed.on('NodeChange',saveScrollPosition);
            ed.on('blur',saveScrollPosition);
            ed.on('PostProcess',saveScrollPosition);
            ed.on('BeforeUnload',saveScrollPosition);
        },

        getInfo:function(){
            return{
                longname:'Scroll Position Plugin',
                author:'',
                authorurl:'',
                version:"1.0"
            };
        }
    });

    tinymce.PluginManager.add('scrollposition',tinymce.plugins.scrollposition);
})();

Question:

How can I generate a unique identifier for the TinyMCE editor for each record, so that the scroll position is saved and restored correctly when switching between records? Any guidance or suggestions on how to modify my current approach would be greatly appreciated.

Additional Context:

I'm using Silverstripe 4. The editor ID (ed.id) can be used, but I'm not sure how to tie it uniquely to each record. (out from Silverstripe) I need to avoid overwriting scroll positions across different records.

Upvotes: 0

Views: 28

Answers (1)

seppzzz
seppzzz

Reputation: 229

I created a module: HtmlEditor-Save-Scroll-Position, which adds a unique identifier to each record to store the scroll position separately.

However, I’m still looking for feedback or improvements. Is there a more efficient way to generate a unique identifier for each record within a TinyMCE plugin, or is there something else I could improve in my approach?

Upvotes: 0

Related Questions