Fullscreen mode while editing in CMS

[Hermeswein]

Hi there,

 

we just migrated from Prestashop 1.4 to Prestashop 1.6, and I was wondering where the fullscreen mode (when editing a CMS page) went to?

 

Especially when editing longer texts, additional CMS scrollbars appear, and I can't see the toolbar icons anymore (and have to scroll up to access them again --> somewhat annoying).

 

Any idaes?

 

Best regards,

Stefan

[vekia]

tinyMCE rich text editor in prestashop 1.6 hasn't got feature you mentioned.

in this case it will be necessary to extend tinymce editor.

 

it will contain feature to fullscreen then

[Hermeswein]

I followed all instructions, and some options did re-appear. However, the full-screen button which you mentioned is still not there (see screenshot)... :-/

 

Any ideas?

[tuk66]

I did this:

 

/js/tinymce.inc.js
    add fullscreen to plugins, toolbar1 and menu:view

 

/admin/themes/default/css/admin-theme.css
    .mce-fullscreen{... z-index:1099}

[Hermeswein]

Just to make sure that we understood the situation correctly (since we only upgraded some weeks ago from 1.4 to 1.6):

 

The perfectly working Editor in our old 1.4 PS installation was replaced by an editor with not even half the functions, and which has to be "tweaked" / rebuilt step by step to get the old functionality back?

 

I hope I missed something here...

[tuk66]

Exactly, the old 1.4 TinyMCE editor have had 4 lines of icons and the new one only 2. I would expect some enable/disable block to set this very important part.

[vekia]

I followed all instructions, and some options did re-appear. However, the full-screen button which you mentioned is still not there (see screenshot)... :-/

 

Any ideas?

 

can you show how your modified js looks like?

anyway, this fulscreen button isn't functional because of this:

[Hermeswein]

Hmm, interesting. If it's really like this, then it's clearly something that was MUCH better in the old version. Editing complex texts (and having to scroll all the way up whenever more detailed edits are needed) is really a pain with the new editor... :-/

 

Here's edited tinymce.inc.js

function tinySetup(config)
{
    if(!config)
        config = {};

    //var editor_selector = 'rte';
    //if (typeof config['editor_selector'] !== 'undefined')
        //var editor_selector = config['editor_selector'];
    if (typeof config['editor_selector'] != 'undefined')
        config['selector'] = '.'+config['editor_selector'];

//    safari,pagebreak,style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,xhtmlxtras,preview
    default_config = {
        selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons",
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,",
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",
        toolbar4 : "visualblocks,|,charmap,|,hr,",
           
        external_filemanager_path: ad+"/filemanager/",
        filemanager_title: "File manager" ,
        external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
        extended_valid_elements: 'pre[*],script[*],style[*]',
        valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
        valid_elements : '*[*]',
        force_p_newlines : false,
        cleanup: false,
        forced_root_block : false,
        force_br_newlines : true,   
        menu: {
            edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
            insert: {title: 'Insert', items: 'media image link | pagebreak'},
            view: {title: 'View', items: 'visualaid'},
            format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
            table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
            tools: {title: 'Tools', items: 'code'}
        }

    }

    $.each(default_config, function(index, el)
    {
        if (config[index] === undefined )
            config[index] = el;
    });

    tinyMCE.init(config);

};

[tuk66]

can you show how your modified js looks like?

anyway, this fulscreen button isn't functional because of this:

 

To fix it, edit /admin/themes/default/css/admin-theme.css

        .mce-fullscreen{... z-index:1099}