sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = sap.ui.core.UIComponent.extend("sap.ui.richtexteditor.sample.RichTextEditor.Component", {
metadata: {
rootView: "sap.ui.richtexteditor.sample.RichTextEditor.RichTextEditor",
dependencies: {
libs: [
"sap.m",
"sap.ui.richtexteditor"
]
},
config: {
sample: {
files: [
"RichTextEditor.view.xml",
"RichTextEditor.controller.js"
]
}
}
}
});
return Component;
})
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>RichTextEditor with custom Superscript and Subscript buttons</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.ui.richtexteditor.sample.RichTextEditor": "./", "sap.ui.demo.mock": "mockdata"}'
></script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages : [
new sap.m.Page({
title : "RichTextEditor with a custom toolbar",
enableScrolling : true,
content : [
new sap.ui.core.ComponentContainer({
name : "sap.ui.richtexteditor.sample.RichTextEditor",
settings : {
id : "sap.ui.richtexteditor.sample.RichTextEditor"
}
})
]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application"></body>
</html>
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
"use strict";
var PageController = Controller.extend("sap.ui.richtexteditor.sample.RichTextEditor.RichTextEditor", {
onInit: function() {
var sHtmlValue =
'<p style="text-align: justify; background: white; font-size: 10pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 10.5pt; font-family: sans-serif; color: black;">Lorem ipsum dolor sit amet</span></strong>' +
'<span style="font-size: 10.5pt; font-family: sans-serif; color: black;">, consectetur adipiscing elit. Suspendisse ornare, nibh nec gravida tincidunt, ipsum quam venenatis nisl, vitae venenatis urna sem eget ipsum. Ut cursus auctor leo et vulputate. ' +
'Curabitur nec pretium odio, sed auctor felis. In vehicula, eros aliquam pharetra mattis, ante mi fermentum massa, nec pharetra arcu massa finibus augue. </span></p> ' +
'<p style="margin: 0in 0in 11.25pt; text-align: justify; background: white; font-size: 10pt; font-family: Calibri, sans-serif;"><img style="float: left; padding-right: 1em;" src="http://monliban.org/images/1473838236_274706_l_srgb_s_gl_465881_large.jpg" width="304" height="181" />' +
'<span style="font-size: 10.5pt; font-family: sans-serif; color: #0070c0;">Phasellus imperdiet metus est, in luctus erat fringilla ut. In commodo magna justo, sit amet ultrices ipsum egestas quis.</span><span style="font-size: 10.5pt; font-family: sans-serif; color: black;"> ' +
'Nullam ac mauris felis. Sed tempor odio diam, nec ullamcorper lacus laoreet vitae. <strong>Aenean quam libero</strong>, varius eu ex eu, aliquet fermentum orci. Donec eget ante sed enim pretium tempus. <strong><em>Aliquam semper neque eu aliquam dictum</em></strong>. ' +
'Nulla in convallis diam. Fusce molestie risus nec posuere ullamcorper. Fusce ut sodales tortor. <u>Morbi eget odio a augue viverra semper.</u></span></p>' +
'<p style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Fusce dapibus sodales ornare. ' +
'Nullam ac mauris felis. Sed tempor odio diam, nec ullamcorper lacus laoreet vitae. Aenean quam libero, varius eu ex eu, aliquet fermentum orci. Donec eget ante sed enim pretium tempus. Nullam laoreet metus ac enim placerat, nec tempor arcu finibus. ' +
'Curabitur nec pretium odio, sed auctor felis. Nam eu neque faucibus, pharetra purus id, congue elit. Phasellus neque lectus, gravida at cursus at, pretium eu lorem. </span></p>' +
'<ul>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Nulla non elit hendrerit, auctor arcu sit amet, tempor nisl.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Morbi sed libero pulvinar, maximus orci et, hendrerit orci.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Phasellus sodales enim nec sapien commodo mattis.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Integer laoreet eros placerat pharetra euismod.</span></li>' +
'</ul>' +
'<p style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #c00000;">Ut vitae commodo ante. Morbi nibh dolor, ullamcorper sed interdum id, molestie vel libero. ' +
'Proin volutpat dui eget ipsum scelerisque, a ullamcorper ipsum mattis. Cras sed elit sit amet diam convallis vehicula vitae ut nisl. Ut ornare dui ligula, id euismod lectus eleifend at. Nulla facilisi. In pharetra lectus et augue consequat vestibulum.</span></p>' +
'<ol>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Proin id eros vel libero maximus dignissim ac et velit.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">In non odio pharetra, dapibus augue quis, laoreet felis.</span></li>' +
'</ol>' +
'<p style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Donec a consectetur libero. Donec ut massa justo. Duis euismod varius odio in rhoncus. Nullam sagittis enim vel massa tempor, ' +
'ut malesuada libero mollis. Vivamus dictum diam diam, quis rhoncus ex congue vel.</span></p>' +
'<p style="text-align: center; font-size: 10pt; font-family: Calibri, sans-serif;" align="center"><em><span style="font-family: sans-serif; color: #a6a6a6;">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</span></em></p>' +
'<p style="text-align: right; font-size: 10pt; font-family: Calibri, sans-serif;" align="right"><span style="font-family: sans-serif; color: #353535;">-</span> <strong><span style="font-family: sans-serif; color: #353535;">Sed in lacus dolor.</span></strong></p>';
console.log(this);
sap.ui.require(["sap/ui/richtexteditor/RichTextEditor"],
function(RTE) {
var oRichTextEditor = new RTE("myRTE", {
editorType: sap.ui.richtexteditor.EditorType.TinyMCE4,
width: "100%",
height: "600px",
customToolbar: true,
showGroupFont: true,
showGroupLink: false,
showGroupInsert: false,
value: sHtmlValue
});
this.getView().byId("idVerticalLayout").addContent(oRichTextEditor);
var oButtonSuperScript = new sap.m.Button("buttonSupercript", {
text: "Superscript",
icon: "sap-icon://eraser",
press: this.onSuperScriptPress.bind(this)
});
var oButtonSubScript = new sap.m.Button("buttonSubscript", {
text: "Subscript",
icon: "sap-icon://edit",
press: this.onSubScriptPress.bind(this)
});
oRichTextEditor.addCustomButton(oButtonSuperScript);
oRichTextEditor.addCustomButton(oButtonSubScript);
sap.ui.getCore().applyChanges();
}.bind(this));
},
_getEditor: function() {
return sap.ui.getCore().byId("myRTE");
},
_executeEditorCommand: function(sCommand) {
this._getEditor()._oEditor.editorCommands.execCommand(sCommand);
},
onSuperScriptPress: function() {
this._executeEditorCommand('Superscript');
},
onSubScriptPress: function() {
this._executeEditorCommand('Subscript');
},
});
return PageController;
});
<mvc:View controllerName="sap.ui.richtexteditor.sample.RichTextEditor.RichTextEditor" xmlns="sap.m" xmlns:rte="sap.ui.richtexteditor"
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc">
<l:VerticalLayout id="idVerticalLayout" class="sapUiContentPadding" width="100%"></l:VerticalLayout>
</mvc:View>