Available in the OSS Version
HTML Editor - Overview
The igHtmlEditor control is a jQuery HTML editor control that features standard HTML editing capabilities.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Formatting options include font face,
font size, text and image alignment and link and table support. You can customize the toolbars and buttons
to add additional functionality to the interface. See the complete list of samples in the menu.
Code View
Copy to Clipboard
var height = $('html').hasClass('touch') ? 500 : 430,
contentText = "<img src=\"../images/samples/html-editor/ig-html-editor-shutterstock.jpg\" width=\"300px\" height=\"auto\">" +
"<div style=\"width:50%\">" +
"<table height=\"139\" border=\"1\" width=\"100%\">" +
"<tbody><tr><td><font size=\"2\" style=\"font-weight: bold;\">Property</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Portland Cement</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Siliceous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Calcareous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\">Slag Cement <br></font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Silica Fume</font></td></tr><tr><td><font size=\"2\">Specific surface*<br>(m2/kg)</font></td><td style=\"text-align: right;\"><font size=\"2\">370</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">400</font></td><td style=\"text-align: right;\"><font size=\"2\">15.000-30.000</font></td></tr><tr><td><font size=\"2\">Specific gravity<br></font></td><td style=\"text-align: right;\"><font size=\"2\">3.15</font></td><td style=\"text-align: right;\"><font size=\"2\">2.38</font></td><td style=\"text-align: right;\"><font size=\"2\">2.65</font></td><td style=\"text-align: right;\"><font size=\"2\">2.94</font></td><td style=\"text-align: right;\"><font size=\"2\">2.22</font></td></tr><tr><td><font size=\"2\">General use<br>in concrete Primary</font></td><td><font size=\"2\">Primary<br>binder</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Property<br>enhancer</font></td></tr>" +
"</tbody>" +
"</table>" +
"<font size=\"2\"><div style=\"text-align: center;\"><span style=\"font-weight: bold;\">Table 1. Components of Cement</span>" +
"</div><br></font><span style=\"font-style: italic;\">*Specific surface measurements for silica fume by nitrogen adsorption (BET) method, others by air permeability method (Blaine).</span></div><br><br>";
var $igTBar = null;
$("#htmlEditor").igHtmlEditor({
height: height,
width: "100%",
customToolbars: [
{
name: "DeleteContentButton",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
name: "appendDeleteButton",
type: "button",
handler: appendDeleteButton,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Clear all content",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-clear-content",
action: '_buttonIconAction'
}
}
}]
}]
});
$("#htmlEditor").igHtmlEditor("setContent", contentText, "html");
changeToolbarsPosition();
function appendDeleteButton(ui) {
$("#htmlEditor").igHtmlEditor("setContent", "", "html");
}
function changeToolbarsPosition() {
$($("#htmlEditor").find("span[id*='insertObjectToolbar'].ui-igtoolbar")).insertAfter($("#htmlEditor").find("span[id*='textToolbar'].ui-igtoolbar"));
}
<div id="htmlEditor"></div>
span.ui-icon.ui-icon-clear-content {
background-image: url('../../igniteui/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
background-position: -177px -97px;
}
/* Override sample's browser styles */
#htmlEditor h1, #htmlEditor h2, #htmlEditor h3, #htmlEditor h4, #htmlEditor h5, #htmlEditor h6 { margin: 0px; }
#htmlEditor h1 { font-size: 1.9em; }
#sampleContainer { overflow: visible; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
span.ui-icon.ui-icon-clear-content {
background-image: url('http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
background-position: -177px -97px;
}
/* Override sample's browser styles */
#htmlEditor h1, #htmlEditor h2, #htmlEditor h3, #htmlEditor h4, #htmlEditor h5, #htmlEditor h6 { margin: 0px; }
#htmlEditor h1 { font-size: 1.9em; }
#sampleContainer { overflow: visible; }
</style>
<div id="htmlEditor"></div>
<script>
$(function () {
var height = $('html').hasClass('touch') ? 500 : 430,
contentText = "<img src=\"../images/samples/html-editor/ig-html-editor-shutterstock.jpg\" width=\"300px\" height=\"auto\">" +
"<div style=\"width:50%\">" +
"<table height=\"139\" border=\"1\" width=\"100%\">" +
"<tbody><tr><td><font size=\"2\" style=\"font-weight: bold;\">Property</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Portland Cement</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Siliceous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Calcareous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\">Slag Cement <br></font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Silica Fume</font></td></tr><tr><td><font size=\"2\">Specific surface*<br>(m2/kg)</font></td><td style=\"text-align: right;\"><font size=\"2\">370</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">400</font></td><td style=\"text-align: right;\"><font size=\"2\">15.000-30.000</font></td></tr><tr><td><font size=\"2\">Specific gravity<br></font></td><td style=\"text-align: right;\"><font size=\"2\">3.15</font></td><td style=\"text-align: right;\"><font size=\"2\">2.38</font></td><td style=\"text-align: right;\"><font size=\"2\">2.65</font></td><td style=\"text-align: right;\"><font size=\"2\">2.94</font></td><td style=\"text-align: right;\"><font size=\"2\">2.22</font></td></tr><tr><td><font size=\"2\">General use<br>in concrete Primary</font></td><td><font size=\"2\">Primary<br>binder</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Property<br>enhancer</font></td></tr>" +
"</tbody>" +
"</table>" +
"<font size=\"2\"><div style=\"text-align: center;\"><span style=\"font-weight: bold;\">Table 1. Components of Cement</span>" +
"</div><br></font><span style=\"font-style: italic;\">*Specific surface measurements for silica fume by nitrogen adsorption (BET) method, others by air permeability method (Blaine).</span></div><br><br>";
var $igTBar = null;
$("#htmlEditor").igHtmlEditor({
height: height,
width: "100%",
customToolbars: [
{
name: "DeleteContentButton",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
name: "appendDeleteButton",
type: "button",
handler: appendDeleteButton,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Clear all content",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-clear-content",
action: '_buttonIconAction'
}
}
}]
}]
});
$("#htmlEditor").igHtmlEditor("setContent", contentText, "html");
changeToolbarsPosition();
});
function appendDeleteButton(ui) {
$("#htmlEditor").igHtmlEditor("setContent", "", "html");
}
function changeToolbarsPosition() {
$($("#htmlEditor").find("span[id*='insertObjectToolbar'].ui-igtoolbar")).insertAfter($("#htmlEditor").find("span[id*='textToolbar'].ui-igtoolbar"));
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'basic-usage.ts' ).then( null, console.error.bind( console ) );
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgHtmlEditor } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
declare var northwindProducts: Array<any>;
@Component({
selector: 'my-app',
template: "<ig-html-editor [(options)]='gridOptions' [(widgetId)]='id'></ig-html-editor>"
})
export class AppComponent {
private editorOptions: IgHtmlEditor;
private id: string;
private height: number;
private contextText: string;
@ViewChild("htmlEditor") htmlEditor: IgHtmlEditor;
constructor() {
this.id = "htmlEditor";
this.height = $('html').hasClass('touch') ? 500 : 430;
this.contentText = '<img src=\"../images/samples/html-editor/ig-html-editor-shutterstock.jpg\" width=\"300px\" height=\"auto\">' +
'<div style=\"width:50%\">' +
'<table height=\"139\" border=\"1\" width=\"100%\">' +
'<tbody><tr><td><font size=\"2\" style=\"font-weight: bold;\">Property</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Portland Cement</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Siliceous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Calcareous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\">Slag Cement <br></font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Silica Fume</font></td></tr>' +
'<tr><td><font size=\"2\">Specific surface*<br>(m2/kg)</font></td><td style=\"text-align: right;\"><font size=\"2\">370</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">400</font></td><td style=\"text-align: right;\"><font size=\"2\">15.000-30.000</font></td></tr>' +
'<tr><td><font size=\"2\">Specific gravity<br></font></td><td style=\"text-align: right;\"><font size=\"2\">3.15</font></td><td style=\"text-align: right;\"><font size=\"2\">2.38</font></td><td style=\"text-align: right;\"><font size=\"2\">2.65</font></td><td style=\"text-align: right;\"><font size=\"2\">2.94</font></td><td style=\"text-align: right;\"><font size=\"2\">2.22</font></td></tr>' +
'<tr><td><font size=\"2\">General use<br>in concrete Primary</font></td><td><font size=\"2\">Primary<br>binder</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Property<br>enhancer</font></td></tr>' +
'</tbody>" +
'</table>' +
'<font size=\"2\"><div style=\"text-align: center;\">' +
'<span style=\"font-weight: bold;\">Table 1. Components of Cement</span>' +
'</div><br>' +
'</font><span style=\"font-style: italic;\">*Specific surface measurements for silica fume by nitrogen adsorption (BET) method, others by air permeability method (Blaine).</span>' +
'</div><br><br>';
this.editorOptions = {
height: height,
width: "100%",
customToolbars: [
{
name: "DeleteContentButton",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
name: "appendDeleteButton",
type: "button",
handler: this.appendDeleteButton,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Clear all content",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-clear-content",
action: '_buttonIconAction'
}
}
}]
}]
};
};
this.htmlEditor.setContent(this.contentText, "html");
this.changeToolbarsPosition();
appendDeleteButton(ui) {
this.htmlEditor.setContent("", "html");
}
changeToolbarsPosition() {
$(this.htmlEditor.widget().find("span[id*='insertObjectToolbar'].ui-igtoolbar")).insertAfter(this.htmlEditor.widget().find("span[id*='textToolbar'].ui-igtoolbar"));
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, IgHtmlEditor],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<div id="app">
<script type="text/babel">
let App = React.createClass({
render: function() {
let contentText = '<img src=\"../images/samples/html-editor/ig-html-editor-shutterstock.jpg\" width=\"300px\" height=\"auto\">' +
'<div style=\"width:50%\">' +
'<table height=\"139\" border=\"1\" width=\"100%\">' +
'<tbody><tr><td><font size=\"2\" style=\"font-weight: bold;\">Property</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Portland Cement</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Siliceous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Calcareous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\">Slag Cement <br></font></td><td><font size=\"2\" style=\"font-weight: bold;\"> Silica Fume</font></td></tr>' +
'<tr><td><font size=\"2\">Specific surface*<br>(m2/kg)</font></td><td style=\"text-align: right;\"><font size=\"2\">370</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">400</font></td><td style=\"text-align: right;\"><font size=\"2\">15.000-30.000</font></td></tr>' +
'<tr><td><font size=\"2\">Specific gravity<br></font></td><td style=\"text-align: right;\"><font size=\"2\">3.15</font></td><td style=\"text-align: right;\"><font size=\"2\">2.38</font></td><td style=\"text-align: right;\"><font size=\"2\">2.65</font></td><td style=\"text-align: right;\"><font size=\"2\">2.94</font></td><td style=\"text-align: right;\"><font size=\"2\">2.22</font></td></tr>' +
'<tr><td><font size=\"2\">General use<br>in concrete Primary</font></td><td><font size=\"2\">Primary<br>binder</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Property<br>enhancer</font></td></tr>' +
'</tbody>" +
'</table>' +
'<font size=\"2\"><div style=\"text-align: center;\">' +
'<span style=\"font-weight: bold;\">Table 1. Components of Cement</span>' +
'</div><br>' +
'</font><span style=\"font-style: italic;\">*Specific surface measurements for silica fume by nitrogen adsorption (BET) method, others by air permeability method (Blaine).</span>' +
'</div><br><br>';
let editorOptions = {
height: $('html').hasClass('touch') ? 500 : 430,
width: "100%",
customToolbars: [
{
name: "DeleteContentButton",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
name: "appendDeleteButton",
type: "button",
handler: this.appendDeleteButton,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Clear all content",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-clear-content",
action: '_buttonIconAction'
}
}
}]
}]
},
$('htmlEditor').igHtmlEditor("setContent", this.contentText, "html");
this.changeToolbarsPosition();
appendDeleteButton: function(ui) {
$('htmlEditor').igHtmlEditor("setContent", "", "html");
}
changeToolbarsPosition: function() {
$($('htmlEditor').find("span[id*='insertObjectToolbar'].ui-igtoolbar")).insertAfter($('htmlEditor').find("span[id*='textToolbar'].ui-igtoolbar"));
}
return (<IgHtmlEditor id="htmlEditor" options={editorOptions} />);
}
});
ReactDOM.render(
<App />,
document.getElementById("app")
);
</script>
</div>
</body>
</html>