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

For your information, below example is based on TInyMCE 5.2.0, so it may not work if you use different version of TinyMCE.

 In my case I just upload all the files to /js on my webserver, so tinymce.min.js will be located at /js/tinymce/ usually.

List of content

Basic example to use TinyMCE

Below is a basic example based on TinyMCE 5.2.0.

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/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>

Hiding Benubar and Toolbar

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.

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/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>

Select menu item based on your preference

<!DOCTYPE html>
<html>
<head>
  <script src="/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" just like Sublime Editor

I wanted to find a option can show editor like Sublime Editor for coding test, and found a great options as below. This feature is only available for TInyMCE 5.1 and later. You may able to have more information at https://www.tiny.cloud/docs/general-configuration-guide/customize-ui/#skins

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
  	tinymce.init({
  		selector:'textarea',
  		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>

Making tab key to insert indentation like text editor application

You simply do that by adding nonbreaking to plugins and set nonbreaking_force_tab=true

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
  	tinymce.init({
  		selector:'textarea',
  		plugins: "nonbreaking",
  		nonbreaking_force_tab: true
  	});
  	
  </script>
</head>
<body>
  <textarea>Chun Kang is genius !!!</textarea>
</body>
</html>

Forcing to insert <br> tag for pressing enter key

You can force inserting <br> tag instead of <p> tag when you press enter by foreced_root_block=false

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
        selector:'textarea',
        plugins: 'nonbreaking',
        nonbreaking_force_tab: true,
        forced_root_block: false
    });
     
  </script>
</head>
<body>
  <textarea>Chun Kang is genius !!!</textarea>
</body>
</html>

Changing editor font, font-size, background color, font color

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
        selector:'textarea',
        content_style: 'body { background: black; color: white; font-size: 10pt; font-family: 맑은 고딕체,Calibri,Arial,Sans-serif;; }'
    });
     
  </script>
</head>
<body>
  <textarea>Chun Kang is genius !!!</textarea>
</body>
</html>

Complete set of TinyMCE option for coding testing just like Sublime Editor

<!DOCTYPE html>
<html>
<head>
  <script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
        selector:'textarea',
        plugins: 'nonbreaking',
        menubar: '',
        toolbar: '',
        skin: 'oxide-dark',
        content_css: 'dark',
        nonbreaking_force_tab: true,
        forced_root_block: false
    });
     
  </script>
</head>
<body>
  <textarea>Chun Kang is genius !!!</textarea>
</body>
</html>