Versions Compared

Old Version 3

changes.mady.by.user Chun Kang

Saved on

compared with

New Version 4

changes.mady.by.user Chun Kang

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In order to use TinyMCE self-hosted version, you need to download the latest version of TinyMCE package. It can be downloaded at https://www.tiny.cloud/get-tiny/self-hosted/. In my case I just upload all the files to /js 


Below is a basic example based on TinyMCE 5.2.0.

Code Block
<!DOCTYPE html>
<html>
<head>
  <script src="http://kurapa.com/js/tinymce.cachefly.net/4./tinymce.min.js" referrerpolicy="origin"></script>
  <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
  <textarea cols=80 rows=20>Chun Kang is genius !!!</textarea>
</body>
</html>


You can simply hide menu bar and tool bar as below. For more information, please refer to https://www.tiny.cloud/docs/configure/editor-appearance/#menu.

Code Block
<!DOCTYPE html>
<html>
<head>
  <script src="http://kurapa.com/js/tinymce1/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
  	tinymce.init({
  		selector:'textarea',
  		menubar: '',
  		toolbar: ''
  	});
  	
  </script>
</head>
<body>
  <textarea cols=80 rows=20>Chun Kang is genius !!!</textarea>
</body>
</html>


You can also select menu item based on your preference like below

Code Block
<!DOCTYPE html>
<html>
<head>
  mode<script src="http://kurapa.com/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
  	tinymce.init({
  		selector:'textarea',
  		menubar: 'file edit insert format table tools help'
  	});
  	
  </script>
</head>
<body>
  <textarea cols=80 rows=20>Chun Kang is genius !!!</textarea>
</body>
</html>


Changing Skins by "oxide-dark". 

I wanted to find a option can show editor like Sublime Editor, and found a great options as below. This feature is only available for TInyMCE 5.1 and later.

Code Block
<!DOCTYPE html>
<html>
<head>
  <script src="http://kurapa.com/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
  	tinymce.init({
  		selector:'textarea',
  		menubar: '',
  		toolbar: '',
  		skin: 'oxide-dark',
  		content_css: 'dark'
  	});
  	
  </script>
</head>
<body>
  <textarea cols=80 rows=20 style="background-color:orange;">Chun Kang is genius !!!</textarea>
</body>
</html>textareas",
		theme: "modern",
   		add_unload_trigger: false,
		autosave_ask_before_unload: false,
		menubar: false,
		toolbar_items_size: 'small',
		force_br_newlines : true,
		forced_root_block : ""
	});
</script>

<textarea width=60 height=20>Write something</textarea>