Menu Style

The MUDS Editor comes with 3 built-in menu options: full(which is default), minimal and custom.

The full menu includes, as the name might suggest, all the available menu items. Where as the minimal menu option includes: underline, strikeThrough, italic, bold, undo, redo.

If you want full control over which menu items to use, please refer to our section about customizing menu items.


Full Editor:

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
}
b {
    display: block;
    margin-bottom: 0.5rem;
}
                    
 
<!-- Include the MUDS stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/muds.min.css">

<b>Full Editor</b>
<!-- Create the editor container -->
<div id="full-editor"></div>

<!-- Include the MUDS library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/muds.min.js"></script>

<!-- Initialize MUDS editor -->
<script>
var muds = new muds({
    selector: 'editor',
    menuStyle: 'full'
});
</script>
                    

Minimal Editor:

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
}
b {
    display: block;
    margin-bottom: 0.5rem;
}
                    

<!-- Include the MUDS stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/muds.min.css">

<b>Minimal Editor</b>
<!-- Create another editor container -->
<div id="minimal-editor"></div>

<!-- Include the MUDS library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/muds.min.js"></script>

<!-- Initialize MUDS editor -->
<script>
var muds = new muds({
    selector: 'editor',
    menuStyle: 'minimal'
});
</script>
                    

Custumizing menu items

To customize which items are available in the menu, you simply need to define menuStyle: 'custom' and then include the items you want in menuCustom: [].

The order in which you include the menu items will be reflected in the menu.


Available menu items include:

separator, header, fonts, underline, strikeThrough, bold, italic, link, blockquote, code, changeColor, image, undo, redo, justification, unorderedList, orderedList, selectAll, copy, cut, delete, justifyLeft, justifyCenter, justifyRight, indent, outdent, print, showHTML, showText and fullScreen.


Example:



<!-- Include the MUDS stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/muds.min.css">

<!-- Create the editor container -->
<textarea id="editor"></textarea>

<!-- Include the MUDS library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/muds.min.js"></script>

<!-- Initialize MUDS editor -->
<script>
var muds = new muds({
    selector: 'editor',
    menuStyle: 'custom',
    menuCustom: [
        'separator',
        'header',
        'fonts',
        'underline',
        'strikeThrough',
        'bold',
        'italic',
        'link',
        'blockquote',
        'code',
        'changeColor',
        'image',
        'undo',
        'redo',
        'justification',
        'unorderedList',
        'orderedList',
        'selectAll',
        'copy',
        'cut',
        'delete',
        'justifyLeft',
        'justifyCenter',
        'justifyRight',
        'indent',
        'outdent',
        'print',
        'showHTML',
        'showText',
        'fullScreen'
    ]
});
</script>