Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 144733 | May 20,2019 12:12 PM UTC | May 21,2019 12:47 PM UTC | Angular | 1 |
|
Tags: ejRibbon |
|
<div class="cols-sample-area" style="width:100%">
<div>
<div id="defaultRibbon"></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>
</div> |
|
export class HomeComponent {
constructor() { }
ngOnInit() {
let 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"];
let sample = new ej.Ribbon($("#defaultRibbon"), {
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: "Alignment", alignType: ej.Ribbon.AlignType.Rows, content: [
{
groups: [
{
id: "textindent",
text: "Indent",
toolTip: "Text Indent",
buttonSettings: {
click: "onClick",
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-icon e-ribbon e-indent"
}
},
{
id: "textoudent",
text: "Outdent",
toolTip: "Text Outdent",
enableSeparator: true,
buttonSettings: {
click: "onClick",
contentType: ej.ContentType.ImageOnly,
prefixIcon: "e-icon e-ribbon e-outdent"
}
}],
defaults: {
type: "button",
isBig: false
}
},
.. . . . . . . . . . . . . .
});
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
