Supported Commands

Supported Commands

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

• bold
• createLink
• fontSize
• foreColor
• formatBlock
• formatInline
• insertHTML
• insertImage
• insertLineBreak
• insertOrderedList
• insertUnorderedList
• italic
• justifyCenter
• justifyLeft
• justifyRight
• underline

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://" class="text">
    </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", nofollow: "rel" });

• Source code

fontSize

• Generated markup:
  

  <!-- XXS -->
  <span class="wysiwyg-font-size-xx-small">text</span>
  <!-- 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>
  <!-- XXL -->
  <span class="wysiwyg-font-size-xx-large">text</span>
  <!-- Smaller (relative, similar to html4's <small> element) -->
  <span class="wysiwyg-font-size-smaller">text</span>
  <!-- Larger (relative, similar to html4's <big> element) -->
  <span class="wysiwyg-font-size-larger">text</span>
  

• 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-larger": 1,
      "wysiwyg-font-size-medium": 1,
      "wysiwyg-font-size-small": 1,
      "wysiwyg-font-size-smaller": 1,
      "wysiwyg-font-size-x-large": 1,
      "wysiwyg-font-size-x-small": 1,
      "wysiwyg-font-size-xx-large": 1,
      "wysiwyg-font-size-xx-small": 1
    },
    tags: {
      "span": 1,
      // if you want to transform html4 elements to valid html5 (optional)
      "small": {
        "rename_tag": "span",
        "set_class": "wysiwyg-font-size-smaller"
      },
      "big": {
        "rename_tag": "span",
        "set_class": "wysiwyg-font-size-larger"
      }
    }
  };
  

• Required CSS:
  

  .wysiwyg-font-size-smaller {
    font-size: smaller;
  }
  .wysiwyg-font-size-larger {
    font-size: larger;
  }
  .wysiwyg-font-size-xx-large {
    font-size: xx-large;
  }
  .wysiwyg-font-size-x-large {
    font-size: x-large;
  }
  .wysiwyg-font-size-large {
    font-size: large;
  }
  .wysiwyg-font-size-medium {
    font-size: medium;
  }
  .wysiwyg-font-size-small {
    font-size: small;
  }
  .wysiwyg-font-size-x-small {
    font-size: x-small;
  }
  .wysiwyg-font-size-xx-small {
    font-size: xx-small;
  }

• Trigger via JavaScript:
  

  editorInstance.composer.commands.exec("fontSize", "xx-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>

  
  
• 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-aqua": 1,
      "wysiwyg-color-black": 1,
      "wysiwyg-color-blue": 1,
      "wysiwyg-color-fuchsia": 1,
      "wysiwyg-color-gray": 1,
      "wysiwyg-color-green": 1,
      "wysiwyg-color-lime": 1,
      "wysiwyg-color-maroon": 1,
      "wysiwyg-color-navy": 1,
      "wysiwyg-color-olive": 1,
      "wysiwyg-color-purple": 1,
      "wysiwyg-color-red": 1,
      "wysiwyg-color-silver": 1,
      "wysiwyg-color-teal": 1,
      "wysiwyg-color-white": 1,
      "wysiwyg-color-xing": 1,
      "wysiwyg-color-yellow": 1
    },
    tags: {
      "span": 1
    }
  };
  

• Required CSS:
  

  .wysiwyg-color-black {
    color: black;
  }
  .wysiwyg-color-silver {
    color: silver;
  }
  .wysiwyg-color-gray {
    color: gray;
  }
  .wysiwyg-color-white {
    color: white;
  }
  .wysiwyg-color-maroon {
    color: maroon;
  }
  .wysiwyg-color-red {
    color: red;
  }
  .wysiwyg-color-purple {
    color: purple;
  }
  .wysiwyg-color-fuchsia {
    color: fuchsia;
  }
  .wysiwyg-color-green {
    color: green;
  }
  .wysiwyg-color-lime {
    color: lime;
  }
  .wysiwyg-color-olive {
    color: olive;
  }
  .wysiwyg-color-yellow {
    color: yellow;
  }
  .wysiwyg-color-navy {
    color: navy;
  }
  .wysiwyg-color-blue {
    color: blue;
  }
  .wysiwyg-color-teal {
    color: teal;
  }
  .wysiwyg-color-aqua {
    color: aqua;
  }

• Trigger via JavaScript:
  

  editorInstance.composer.commands.exec("foreColor", "yellow");

• Source code