HTML Filters

HTML filters will call JavaScript functions (called filter handlers) when generating HTML code and expect those functions to return the HTML code with changes made. They can be used to alter the format of code generated by the editor or to parse basic placeholder tags. For example you could register a filter handler that alters the source code generated by the editor.

You can register new filter handlers from the PHP API when constructing the editor using the addJSHTMLFilter method or from the JavaScript API once the editor is displayed in a browser using the addHTMLFilter method.

To add filters for template tags you should use the templateFilter plugin

Example:

Adding filter handlers from the PHP API:

// Design view filter
$editor->addJSHTMLFilter('design''function (editor, html) {
    return html.replace(/{site_url}/gi, "http://www.wysiwygpro.com");
}'
);

// Source view filter
$editor->addJSHTMLFilter('source''function (editor, html) {
    return html.replace(/http://www.wysiwygpro.com/gi, "{site_url}");
}'
);

Adding filter handlers from the JavaScript API:

// Design view filter
WPro.editors['myEditor'].addHTMLFilter('design', function (editor, html) {
    return html.replace(/{site_url}/gi, "http://www.wysiwygpro.com");
});

// Source view filter
WPro.editors['myEditor'].addHTMLFilter('source', function (editor, html) {
    return html.replace(/http://www.wysiwygpro.com/gi, "{site_url}");
});

List of HTML Filters

Filter Name

Description

rawSource

Filters the raw source code generated by the browser, before the editor parses it.

source

Filters the source code generated by the editor. This is called whenever the editor generates source code, not just when switching to source view.

preview

Filters the code used to display a preview. Alterations affect the preview only, they have no affect on the source code generated by the editor.

design

Filters the code used to display the design view. Alterations are made permanent when switching back to source code or submitting.

syntax

Filters the source code highlighting.

submit

Filters the source code when the form containing the editor is submitted. It is called after the source filter.

When generating source code an editor will first run the code through any rawSource filters, it will then make its own parse of the source code and finally it will run it through any source filters. If the editor is being submitted it will then run the source code through any submit filters.