TinyMCE Editor with SAPUI5

TinyMCE Editor is one of the most powerful rich text editors. Moreover, it is open source.

Features of TinyMCE Editor:

Easily Customizable
Extendable
40+ powerful editor features
Robust cross-browser performance
Professional features(spell check, file management etc.) available to our TinyMCE Premium customers

Using TinyMCE Editor with SAP UI5

To include the TinyMCE Rich Text Editor in our SAP UI5 application please go through the below code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Rich Text Editor</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.core"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{"rich.editor": "./"}'>
</script>

<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script>
tinymce.init({
    selector: '#mytextarea',
    schema: 'html5',
	plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste wordcount"
     ],
     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright 
               alignjustify | bullist numlist outdent indent | link image",
     statusbar: false,
     browser_spellcheck: true
});
</script>

<script>
      sap.ui.getCore().attachInit(function () {
			t = new sap.ui.commons.TextArea('mytextarea').placeAt("content2");
                        h = new sap.ui.core.HTML('myhtml').placeAt("content3");
			new sap.m.Button('button',
			     		{text:'Insert',
					 press:function(){
					 	var content = tinymce.get("mytextarea").getContent();
				 		alert(content);
				         	h.setContent(content);
					  }
			 		  }).placeAt("content2");
			new sap.m.Button('button1',
					{text:'Clear',
					 press:function(){
					 	h.setContent("");
					        alert("data Destroyed");
					 }
					 }).placeAt("content2");   
	});
</script>
</head>

<body class="sapUiBody">
	<div id = "content2"></div>
	<div id = "content3"></div>
</body>
</html>

After running the html file we can see the rich text editor within our SAP UI5 Application:

4 Comments

You must be Logged on to comment or reply to a post.

Nabi Zamani

February 21, 2018 at 7:33 am

Thanks for the contribution. I have some additional information:

sap.ui.commons is deprecated - avoid to use it
sap_bluecrystal is deprecated - avoid to use it
No need to add sap.ui.core to data-sap-ui-libs in the bootstrapping
OpenSource does not not mean "free"
You need a license for TinyMCE, see pricing for details
sap.ui.richtexteditor.RichTextEditor is a UI5 control that uses TinyMCE behind the scenes
With a valid SAPUI5 license you can use TinyMCE shipped with SAPUI5
This control is not part of OpenUI5 most probably because of the licensing of TinyMCE

Amit Diwane

Blog Post Author

February 26, 2018 at 8:24 am

Thanks for all your input Nabi 🙂

Liam Smith

May 18, 2020 at 10:39 am

Thanks, Amit for explaining TinyMCE. But the main problem is copy/paste data from TinyMCE you need to install the plugin. I use PasteitCleaned and It’s an amazing plugin that handles copy/paste from Word, Excel, PowerPoint, PDF, Websites, Paint, etc.

Prangya Paramita

September 12, 2022 at 10:59 am

Hi Amit,

I'm trying to load the tinyMCE from xml and controller. It is not giving any error. But the editor is not initializing.

TinyMCE Editor with SAPUI5

Assigned Tags