Skip to Content

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:

 

 

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