Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ansar 181 posts 291 karma points
    Jan 15, 2012 @ 18:32
    Ansar
    0

    TinyMCE fullscreen on back office

    Is it possible to enable TinyMCE full screen on Umbraco back office? Its a really nice functionality of TinyMCE editor for users with small screens..

    Regards,
    Anz

  • Markus Johansson 1902 posts 5706 karma points MVP c-trib
    Jan 15, 2012 @ 21:17
    Markus Johansson
    1

    Hi Anz!

    I have't tried it but it should work fine! Just add the button as a command and enable it as a plugin in tinymce.config and then activate it by checking the checkbox on the data type in back office (developer/data types/rich text editor). 

    Read this wiki for more info our.umbraco.org/.../add-accessibility-checker-to-umbraco-tinymce

    =D

  • Ansar 181 posts 291 karma points
    Jan 17, 2012 @ 06:15
    Ansar
    0

    Hi Markus,

    I tried it and yes the fullscreen work but it will hide the toolbar and there is no way you can fomat the html or save/publish the page or exit the fullscreen mode..

    At the moment, I am setting a big height and width value :) but hope someone good with TinyMCE finds a soilution for fullscreen..

    Regards,

  • Markus Johansson 1902 posts 5706 karma points MVP c-trib
    Jan 17, 2012 @ 06:19
    Markus Johansson
    0

    Okey. So if i understand you right the button appears but there is something wring with the styling? Or the javascript? I haven't tried it my self, maybe some else has?

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Jan 17, 2012 @ 06:55
    Jeroen Breuer
    1

    Not sure if you can do this without changing the source. I also use this in DAMP with this:

    //Open a popup in which the media can be edited.
    function mediaPopupDamp(umbPath, id, updateSelect) {
        UmbClientMgr.openModalWindow(umbPath + '/plugins/DigibizAdvancedMediaPicker/EditDamp.aspx?id=' + id, 'Edit media item', true, $(parent.window).width() - 140, $(parent.window).height() - 100, 0, 0, '', window[updateSelect]);
        return false;
    }

    It looks like this:

    Jeroen

  • Ansar 181 posts 291 karma points
    Jan 19, 2012 @ 17:20
    Ansar
    0

    @Markus - no buttons or styling but just the editor textarea in the browser!

    @Jeroen - Looks good.. but not sure how I can takeout just the editor and its toolbar alone to the popup.. do u mean to show /umbraco/editContent.aspx?id= into popup and then enable the TinyMCE Fullscreen?

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Jan 19, 2012 @ 17:22
    Jeroen Breuer
    0

    Well somewhere in the source the height and width must be set. Try to change that to this:

    Height: $(parent.window).height() - 100
    Width: $(parent.window).width() - 140

    Jeroen

  • Balbir singh 9 posts 102 karma points
    May 27, 2016 @ 12:25
    Balbir singh
    0

    I have got it to work !! :) my version - 7.1.4

    Inside \config\tinyMceConfig.config add the following two tags: under commands section:

      <command>
      <umbracoAlias>mceFullScreen</umbracoAlias>
      <icon>images/editor/fullscrn.gif</icon>
      <tinyMceCommand value="" userInterface="false" frontendCommand="fullscreen">fullscreen</tinyMceCommand>
      <priority>82</priority>
    </command>
    

    under plugins section:

    <plugin loadOnFrontend="true">fullscreen</plugin>
    

    *Note: the above tags will add the full screen button to the developer sections RichTextEditor(dont forget to check the box) and to the front-end RichTextEditor's display.

    and most importantly a tweak to hide the left column

    inside \admin\assets\css\umbraco.css: find the style for"#leftcolumn" and before that insert the following style:

    .mce-fullscreen #leftcolumn{display:none;}
    

    thats itt !! cheers !!

  • Steven Baker 7 posts 77 karma points
    Nov 29, 2017 @ 14:06
    Steven Baker
    0

    I have been wondering for a while why this is not in the standard config. As an editor it's great to see all of your text.

    Can I just add to Anz's config the name element:

    <command>
      <umbracoAlias>mceFullScreen</umbracoAlias>
      <name>Fullscreen</name>
      <icon>images/editor/fullscrn.gif</icon>
      <tinyMceCommand value="" userInterface="false" frontendCommand="fullscreen">fullscreen</tinyMceCommand>
      <priority>82</priority>
    </command>
    
Please Sign in or register to post replies

Write your reply to:

Draft