Documentation


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>