Skip to content
This repository

Supported Commands

Below is a full list of formatting commands supported by wysihtml5.

bold

  • Generated markup:
    <b>text</b>
    
  • Toolbar element:
    <a data-wysihtml5-command="bold">bold</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "b": 1,
        // if you want to turn all <strong> elements into <b> (optional)
       "strong": { "rename_tag": "b" }
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("bold");
    
  • Source code

createLink

  • Generated markup:
    <!-- target="_blank" and rel="nofollow" are only set when defined in parser rules -->
    <a href="http://url" target="_blank" rel="nofollow">link</a>
    
  • Toolbar element:
    <!-- User can define the link's href: -->
    <a data-wysihtml5-command="createLink">insert link</a>
    <div data-wysihtml5-dialog="createLink">
      <label>
        Link:
        <input data-wysihtml5-dialog-field="href" value="http://">
      </label>
      <a data-wysihtml5-dialog-action="save">OK</a>
      <a data-wysihtml5-dialog-action="cancel">Cancel</a>
    </div>
    <!-- Pre-defined href -->
    <a data-wysihtml5-command="createLink" data-wysihtml5-command-value="http://www.google.com">insert google link</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "a": {
          "check_attributes": {
            "href": "url" // make sure the entered url is really an url
          },
          "set_attributes": {
            "rel": "nofollow",   // optional
            "target": "_blank"   // optional
          }
        }
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("createLink", { href: "http://google.com", target: "_blank", rel: "nofollow", text: "Google" });
    
  • Source code

fontSize

  • Generated markup:
    <!-- XS -->
    <span class="wysiwyg-font-size-x-small">text</span>
    <!-- S -->
    <span class="wysiwyg-font-size-small">text</span>
    <!-- M -->
    <span class="wysiwyg-font-size-medium">text</span>
    <!-- L -->
    <span class="wysiwyg-font-size-large">text</span>
    <!-- XL -->
    <span class="wysiwyg-font-size-x-large">text</span>
    <!-- ... and many more font sizes possible --->
    
  • Toolbar elements:
    <a data-wysihtml5-command="fontSize" data-wysihtml5-command-value="small">small</a>
    <a data-wysihtml5-command="fontSize" data-wysihtml5-command-value="large">large</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      classes: {
        "wysiwyg-font-size-large": 1,
        "wysiwyg-font-size-small": 1
      },
      tags: {
        "span": 1
      }
    };
    
  • Required CSS:
    .wysiwyg-font-size-large {
      font-size: large;
    }
    .wysiwyg-font-size-small {
      font-size: small;
    }
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("fontSize", "large");
    
  • Source code

foreColor

  • Generated markup:
    <!-- Red -->
    <span class="wysiwyg-font-color-red">text</span>
    <!-- Green -->
    <span class="wysiwyg-font-color-green">text</span>
    <!-- Blue -->
    <span class="wysiwyg-font-color-blue">text</span>
    <!-- ... and many more colors possible -->
    
  • Toolbar elements:
    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a>
    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      classes: {
        "wysiwyg-color-blue": 1,
        "wysiwyg-color-green": 1,
        "wysiwyg-color-red": 1
      },
      tags: {
        "span": 1
      }
    };
    
  • Required CSS:
    .wysiwyg-color-red {
      color: red;
    }
    .wysiwyg-color-green {
      color: green;
    }
    .wysiwyg-color-blue {
      color: blue;
    }
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("foreColor", "blue");
    
  • Source code

formatBlock

Please note: formatBlock can be used to format the current selection into any block element (h1, h2, p, blockquote, …). The following is an example using the H1 tag.

  • Generated markup:
    <h1>text</h1>
    
  • Toolbar element:
    <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">heading 1</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "h1": 1
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("formatBlock", "h1");
    
  • Source code

formatInline

Please note: formatInline can be used to format the current selection into any inline element (span, strong, time, …). The following is an example using the SPAN tag.

  • Generated markup:
    <span>text</span>
    
  • Toolbar element:
    <a data-wysihtml5-command="formatInline" data-wysihtml5-command-value="span">span</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "span": 1
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("formatInline", "span");
    
  • Source code

