Skip to content

Supported Commands

Jump to bottom Edit New page
Oliver Pulges edited this page Nov 7, 2013 · 28 revisions

Supported Commands

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

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");

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_bg_color_object": 1
        },
        "keep_styles": {
            "backgroundColor": 1
        },
        "remove_action": "unwrap"
    }
  }
};
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("bgColorStyle", {
  "red": 255,
  "green": 0,
  "blue": 0,
});

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 });

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");

fontSize

  • Generated markup:
    <!-- 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

foreColorStyle

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

  • Generated markup:
    <span style="color:rgba(255,0,0)">text</span>
  • Toolbar element
    <a data-wysihtml5-command="foreColorStyle">BG-Color</a>
<div data-wysihtml5-dialog="foreColorStyle" 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_color_object": {
        "styles": {
          "color": true
        }
      },
  },
  
  tags: {
    "span": {
        "one_of_type": {
            "text_color_object": 1
        },
        "keep_styles": {
            "color": 1
        },
        "remove_action": "unwrap"
    }
  }
};
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("foreColorStyle", {
  "red": 255,
  "green": 0,
  "blue": 0,
});

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

mergeTableCells

When table cells are selected then merges selected cells to one.
If action is executed on allredy merged cell, cell is unmerged

  • Whether table cells selection is active can be tracked with following events:
    editorInstance.on("tableselect", function() {});
editorInstance.on("tableunselect", function() {});
  • Toolbar element:
    <a data-wysihtml5-command="mergeTableCells">Merge</a>
  • Required parser rules:
    var wysihtml5ParserRules = {
  tags: {
    "table": {},
    "td": {
        "check_attributes": {
            "rowspan": "numbers",
            "colspan": "numbers"
        }
    },
    "tr": {},
    "tbody": {}
  }
};
  • Trigger via JavaScript:
    editorInstance.composer.commands.exec("mergeTableCells");

// cell selection status is merged can be tracked:
editorInstance.on("interaction", function() {
  if (composer.commands.state('mergeTableCells')) {
    // selection on merged cell
  }
});
  • 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