757 строки
30 KiB
HTML
757 строки
30 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>Essential JS 1 : Ribbon-Knockout</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|||
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/ejthemes/ribbon-css/ej.icons.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
<!--[if gte IE 9]><!-->
|
|||
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
|
|||
|
|
<script src="../scripts/knockout.min.js"></script>
|
|||
|
|
<script src="../scripts/ej.web.all.min.js"></script>
|
|||
|
|
<script src="../scripts/ej.unobtrusive.min.js"></script>
|
|||
|
|
<script src="../scripts/ej.widget.ko.min.js"></script>
|
|||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|||
|
|
<style>
|
|||
|
|
.e-contenteditor {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 220px;
|
|||
|
|
border: 1px solid #D9DFDE;
|
|||
|
|
border-top: 0;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
.e-contenteditor p {
|
|||
|
|
margin: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="content-container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="cols-sample-area">
|
|||
|
|
<div>
|
|||
|
|
<div id="defaultRibbon" data-bind="ejRibbon:({width: '100%',
|
|||
|
|
expandPinSettings:{
|
|||
|
|
toolTip: 'Collapse the Ribbon',
|
|||
|
|
},
|
|||
|
|
collapsePinSettings:{
|
|||
|
|
toolTip: 'Pin the Ribbon',
|
|||
|
|
},
|
|||
|
|
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: 'ribbonmenu', menuSettings: { openOnClick: false } },
|
|||
|
|
tabs: [{
|
|||
|
|
id: 'home', text: 'HOME', groups: [{
|
|||
|
|
text: 'New', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'new',
|
|||
|
|
text: 'New',
|
|||
|
|
toolTip: 'New',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-new',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 60,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Clipboard', alignType: ej.Ribbon.AlignType.Columns, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'paste',
|
|||
|
|
text: 'paste',
|
|||
|
|
toolTip: 'Paste',
|
|||
|
|
splitButtonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-ribbonpaste',
|
|||
|
|
targetID: 'pasteSplit',
|
|||
|
|
buttonMode: 'dropdown',
|
|||
|
|
arrowPosition: ej.ArrowPosition.Bottom,
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.SplitButton,
|
|||
|
|
width: 50,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'cut',
|
|||
|
|
text: 'Cut',
|
|||
|
|
toolTip: 'Cut',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-ribboncut',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'copy',
|
|||
|
|
text: 'Copy',
|
|||
|
|
toolTip: 'Copy',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-ribboncopy',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'clear',
|
|||
|
|
text: 'Clear',
|
|||
|
|
toolTip: 'Clear All',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon clearAll',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 60,
|
|||
|
|
isBig: false
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Font', alignType: 'rows', content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'fontfamily',
|
|||
|
|
toolTip: 'Font',
|
|||
|
|
dropdownSettings: {
|
|||
|
|
dataSource: fontfamily,
|
|||
|
|
text: 'Segoe UI',
|
|||
|
|
select: 'executeAction',
|
|||
|
|
width: 150
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'fontsize',
|
|||
|
|
toolTip: 'FontSize',
|
|||
|
|
dropdownSettings: {
|
|||
|
|
dataSource: fontsize,
|
|||
|
|
text: '1pt',
|
|||
|
|
select: 'executeAction',
|
|||
|
|
width: 65
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.DropDownList,
|
|||
|
|
height: 28
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'bold',
|
|||
|
|
toolTip: 'Bold',
|
|||
|
|
type: ej.Ribbon.Type.ToggleButton,
|
|||
|
|
toggleButtonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
defaultText:'Bold',
|
|||
|
|
activeText:'Bold',
|
|||
|
|
defaultPrefixIcon: 'e-icon e-ribbon bold',
|
|||
|
|
activePrefixIcon: 'e-icon e-ribbon bold',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'italic',
|
|||
|
|
toolTip: 'Italic',
|
|||
|
|
type: ej.Ribbon.Type.ToggleButton,
|
|||
|
|
toggleButtonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
defaultText:'Italic',
|
|||
|
|
activeText:'Italic',
|
|||
|
|
defaultPrefixIcon: 'e-icon e-ribbon e-ribbonitalic',
|
|||
|
|
activePrefixIcon: 'e-icon e-ribbon e-ribbonitalic',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'underline',
|
|||
|
|
text: 'Underline',
|
|||
|
|
toolTip: 'Underline',
|
|||
|
|
type: ej.Ribbon.Type.ToggleButton,
|
|||
|
|
toggleButtonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
defaultText:'Underline',
|
|||
|
|
activeText:'Underline',
|
|||
|
|
defaultPrefixIcon: 'e-icon e-ribbon e-ribbonunderline',
|
|||
|
|
activePrefixIcon: 'e-icon e-ribbon e-ribbonunderline',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'strikethrough',
|
|||
|
|
text: 'strikethrough',
|
|||
|
|
toolTip: 'Strikethrough',
|
|||
|
|
type: ej.Ribbon.Type.ToggleButton,
|
|||
|
|
toggleButtonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
defaultText:'Strikethrough',
|
|||
|
|
activeText:'Strikethrough',
|
|||
|
|
defaultPrefixIcon: 'e-icon e-ribbon strikethrough',
|
|||
|
|
activePrefixIcon: 'e-icon e-ribbon strikethrough',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'superscript',
|
|||
|
|
text: 'superscript',
|
|||
|
|
toolTip: 'Superscript',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-superscripticon',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'subscript',
|
|||
|
|
text: 'subscript',
|
|||
|
|
toolTip: 'Subscript',
|
|||
|
|
enableSeparator: true,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-subscripticon',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
id: 'fontcolor',
|
|||
|
|
text: 'Font Color',
|
|||
|
|
toolTip: 'Font Color',
|
|||
|
|
type: ej.Ribbon.Type.Custom,
|
|||
|
|
contentID:'fontcolor'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'fillcolor',
|
|||
|
|
text: 'Fill Color',
|
|||
|
|
toolTip: 'Fill Color',
|
|||
|
|
type: ej.Ribbon.Type.Custom,
|
|||
|
|
contentID:'fillcolor'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
isBig: false,
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Alignment', alignType: ej.Ribbon.AlignType.Rows, content: [
|
|||
|
|
{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'bullet',
|
|||
|
|
text: 'Bullet Format',
|
|||
|
|
toolTip: 'Bullets',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-bullet',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'number',
|
|||
|
|
text: 'Number Format',
|
|||
|
|
toolTip: 'Numbering',
|
|||
|
|
enableSeparator: true,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-numbericon',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'textindent',
|
|||
|
|
text: 'Indent',
|
|||
|
|
toolTip: 'Text Indent',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-indent',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'textoudent',
|
|||
|
|
text: 'Outdent',
|
|||
|
|
toolTip: 'Text Outdent',
|
|||
|
|
enableSeparator: true,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-outdent',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'sortascending',
|
|||
|
|
text: 'Sort',
|
|||
|
|
toolTip: 'Sort',
|
|||
|
|
enableSeparator: true,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-sort',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'border',
|
|||
|
|
text: 'Border',
|
|||
|
|
toolTip: 'Border',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-border',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
isBig: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'alignleft',
|
|||
|
|
text: 'JustifyLeft',
|
|||
|
|
toolTip: 'Align Left',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon alignleft',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'aligncenter',
|
|||
|
|
text: 'JustifyCenter',
|
|||
|
|
toolTip: 'Align Center',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon aligncenter',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'alignright',
|
|||
|
|
text: 'JustifyRight',
|
|||
|
|
toolTip: 'Align Right',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon alignright',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'justify',
|
|||
|
|
text: 'JustifyFull',
|
|||
|
|
toolTip: 'Justify',
|
|||
|
|
enableSeparator: true,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon justify',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'uppercase',
|
|||
|
|
text: 'Upper Case',
|
|||
|
|
toolTip: 'Upper Case',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-uppercase',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'lowercase',
|
|||
|
|
text: 'Lower Case',
|
|||
|
|
toolTip: 'Lower Case',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.ImageOnly,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-lowercase',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
isBig: false
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Actions', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'undo',
|
|||
|
|
text: 'Undo',
|
|||
|
|
toolTip: 'Undo',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-undo',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'redo',
|
|||
|
|
text: 'Redo',
|
|||
|
|
toolTip: 'Redo',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-redo',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 40,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'View', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'zoomin',
|
|||
|
|
text: 'Zoom In',
|
|||
|
|
toolTip: 'Zoom In',
|
|||
|
|
width: 58,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-zoomin',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'zoomout',
|
|||
|
|
text: 'Zoom Out',
|
|||
|
|
toolTip: 'Zoom Out',
|
|||
|
|
width: 70,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-zoomout',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'fullscreen',
|
|||
|
|
text: 'Full Screen',
|
|||
|
|
toolTip: 'Full Screen',
|
|||
|
|
width: 73,
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-fullscreen',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'insert', text: 'INSERT', groups: [{
|
|||
|
|
text: 'Tables', alignType: ej.Ribbon.AlignType.Columns, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'tables',
|
|||
|
|
text: 'Tables',
|
|||
|
|
toolTip: 'Tables',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-table',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 50,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Illustrations', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'pictures',
|
|||
|
|
text: 'Pictures',
|
|||
|
|
toolTip: 'Pictures',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-picture',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'videos',
|
|||
|
|
text: 'Videos',
|
|||
|
|
toolTip: 'Videos',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-video',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'shapes',
|
|||
|
|
text: 'Shapes',
|
|||
|
|
toolTip: 'Shapes',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-shape',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'charts',
|
|||
|
|
text: 'Charts',
|
|||
|
|
toolTip: 'Charts',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-chart',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 56,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Comments', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'comments',
|
|||
|
|
text: 'Comments',
|
|||
|
|
toolTip: 'Comments',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-comment',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 70,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Text', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'text',
|
|||
|
|
text: 'Text',
|
|||
|
|
toolTip: 'Text',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-text',
|
|||
|
|
width: 50,
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'datetime',
|
|||
|
|
text: 'Date Time',
|
|||
|
|
toolTip: 'DateTime',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-datetimenew',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 70,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Hyperlink', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'hyperlink',
|
|||
|
|
text: 'Hyperlink',
|
|||
|
|
toolTip: 'Hyperlink',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-hyperlink',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 70,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Equation', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'equation',
|
|||
|
|
text: 'Equation',
|
|||
|
|
toolTip: 'Equation',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-equation',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 60,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Print Layout', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'printlayout',
|
|||
|
|
text: 'Print Layout',
|
|||
|
|
toolTip: 'Print Layout',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-printlayout',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 80,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: 'Save', alignType: ej.Ribbon.AlignType.Rows, content: [{
|
|||
|
|
groups: [{
|
|||
|
|
id: 'print',
|
|||
|
|
text: 'Print',
|
|||
|
|
toolTip: 'Print',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-print',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'save',
|
|||
|
|
text: 'Save',
|
|||
|
|
toolTip: 'Save',
|
|||
|
|
buttonSettings: {
|
|||
|
|
contentType: ej.ContentType.TextAndImage,
|
|||
|
|
imagePosition: ej.ImagePosition.ImageTop,
|
|||
|
|
prefixIcon: 'e-icon e-ribbon e-save',
|
|||
|
|
click: 'executeAction'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
defaults: {
|
|||
|
|
type: ej.Ribbon.Type.Button,
|
|||
|
|
width: 50,
|
|||
|
|
height: 70
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}],
|
|||
|
|
create:'createControl'})">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="contenteditor" class="e-contenteditor" contenteditable="true" spellcheck="false">
|
|||
|
|
<p>Integer dui elit, cursus vel metus maximus, dictum semper magna. Donec volutpat porta gravida. Fusce dapibus cursus tellus et pulvinar. Fusce porta dolor eget consectetur ultricies.</p>
|
|||
|
|
<p>Cras et quam scelerisque, blandit lorem a, tristique velit. Quisque sagittis sapien augue. Quisque tincidunt sit amet libero sed luctus.</p>
|
|||
|
|
<p>Pellentesque rutrum mauris mi. Ut rutrum quam ac quam tincidunt elementum. Nullam pulvinar mattis velit, nec rutrum enim laoreet quis.Vestibulum ipsum leo, molestie convallis vehicula at, dictum non purus.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<ul id="ribbonmenu">
|
|||
|
|
<li><a>FILE</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a>New</a></li>
|
|||
|
|
<li><a>Open</a></li>
|
|||
|
|
<li><a>Save</a></li>
|
|||
|
|
<li><a>Save As</a></li>
|
|||
|
|
<li><a>Print</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul id="pasteSplit">
|
|||
|
|
<li><a>Paste</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<input id="fontcolor" />
|
|||
|
|
<input id="fillcolor" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var fontfamily = ["Segoe UI", "Arial", "Times New Roman", "Tahoma", "Helvetica"], fontsize = ["1pt", "2pt", "3pt", "4pt", "5pt"], action1 = ["New", "Clear"], action2 = ["Bold", "Italic", "Underline", "strikethrough", "superscript", "subscript", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyFull", "Undo", "Redo"];
|
|||
|
|
window.ribbonView = {
|
|||
|
|
};
|
|||
|
|
ko.applyBindings(ribbonView);
|
|||
|
|
function executeAction(args) {
|
|||
|
|
var val, prop = args.text;
|
|||
|
|
val = (ej.isNullOrUndefined(args.model.text)) ? args.model.activeText : args.model.text;
|
|||
|
|
if (action1.indexOf(val) != -1)
|
|||
|
|
$("#contenteditor").empty();
|
|||
|
|
else if (action2.indexOf(val) != -1)
|
|||
|
|
document.execCommand(val, false, null);
|
|||
|
|
else if (fontfamily.indexOf(prop) != -1)
|
|||
|
|
document.execCommand("FontName", false, prop);
|
|||
|
|
else if (fontsize.indexOf(prop) != -1)
|
|||
|
|
document.execCommand("FontSize", false, prop.replace("pt", ""));
|
|||
|
|
else
|
|||
|
|
$("#contenteditor").append("<p> Action: " + val + " Triggered </p>");
|
|||
|
|
}
|
|||
|
|
function createControl(args) {
|
|||
|
|
var ribbon = $("#defaultRibbon").data("ejRibbon");
|
|||
|
|
$("#fontcolor").ejColorPicker({ value: "#FFFF00", modelType: "palette", cssClass: "e-ribbon", toolIcon: "e-fontcoloricon", select: colorHandler });
|
|||
|
|
$("#fillcolor").ejColorPicker({ value: "#FF0000", modelType: "palette", cssClass: "e-ribbon", toolIcon: "e-fillcoloricon", select: colorHandler });
|
|||
|
|
}
|
|||
|
|
function colorHandler(args) {
|
|||
|
|
(this._id.indexOf("fillcolor") != -1) ? $("#contenteditor").css('background-color', args.value) : document.execCommand('forecolor', false, args.value);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|