OSS で利用できる機能
HTML エディター - 概要
igHtmlEditor コントロールは、標準 HTML 編集機能を備えた jQuery HTML エディター コントロールです。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
書式設定オプションは、フォント フェイス、フォント サイズ、テキスト、イメージの調整機能があり、リンクとテーブルをサポートしています。ツールバーおよびボタンをカスタマイズし、インターフェイスに機能を追加できます。
サンプルをすべて表示するには、メニューを参照してください。
コード ビュー
クリップボードへコピー
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: "すべてクリア",
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: "すべてクリア",
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>