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://">
  </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

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

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