Skip to Content
Author's profile photo Amit Diwane

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:

 

 

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabi Zamani
      Nabi Zamani

      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

       

      Author's profile photo Amit Diwane
      Amit Diwane
      Blog Post Author

      Thanks for all your input Nabi 🙂

      Author's profile photo Liam Smith
      Liam Smith

      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.