Supported Commands

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

addTableCells
bgColorStyle
bold
createLink
createTable
deleteTableCells
fontSize
foreColor
foreColorStyle
formatBlock
formatInline
insertHTML
insertImage
insertLineBreak
insertOrderedList
insertUnorderedList
italic
justifyCenter
justifyFull
justifyLeft
justifyRight
mergeTableCells
redo
underline
undo

addTableCells

When a table cell is selected then adds a row or column to table

Whether table cells selection is active can be tracked with following events:

editorInstance.on("tableselect", function() {});
editorInstance.on("tableunselect", function() {});

Toolbar elements:

<!-- adds a row above selected cell -->
<a data-wysihtml5-command="addTableCells" data-wysihtml5-command-value="above">row-before</a>

<!-- adds a row below selected cell -->
<a data-wysihtml5-command="addTableCells" data-wysihtml5-command-value="below">row-after</a>

<!-- adds a cloumn before selected cell -->
<a data-wysihtml5-command="addTableCells" data-wysihtml5-command-value="before">col-before</a>

<!-- adds a cloumn after selected cell -->
<a data-wysihtml5-command="addTableCells" data-wysihtml5-command-value="after">col-after</a>

Trigger via JavaScript:

editorInstance.composer.commands.exec("addTableCells", "above");
editorInstance.composer.commands.exec("addTableCells", "below");
editorInstance.composer.commands.exec("addTableCells", "before");
editorInstance.composer.commands.exec("addTableCells", "after");

Source code

bgColorStyle

Sets/unsets text background color with style attribute. Calling allready set background value on element removes styling.

Generated markup:

<span style="background-color:rgba(255,0,0)">text</span>

Toolbar element

<a data-wysihtml5-command="bgColorStyle">BG-Color</a>
<div data-wysihtml5-dialog="bgColorStyle" style="display: none;">
  Color: rgb(
    <input type="text" data-wysihtml5-dialog-field="red" style="width: 30px;" value="0" />,
    <input type="text" data-wysihtml5-dialog-field="green" style="width: 30px;" value="0" />,
    <input type="text" data-wysihtml5-dialog-field="blue" style="width: 30px;" value="0" />
  )<br/>
  <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
</div>

Required parser rules:

var wysihtml5ParserRules = {
  "type_definitions": {
      "text_bg_color_object": {
        "styles": {
          "background-color": true
        }
      },
  },
  
  tags: {
    "span": {
        "one_of_type": {
            "text_color_object": 1
        },
        "keep_styles": {
            "backgroundColor": 1
        },
        "remove_action": "unwrap"
    }
  }
};

Trigger via JavaScript:

editorInstance.composer.commands.exec("bgColorStyle", {
  "red": 255,
  "green": 0,
  "blue": 0,
});

Source code

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

createTable

Generated markup:

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Toolbar element:

<a data-wysihtml5-command="createTable">Table</a>
<div data-wysihtml5-dialog="createTable" style="display: none;">
  Rows: <input type="text" data-wysihtml5-dialog-field="rows" /><br/>
  Cols: <input type="text" data-wysihtml5-dialog-field="cols" /><br/>
  <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
</div>

Required parser rules:

var wysihtml5ParserRules = {
  tags: {
    "table": {},
    "td": {
        "check_attributes": {
            "rowspan": "numbers",
            "colspan": "numbers"
        }
    },
    "tr": {},
    "tbody": {}
  }
};

Trigger via JavaScript:

editorInstance.composer.commands.exec("createTable", { rows: 5, cols: 3 });

Source code

deleteTableCells

When a table cell is selected then removes a row or column of table

Whether table cells selection is active can be tracked with following events:

editorInstance.on("tableselect", function() {});
editorInstance.on("tableunselect", function() {});

Toolbar elements:

<!-- deletes the row of table containing selected cell -->
<a data-wysihtml5-command="deleteTableCells" data-wysihtml5-command-value="row">delete row</a>

<!-- deletes the column of table  containing selected cell -->
<a data-wysihtml5-command="deleteTableCells" data-wysihtml5-command-value="column">delete column</a>

Trigger via JavaScript:

editorInstance.composer.commands.exec("deleteTableCells", "row");
editorInstance.composer.commands.exec("deleteTableCells", "column");

Source code

<!-- 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Supported Commands

Supported Commands

addTableCells

bgColorStyle

bold

createLink

createTable

deleteTableCells

fontSize

foreColor

formatBlock

formatInline

insertHTML

insertImage

insertLineBreak

insertOrderedList

insertUnorderedList

italic

justifyCenter

justifyLeft

justifyRight

underline

Clone this wiki locally