Skip to content

Supported Commands

Jump to bottom Edit New page
tiff edited this page Apr 1, 2012 · 28 revisions

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
Add a custom footer
Add a custom sidebar
Clone this wiki locally