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://">
  </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" });

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="justifyCenter">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

For a start, let’s assume that you have a simple web page, you want to make editable with Aloha Editor and you already have placed Aloha Editor on your web server.

This is your web page:

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Getting Started with Aloha Editor</title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body> <div id="main"> <div id="content"><p>Getting started with Aloha Editor!</p></div> </div> </body>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Supported Commands

Supported Commands

bold

createLink

fontSize

foreColor

formatBlock

formatInline

insertHTML

insertImage

insertLineBreak

insertOrderedList

insertUnorderedList

italic

justifyCenter

justifyLeft

justifyRight

underline

Clone this wiki locally