| Excerpt |
|---|
Personally I prefer to use self-hosted version of TinyMCE and it can be downloaded at https://www.tiny.cloud/get-tiny/self-hosted/ |
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 . In my case I just upload all the files to /js /js on my webserver, so tinymce.min.js will be located at /js/tinymce/ usually.
List of content
| Table of Contents |
|---|
Basic example to use TinyMCE
...
| Code Block |
|---|
<!DOCTYPE html> <html> <head> <script src="http://kurapa.com/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> |
...
| 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: '' }); </script> </head> <body> <textarea cols=80 rows=20>Chun Kang is genius !!!</textarea> </body> </html> |
...
| 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: 'file edit insert format table tools help'
});
</script>
</head>
<body>
<textarea cols=80 rows=20>Chun Kang is genius !!!</textarea>
</body>
</html> |
...
| 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> |
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
| Code Block |
|---|
<!DOCTYPE html> <html> <head> <script src="http://kurapa.com/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
| Code Block |
|---|
<!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
| Code Block |
|---|
<!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
| Code Block |
|---|
<!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 cols=80 rows=20 style="background-color:orange;">Chun<textarea>Chun Kang is genius !!!</textarea> </body> </html> |
...