Copied to clipboard

Flag this post as spam?

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


  • Michel Collard 44 posts 264 karma points c-trib
    Oct 22, 2014 @ 16:29
    Michel Collard
    3

    Using TinyMCE fullscreen with Umbraco 7

    Is it possible to enable TinyMCE fullscreen in Umbraco 7. 
    I read this topic about adding the fullscreen function into the TinyMCE editor(link), but that only made the option visible in the developper section.

    ----------------------------------------------------------------------

    Yesterday I tried to get it to work, so I used the shortcut: ctrl + alf + f, and this actually worked! My Richtext editor went into fullscreen mode but it wasn't pretty. The button did also not show up in the richtext editor toolbar. 

    specifications:
    - Umbraco version: 7.1.4
    - TinyMCEv3

    Michel Collard

  • Rody 80 posts 280 karma points
    Nov 13, 2014 @ 09:57
    Rody
    0

    Hi Michel, I would very much use the full screen functionality. Any news on this? 

  • Ashford Borough Council Dev Team 25 posts 158 karma points
    May 16, 2016 @ 08:52
    Ashford Borough Council Dev Team
    100

    I got tinyMCE working fine in v7.3.7 and full screen without the Umbraco left menu panel getting in the way. . Just needed a few minor tweaks in the back end.

    Umbraco\lib\tinymce\skins\umbraco\skin.min.css
    (using unminified file, add at line 76)

    .mce-fullscreen #leftcolumn { z-index: -1!important; }

    Hides the Umbraco left menu bar and tree view when RTE is fullscreen.


    Config\tinyMceConfig.config

    Add the following in the respective sections.

    <command>
      <umbracoAlias>mceFullScreen</umbracoAlias>
      <icon>images/editor/fullscrn.gif</icon>
      <tinyMceCommand value="" userInterface="false" frontendCommand="fullscreen">fullscreen</tinyMceCommand>
      <priority>80</priority>
    </command>
    
    <plugin loadOnFrontend="true">fullscreen</plugin>
    
    <config key="fullscreen_new_window">true</config>
    

    Adds ‘Fullscreen’ button to the Richtext editor Umbraco data type and the RTE toolbar.

  • Balbir singh 9 posts 102 karma points
    May 27, 2016 @ 12:26
    Balbir singh
    3

    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 !!

  • Stuart Batty 14 posts 35 karma points
    Apr 26, 2017 @ 13:41
    Stuart Batty
    0

    Has anyone gotten this to work in 7.5? I'm using 7.5.9 and can't get the button to appear in the editor. I can check the box to enable it in the data type editor but nothing shows in the RTE. I've set it up just as Balbir singh noted in his reply. No joy.

  • Rob de Mercado 31 posts 147 karma points
    Apr 26, 2017 @ 13:44
    Rob de Mercado
    0

    I've got it working in 7.5.3

    See my post in the name of ABC Dev Team May 16, 2016

    Shout if you need any more help

  • Stuart Batty 14 posts 35 karma points
    May 02, 2017 @ 12:28
    Stuart Batty
    0

    Hmmm... apparently i'm not getting notified to replies to this thread.

    @Rob, I did read your previous post and I currently have my config setup in exactly the same manner. I can check the box in the property editor to enable fullscreen plugin but nothing appears in the editor. Any ideas?

    Here's my config file:

     <?xml version="1.0" encoding="utf-8" ?>
    <!-- Any changes to this file requires the application (umbraco) to restart -->
    <!-- This can be done by touching the web.config or recycling the application pool -->
    <tinymceConfig>
      <commands>
        <command>
          <umbracoAlias>code</umbracoAlias>
          <name>Code</name>
          <icon>images/editor/code.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="code">code</tinyMceCommand>
          <priority>1</priority>
        </command>
        <command>
          <umbracoAlias>codemirror</umbracoAlias>
          <name>Code mirror</name>
          <icon>images/editor/code.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="codemirror">codemirror</tinyMceCommand>
          <priority>2</priority>
        </command>
        <command>
          <umbracoAlias>removeformat</umbracoAlias>
          <name>Remove format</name>
          <icon>images/editor/removeformat.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="removeformat">removeformat</tinyMceCommand>
          <priority>3</priority>
        </command>
        <command>
          <umbracoAlias>undo</umbracoAlias>
          <name>Undo</name>
          <name>Remove Format</name>
          <icon>images/editor/undo.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="undo">undo</tinyMceCommand>
          <priority>11</priority>
        </command>
        <command>
          <umbracoAlias>redo</umbracoAlias>
          <name>Redo</name>
          <icon>images/editor/redo.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="redo">redo</tinyMceCommand>
          <priority>12</priority>
        </command>
        <command>
          <umbracoAlias>cut</umbracoAlias>
          <name>Cut</name>
          <icon>images/editor/cut.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="cut">cut</tinyMceCommand>
          <priority>13</priority>
        </command>
        <command>
          <umbracoAlias>copy</umbracoAlias>
          <name>Copy</name>
          <icon>images/editor/copy.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="copy">copy</tinyMceCommand>
          <priority>14</priority>
        </command>
        <command>
          <umbracoAlias>paste</umbracoAlias>
          <name>Paste</name>
          <icon>images/editor/paste.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="paste">paste</tinyMceCommand>
          <priority>15</priority>
        </command>
        <command>
          <umbracoAlias>styleselect</umbracoAlias>
          <name>Style select</name>
          <icon>images/editor/showStyles.png</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="styleselect">styleselect</tinyMceCommand>
          <priority>20</priority>
        </command>
        <command>
          <umbracoAlias>bold</umbracoAlias>
          <name>Bold</name>
          <icon>images/editor/bold.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="bold">bold</tinyMceCommand>
          <priority>21</priority>
        </command>
        <command>
          <umbracoAlias>italic</umbracoAlias>
          <name>Italic</name>
          <icon>images/editor/italic.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="italic">italic</tinyMceCommand>
          <priority>22</priority>
        </command>
        <command>
          <umbracoAlias>underline</umbracoAlias>
          <name>Underline</name>
          <icon>images/editor/underline.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="underline">underline</tinyMceCommand>
          <priority>23</priority>
        </command>
        <command>
          <umbracoAlias>strikethrough</umbracoAlias>
          <name>Strikethrough</name>
          <icon>images/editor/strikethrough.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="strikethrough">strikethrough</tinyMceCommand>
          <priority>24</priority>
        </command>
        <command>
          <umbracoAlias>justifyleft</umbracoAlias>
          <name>Justify left</name>
          <icon>images/editor/justifyleft.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="alignleft">justifyleft</tinyMceCommand>
          <priority>31</priority>
        </command>
        <command>
          <umbracoAlias>justifycenter</umbracoAlias>
          <name>Justify center</name>
          <icon>images/editor/justifycenter.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="aligncenter">justifycenter</tinyMceCommand>
          <priority>32</priority>
        </command>
        <command>
          <umbracoAlias>justifyright</umbracoAlias>
          <name>Justify right</name>
          <icon>images/editor/justifyright.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="alignright">justifyright</tinyMceCommand>
          <priority>33</priority>
        </command>
        <command>
          <umbracoAlias>justifyfull</umbracoAlias>
          <name>Justify full</name>
          <icon>images/editor/justifyfull.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="alignjustify">alignjustify</tinyMceCommand>
          <priority>34</priority>
        </command>
        <command>
          <umbracoAlias>bullist</umbracoAlias>
          <name>Bullet list</name>
          <icon>images/editor/bullist.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="bullist">bullist</tinyMceCommand>
          <priority>41</priority>
        </command>
        <command>
          <umbracoAlias>numlist</umbracoAlias>
          <name>Numbered list</name>
          <icon>images/editor/numlist.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="numlist">numlist</tinyMceCommand>
          <priority>42</priority>
        </command>
        <command>
          <umbracoAlias>outdent</umbracoAlias>
          <name>Decrease indent</name>
          <icon>images/editor/outdent.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="outdent">outdent</tinyMceCommand>
          <priority>43</priority>
        </command>
        <command>
          <umbracoAlias>indent</umbracoAlias>
          <name>Increase indent</name>
          <icon>images/editor/indent.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="indent">indent</tinyMceCommand>
          <priority>44</priority>
        </command>
        <command>
          <umbracoAlias>mceLink</umbracoAlias>
          <name>Insert/edit link</name>
          <icon>images/editor/link.gif</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="link">link</tinyMceCommand>
          <priority>51</priority>
        </command>
        <command>
          <umbracoAlias>unlink</umbracoAlias>
          <name>Remove link</name>
          <icon>images/editor/unLink.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="unlink">unlink</tinyMceCommand>
          <priority>52</priority>
        </command>
        <command>
          <umbracoAlias>mceInsertAnchor</umbracoAlias>
          <name>Anchor</name>
          <icon>images/editor/anchor.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="anchor">anchor</tinyMceCommand>
          <priority>53</priority>
        </command>
        <command>
          <umbracoAlias>mceImage</umbracoAlias>
          <name>Image</name>
          <icon>images/editor/image.gif</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="umbmediapicker">image</tinyMceCommand>
          <priority>61</priority>
        </command>
        <command>
          <umbracoAlias>umbracomacro</umbracoAlias>
          <name>Macro</name>
          <icon>images/editor/insMacro.gif</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="umbmacro">umbracomacro</tinyMceCommand>
          <priority>62</priority>
        </command>
        <command>
          <umbracoAlias>mceInsertTable</umbracoAlias>
          <name>Table</name>
          <icon>images/editor/table.gif</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="table">table</tinyMceCommand>
          <priority>63</priority>
        </command>
        <command>
          <umbracoAlias>umbracoembed</umbracoAlias>
          <name>Embed</name>
          <icon>images/editor/media.gif</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="umbembeddialog">umbracoembed</tinyMceCommand>
          <priority>66</priority>
        </command>
        <command>
          <umbracoAlias>inserthorizontalrule</umbracoAlias>
          <name>Horizontal rule</name>
          <icon>images/editor/hr.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="hr">hr</tinyMceCommand>
          <priority>71</priority>
        </command>
        <command>
          <umbracoAlias>subscript</umbracoAlias>
          <name>Subscript</name>
          <icon>images/editor/sub.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="subscript">subscript</tinyMceCommand>
          <priority>72</priority>
        </command>
        <command>
          <umbracoAlias>superscript</umbracoAlias>
          <name>Superscript</name>
          <icon>images/editor/sup.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="superscript">superscript</tinyMceCommand>
          <priority>73</priority>
        </command>
        <command>
          <umbracoAlias>mceCharMap</umbracoAlias>
          <name>Character map</name>
          <icon>images/editor/charmap.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="charmap">charmap</tinyMceCommand>
          <priority>74</priority>
        </command>
        <command>
          <umbracoAlias>mceFullScreen</umbracoAlias>
          <name>Full Screen</name>
          <icon>images/editor/fullscrn.gif</icon>
          <tinyMceCommand value="" userInterface="false" frontendCommand="fullscreen">fullscreen</tinyMceCommand>
          <priority>75</priority>
        </command>
      </commands>
      <plugins>
        <plugin loadOnFrontend="true">code</plugin>
        <plugin loadOnFrontend="true">codemirror</plugin>
        <plugin loadOnFrontend="true">paste</plugin>
        <plugin loadOnFrontend="true">umbracolink</plugin>
        <plugin loadOnFrontend="true">anchor</plugin>
        <plugin loadOnFrontend="true">charmap</plugin>
        <plugin loadOnFrontend="true">table</plugin>
        <plugin loadOnFrontend="true">lists</plugin>
        <plugin loadOnFrontend="true">hr</plugin>
        <plugin loadOnFrontent="true">fullscreen</plugin>
      </plugins>
      <validElements>
        <![CDATA[+a[id|style|rel|data-id|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
    ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
    -strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
    img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],
    -sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
    -tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
    thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
    -th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
    -span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],
    -h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],
    dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
    param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*]]]>
      </validElements>
      <invalidElements>font</invalidElements>
    
      <!-- this area is for custom config settings that should be added during TinyMCE initialization -->
      <customConfig>
        <config key="style_formats">
          [
            { "title": "Headings", "items": 
              [
                { "title": "Header 1", "format": "h1" },
                { "title": "Header 2", "format": "h2" },
                { "title": "Header 3", "format": "h3" },
                { "title": "Header 4", "format": "h4" },
                { "title": "Header 5", "format": "h5" },
                { "title": "Header 6", "format": "h6" }
              ]
            },
            { "title": "Blocks", "items": 
              [
                { "title": "Paragraph", "format": "p" },
                { "title": "Blockquote", "format": "blockquote" },
                { "title": "Center Block", "selector": "div", "classes": "center-block" },
                { "title": "Image Box", "block": "div", "classes": "featured-box nobg center-block", "wrapper": "true" },
                { "title": "Div", "format": "div" }
              ]
            },
            { "title": "Typography", "items": 
              [
                { "title": "Body Copy", "items": 
                  [
                    { "title": "Page Header", "block": "div", "classes": "page-header", "wrapper": "true" },
                    { "title": "Lead Body Para", "block": "p", "classes": "lead" }
                  ]
                },
                { "title": "Inline Text", "items": 
                  [
                    { "title": "Small", "inline": "small" },
                    { "title": "Highlight", "inline": "mark" },
                    { "title": "Deleted", "inline": "del" },
                    { "title": "Strikethrough", "inline": "s" },
                    { "title": "Insert", "inline": "ins" }
                  ]
                },
                { "title": "Alignment Para", "items": 
                  [
                    { "title": "Left aligned text", "selector": "p", "classes": "text-left" },
                    { "title": "Center aligned text", "selector": "p", "classes": "text-center" },
                    { "title": "Right aligned text", "selector": "p", "classes": "text-right" },
                    { "title": "Justified text", "selector": "p", "classes": "text-justify" },
                    { "title": "No wrap text", "selector": "p", "classes": "text-nowrap" }
                  ]
                },
                { "title": "Text Transformations", "items": 
                  [
                    { "title": "lowercased text", "selector": "p", "classes": "text-lowercase" },
                    { "title": "UPPERCASED TEXT", "selector": "p", "classes": "text-uppercase" },
                    { "title": "Capitalized Text", "selector": "p", "classes": "text-capitalize" }
                  ]
                },
                { "title": "Abbreviations", "items": 
                  [
                    { "title": "Abbreviation", "inline": "abbr" },
                    { "title": "Initialism", "inline": "abbr", "classes": "initialism" }
                  ]
                },
                { "title": "Address", "format": "address", "wrapper": "true" },
                { "title": "Blockquote Reverse", "selector": "blockquote", "classes": "blockquote-reverse" },
                { "title": "Lists", "items": 
                  [
                    { "title": "Unstyled", "selector": "ul", "classes": "list-unstyled" },
                    { "title": "Inline", "selector": "ul", "classes": "list-inline" }
                  ]
                }
              ]
            },
            { "title": "Code", "items": 
              [
                { "title": "Code Block", "format": "pre", "wrapper": "true" },
                { "title": "Code", "inline": "code" },
                { "title": "Sample", "inline": "samp" },
                { "title": "Keyboard", "inline": "kbd" },
                { "title": "Variable", "inline": "var" }
              ]
            },
            { "title": "Tables", "items": 
              [
                { "title": "Table", "selector": "table", "classes": "table" },
                { "title": "Striped", "selector": "table", "classes": "table-striped" },
                { "title": "Bordered", "selector": "table", "classes": "table-bordered" },
                { "title": "Hover", "selector": "table", "classes": "table-hover" },
                { "title": "Condensed", "selector": "table", "classes": "table-condensed" },
                { "title": "Active Row", "selector": "tr", "classes": "active" },
                { "title": "Success Row", "selector": "tr", "classes": "success" },
                { "title": "Info Row", "selector": "tr", "classes": "info" },
                { "title": "Warning Row", "selector": "tr", "classes": "warning" },
                { "title": "Danger Row", "selector": "tr", "classes": "danger" },
                { "title": "Responsive Table", "selector": "div", "classes": "table-responsive" }
              ]
            },
            { "title": "Buttons", "items": 
              [
                { "title": "Default", "selector": "a", "classes": "btn btn-default" },
                { "title": "Primary", "selector": "a", "classes": "btn btn-primary" },
                { "title": "Success", "selector": "a", "classes": "btn btn-success" },
                { "title": "Info", "selector": "a", "classes": "btn btn-info" },
                { "title": "Warning", "selector": "a", "classes": "btn btn-warning" },
                { "title": "Danger", "selector": "a", "classes": "btn btn-danger" },
                { "title": "Link", "selector": "a", "classes": "btn btn-link" }
              ]
            },
            { "title": "Images", "items": 
              [
                { "title": "Responsive", "selector": "img", "classes": "img-responsive" },
                { "title": "Rouded", "selector": "img", "classes": "img-rounded" },
                { "title": "Circle", "selector": "img", "classes": "img-circle" },
                { "title": "Thumbnail", "selector": "img", "classes": "img-thumbnail" }
              ]
            },
            { "title": "Utilites", "items": 
              [
                { "title": "Muted Text", "inline": "span", "classes": "text-muted" },
                { "title": "Primary Text", "inline": "span", "classes": "text-primary" },
                { "title": "Success Text", "inline": "span", "classes": "text-success" },
                { "title": "Info Text", "inline": "span", "classes": "text-info" },
                { "title": "Warning Text", "inline": "span", "classes": "text-warning" },
                { "title": "Danger Text", "inline": "span", "classes": "text-danger" },
                { "title": "Background Primary", "block": "div", "classes": "bg-primary", "wrapper": "true" },
                { "title": "Background Success", "block": "div", "classes": "bg-success", "wrapper": "true" },
                { "title": "Background Info", "block": "div", "classes": "bg-info", "wrapper": "true" },
                { "title": "Background Warning", "block": "div", "classes": "bg-warning", "wrapper": "true" },
                { "title": "Background Danger", "block": "div", "classes": "bg-danger", "wrapper": "true" },
                { "title": "Pull Left", "block": "div", "classes": "pull-left" },
                { "title": "Pull Right", "block": "div", "classes": "pull-right" },
                { "title": "Center Block", "block": "div", "classes": "center-block" },
                { "title": "Clearfix", "block": "div", "classes": "clearfix" }
              ]
            },
            { "title": "Nav Tabs/Pills", "items": 
              [
                { "title": "Tabs (ul)", "selector": "ul", "classes": "nav nav-tabs" },
                { "title": "Pills (ul)", "selector": "ul", "classes": "nav nav-pills" },
                { "title": "Pills Stacked", "selector": "ul", "classes": "nav nav-pills nav-stacked" }
              ]
            },
            { "title": "Labels", "items": 
              [
                { "title": "Default", "inline": "span", "classes": "label label-default" },
                { "title": "Primary", "inline": "span", "classes": "label label-primary" },
                { "title": "Success", "inline": "span", "classes": "label label-success" },
                { "title": "Info", "inline": "span", "classes": "label label-info" },
                { "title": "Warning", "inline": "span", "classes": "label label-warning" },
                { "title": "Danger", "inline": "span", "classes": "label label-danger" }
              ]
            },
            { "title": "Badge", "inline": "span", "classes": "badge" },
            { "title": "Alerts", "items": 
              [
                { "title": "Success", "block": "div", "classes": "alert alert-success", "wrapper": "true" },
                { "title": "Info", "block": "div", "classes": "alert alert-info", "wrapper": "true" },
                { "title": "Warning", "block": "div", "classes": "alert alert-warning", "wrapper": "true" },
                { "title": "Danger", "block": "div", "classes": "alert alert-danger", "wrapper": "true" }
              ]
            },
            { "title": "Wells", "items": 
              [
                { "title": "Well", "block": "div", "classes": "well", "wrapper": "true" },
                { "title": "Large Well", "block": "div", "classes": "well well-lg", "wrapper": "true" },
                { "title": "Small Well", "block": "div", "classes": "well well-sm", "wrapper": "true" }
              ]
            }
          ]
        </config>
        <config key="fullscreen_new_window">true</config>
        <config key="table_class_list">
          [
            {"title": "Default", "value": "table"},
            {"title": "Striped", "value": "table table-striped"},
            {"title": "Bordered", "value": "table table-bordered"}
            {"title": "Bordered + Striped", "value": "table table-bordered table-striped"}
          ]
        </config>
        <config key="paste_as_text">true</config>
        <config key="statusbar">true</config>
        <config key="height">500</config>
        <config key="entity_encoding">raw</config>
        <config key="codemirror">
          {
          "indentOnInit": false,
          "path": "../../../../lib/codemirror",
          "config": {
          },
          "jsFiles": [
          ],
          "cssFiles": [
          ]
          }
        </config>
      </customConfig>
    </tinymceConfig>
    
  • Rob de Mercado 31 posts 147 karma points
    May 02, 2017 @ 13:51
    Rob de Mercado
    0

    I had a similar problem with another tinyMCE plugin a few days ago. All I did was delete temporary internet files (I'm using IE11) and restart the IIS app pool. After that the button appeared in the RTE toolbar.

  • Stuart Batty 14 posts 35 karma points
    May 03, 2017 @ 20:22
    Stuart Batty
    0

    Yeah, tried that. No joy.

  • Rob de Mercado 31 posts 147 karma points
    May 05, 2017 @ 11:16
    Rob de Mercado
    0

    Hi Stuart, I'm not sure what's going on there.

    I just quickly set up a clean 7.5.9 system. I added the changes in the tinyMCEConfig.config file, enabled the property in the property editor, and finally created a single doc type containing a rich text editor property.

    The full screen button appears and behaves as expected when creating a new content item, so all I can do is confirm that the config changes are still valid for v7.5.9

    enter image description here

  • Stuart Batty 14 posts 35 karma points
    May 08, 2017 @ 12:43
    Stuart Batty
    0

    Wow...this is going to be a pain to figure out. Assuming that you used the same procedure outlined in this thread, we should have the same setup. I think the next thing to try would be to identify anything that is cached within Umbraco itself, not just the browser.

    Can anyone suggest some possible suspects?

  • Rob de Mercado 31 posts 147 karma points
    May 08, 2017 @ 13:32
    Rob de Mercado
    0

    I'm not being funny here, but are you sure you're enabling the button in the property editor itself.

    If you add a rich text editor property to a document type, it also lists the buttons on the property editor. I found that although the fullscreen button was enabled in the data type within the Developer section of Umbraco, when I went to add a new property to a doc type it was NOT enabled (see attached screen snippet). enter image description here

    In order to get back to this list, click the cog icons to first edit the property, then the data type. enter image description here

  • Stuart Batty 14 posts 35 karma points
    May 09, 2017 @ 13:56
    Stuart Batty
    0

    Good idea but I've checked that repeatedly. And I just checked it again. This is maddening.

  • Rob de Mercado 31 posts 147 karma points
    May 10, 2017 @ 14:06
    Rob de Mercado
    1

    I just used your config file Stu.

    It has a typo me' old mate.

    The line <plugin loadOnFrontent="true">fullscreen</plugin>

    Change loadOnFrontent to loadOnFrontend

    Just needed an app pool recycle afterwards to make the button appear.

  • Stuart Batty 14 posts 35 karma points
    May 15, 2017 @ 14:28
    Stuart Batty
    0

    Bloody Hell!!!! I've looked at that config file so many times and never caught the typo! I've looked at that particular line at least a hundred times. Thanks so much. That fixed the issue. I can now go full screen! Thanks so much for continuing to help with the issue. You are a perfect example of what makes the Umbraco community so great. Thank You!

    Now I just have to sort the css issue... I've added the following to Umbraco/assets/css/umbraco.css but it's not having any effect.

    .mce-fullscreen #leftcolumn{z-index:-1 !important;}
    

    I noticed that the same css rule is already present in Umbraco/lib/tinymce/skins/umbraco/skin.min.css but that rule has no effect either.

    I've recycled the app pool and cleared the browser cache and forced a reload from the server but no change. I can add the style to the inspector stylesheet in chrome and it works so I have a specificity issue or the updated css file is not being loaded. I can't see the style rule in the inspector and the css files are bundled/minified under some Dependency Handler so I've yet to see the actual rule I added in the file sent to the browser.

    enter image description here

    Thanks again Rob! You saved me countless hours.

  • Rob de Mercado 31 posts 147 karma points
    May 15, 2017 @ 14:44
    Rob de Mercado
    0

    Hi Stu, glad to have been of help to you.

    Looking back through my notes the style had be be changed in Umbraco\lib\tinymce\skins\umbraco\skin.min.css

    I had to unminify skin.min.cs and make the style change in there. Heres the snippet including a few other classes to help you locate the correct position.

    .mce-tinymce { visibility: visible!important; position: relative }

    .mce-fullscreen { border: 0; padding: 0; margin: 0; overflow: hidden; background: #FFF; height: 100%; z-index: 100 }

    .mce-fullscreen #leftcolumn { z-index: -1!important; }

    It might also (as a long shot) be worth opening ClientDependency.config, increasing the version value at the top by 1 and saving the file. This will cause a reload of client dependency css and js files.

  • Stuart Batty 14 posts 35 karma points
    May 15, 2017 @ 18:05
    Stuart Batty
    1

    You nailed it again! Incrementing the CliendDependency version did the trick. I suspected that the css was correct but not getting re-bundled/minified etc.

    I can now cross this off my list. Full screen editing rocks!

Please Sign in or register to post replies

Write your reply to:

Draft