Copied to clipboard

Flag this post as spam?

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


  • Nate M 22 posts 163 karma points
    Dec 12, 2024 @ 17:37
    Nate M
    0

    Is there a way to rearrange the toolbar buttons in the Rich Text Editor (Umbraco v13, TinyMCE v6)

    Is there a way to rearrange the toolbar buttons in the Rich Text Editor? I don't like the way they are currently laid out and would like a better, more streamlined approach like in Microsoft Word.

    enter image description here

    For example, I wouldl like to move the Remove Format to be next to the StyeSelect, then have that followed by FontSize, FontColor, Highlight, LineHeight, then the other buttons can be rendered in the order they are in.

    Here is RichTextEditor portion of my appsettings.json file:

        "RichTextEditor": {
            "Plugins": [ "paste", "textcolor", "colorpicker", "anchor", "charmap", "table", "lists", "advlist", "hr", "autolink", "directionality", "tabfocus", "searchreplace", "fullscreen", "spellchecker", "wordcount" ],
            "Toolbar": "code | undo redo | styleselect removeformat | fontsize forecolor backcolor | bold italic underline | alignleft aligncenter alignright alignjustify | lineheight | copy cut paste | bullist numlist | outdent indent | link unlink | image | media | table | hr | subscript superscript | wordcount",
            "ValidElements": "+a[id|style|rel|data-id|data-udi|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],small[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[*],figure,figcaption,video[*],audio[*],picture[*],source[*],canvas[*]",
            "InvalidElements": "font",
            "Commands": [
                {
                    "Alias": "fontsize",
                    "Name": "Font size",
                    "Mode": "Selection"
                },
                {
                    "Alias": "forecolor",
                    "Name": "Fore color",
                    "Mode": "Selection"
                },
                {
                    "Alias": "backcolor",
                    "Name": "Highlight",
                    "Mode": "Selection"
                },
                {
                    "Alias": "lineheight",
                    "Name": "Line height",
                    "Mode": "Selection"
                },
                {
                    "Alias": "fullscreen",
                    "Name": "Full screen",
                    "Mode": "All"
                },
                {
                    "Alias": "codesample",
                    "Name": "Code sample",
                    "Mode": "Insert"
                }
            ],
            "CustomConfig": {
                "entity_encoding": "raw",
                "fontsize_formats": "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 30pt 32pt 34pt 36pt 38pt 40pt 46pt 50pt 56pt 60pt 66pt 72pt",
                "style_formats": "[{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading 1\",\"block\":\"h1\"},{\"title\":\"Heading 2\",\"block\":\"h2\"},{\"title\":\"Heading 3\",\"block\":\"h3\"},{\"title\":\"Heading 4\",\"block\":\"h4\"},{\"title\":\"Heading 5\",\"block\":\"h5\"},{\"title\":\"Heading 6\",\"block\":\"h6\"}]},{\"title\":\"Blocks\",\"items\":[{\"title\":\"Blockquote\",\"format\":\"blockquote\"},{\"title\":\"Div\",\"format\":\"div\"}]},{\"title\":\"Paragraphs\",\"items\":[{\"title\":\"Paragraph\",\"selector\":\"p\"},{\"title\":\"Paragraph - No Margin\",\"selector\":\"p\",\"classes\":\"altP\"}]},{\"title\":\"Link\",\"selector\":\"a\",\"styles\":{\"color\": \"#0000ff\",\"font-weight\": \"700\",\"cursor\": \"pointer\",\"text-decoration\": \"none\"}},{\"title\":\"Buttons\",\"items\":[{\"title\":\"Button - required\",\"selector\":\"a\",\"classes\":\"btn\"},{\"title\":\"Button Sizes\",\"items\":[{\"title\":\"Extra Small\",\"selector\":\"a\",\"classes\":\"btn-xs\"},{\"title\":\"Small\",\"selector\":\"a\",\"classes\":\"btn-sm\"},{\"title\":\"Medium\",\"selector\":\"a\",\"classes\":\"btn-md\"},{\"title\":\"Normal\",\"selector\":\"a\",\"classes\":\"btn-nm\"},{\"title\":\"Large\",\"selector\":\"a\",\"classes\":\"btn-lg\"},{\"title\":\"Extra Large\",\"selector\":\"a\",\"classes\":\"btn-xl\"}]},{\"title\":\"Button Styles\",\"items\":[{\"title\":\"Charcoal\",\"selector\":\"a\",\"classes\":\"btn-charcoal\"},{\"title\":\"Danger\",\"selector\":\"a\",\"classes\":\"btn-danger\"},{\"title\":\"Default\",\"selector\":\"a\",\"classes\":\"btn-default\"},{\"title\":\"Info\",\"selector\":\"a\",\"classes\":\"btn-info\"},{\"title\":\"Neon Yellow\",\"selector\":\"a\",\"classes\":\"btn-neonYellow\"},{\"title\":\"Primary\",\"selector\":\"a\",\"classes\":\"btn-primary\"},{\"title\":\"Success\",\"selector\":\"a\",\"classes\":\"btn-success\"},{\"title\":\"Warning\",\"selector\":\"a\",\"classes\":\"btn-warning\"}]}]}]"
            }
        }
    
Please Sign in or register to post replies

Write your reply to:

Draft