TinyMCE Editor with SAPUI5

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

4,399

SAP Managed Tags:
SAP Fiori,
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>