Skip to Content

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:

 

 

To report this post you need to login first.

2 Comments

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

  1. 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

     

    (2) 

Leave a Reply