Toolkit

TK.HtmlEditor

A basic rich text editor. This is also available as form field type "html". Use the .GetValue() method to retrieve the value as html string.

{
    _: TK.HtmlEditor,
    Data: "Some <strong>example</strong> data"
}

Html editor with specific buttons, custom button and filling the parent container.

{
    style: {
        width: "600px",
        height: "400px"
    },
    Elements: {
        HtmlEditor: {
            _: TK.HtmlEditor,
            FillContainer: true,
            Buttons: ["Bold", "Italic", "Underline", "Custom"],
            ButtonTemplates: {
                Custom: {
                    innerHTML: Svg.Icons.Settings,
                    onclick: function() {
                        alert(this.Near("HtmlEditor").GetValue());
                    }
                }
            }
        }
    }
}

Html editor with inserting image ability

Note, this feature depends on the TK.ImageEditor, TK.Popup and TK.Draw. It requires using the full version.

The image will be embedded in the HTML source using a data: url.

{
    style: {
        width: "600px",
        height: "400px"
    },
    Elements: {
        HtmlEditor: {
            _: TK.HtmlEditor,
            FillContainer: true,
            Buttons: TK.HtmlEditor.Buttons.concat(["InsertImage"])
        }
    }
}