insertHTML

  • Toolbar element:
    <a data-wysihtml5-command="insertHTML" data-wysihtml5-command-value="<blockquote>foobar</blockquote>">insert quote</a>
    
  • Required parser rules:
    depends on the HTML that can be inserted
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("insertHTML", "<blockquote>foobar</blockquote>");
    
  • Source code

insertImage

  • Generated markup:
    <img src="http://url.com/foo.jpg" width="100" height="100">
    
  • Toolbar element:
    <!-- User can define the image's src: -->
    <a data-wysihtml5-command="insertImage">insert image</a>
    <div data-wysihtml5-dialog="insertImage">
      <label>
        Image:
        <input data-wysihtml5-dialog-field="src" value="http://">
      </label>
      <a data-wysihtml5-dialog-action="save">OK</a>
      <a data-wysihtml5-dialog-action="cancel">Cancel</a>
    </div>
    <!-- Pre-defined src -->
    <a data-wysihtml5-command="insertImage" data-wysihtml5-command-value="http://url.com/foo.jpg">insert example image</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "img": {
            "check_attributes": {
                "width": "numbers",
                "alt": "alt",
                "src": "url",
                "height": "numbers"
            }
        }
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("insertImage", { src: "http://url.com/foo.jpg", alt: "this is an image" });
    
  • Source code

insertLineBreak

  • Generated markup:
    <br>
    
  • Toolbar element:
    <a data-wysihtml5-command="insertLineBreak">line break</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "br": 1
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("insertLineBreak");
    
  • Source code

insertOrderedList

  • Generated markup:
    <ol><li>text</li></ol>
    
  • Toolbar element:
    <a data-wysihtml5-command="insertOrderedList">insert ordered list</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "ol": 1,
        "li": 1
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("insertOrderedList");
    
  • Source code

insertUnorderedList

  • Generated markup:
    <ul><li>text</li></ul>
    
  • Toolbar element:
    <a data-wysihtml5-command="insertUnorderedList">insert unordered list</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "ul": 1,
        "li": 1
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("insertUnorderedList");
    
  • Source code

italic

  • Generated markup:
    <i>text</i>
    
  • Toolbar element:
    <a data-wysihtml5-command="italic">italic</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "i": 1,
        // if you want to turn all <em> elements into <i> (optional)
        "em": { "rename_tag": "i" }
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("italic");
    
  • Source code

justifyCenter

  • Generated markup:
    <div class="wysiwyg-text-align-center">text</div>
    
  • Toolbar element:
    <a data-wysihtml5-command="justifyCenter">align center</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      classes: {
        "wysiwyg-text-align-center": 1
      },
      tags: {
        "div": 1
      }
    };
    
  • Required CSS:
    .wysiwyg-text-align-center {
      text-align: center;
    }
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("justifyCenter");
    
  • Source code

justifyLeft

  • Generated markup:
    <div class="wysiwyg-text-align-left">text</div>
    
  • Toolbar element:
    <a data-wysihtml5-command="justifyLeft">align left</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      classes: {
        "wysiwyg-text-align-left": 1
      },
      tags: {
        "div": 1
      }
    };
    
  • Required CSS:
    .wysiwyg-text-align-left {
      text-align: left;
    }
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("justifyLeft");
    
  • Source code

justifyRight

  • Generated markup:
    <div class="wysiwyg-text-align-right">text</div>
    
  • Toolbar element:
    <a data-wysihtml5-command="justifyRight">align right</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      classes: {
        "wysiwyg-text-align-right": 1
      },
      tags: {
        "div": 1
      }
    };
    
  • Required CSS:
    .wysiwyg-text-align-right {
      text-align: right;
    }
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("justifyRight");
    
  • Source code

underline

  • Generated markup:
    <u>text</u>
    
  • Toolbar element:
    <a data-wysihtml5-command="underline">underline</a>
    
  • Required parser rules:
    var wysihtml5ParserRules = {
      tags: {
        "u": 1
      }
    };
    
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("underline");
    
  • Source code
Something went wrong with that request. Please try again.