enable dark mode in tinymce

Here we have a darkmode verion of tinymce, ahh my eyes feel much better.

The change to version 5 seems quite easy as well, as it uses the same init script as 4 still. 

You need to also include the oxide dark theme css files as well for this to work.

It even seems to use the same colour scheme as this site does in dark mode!

 

HTML

<h2>Add a button to enable the editor</h2>
<p>or you can load it when the doc is ready, on page load</p>
<button class="btn btn-primary mr-1" onclick="load_tinymce_dark('#tinymce-dark');">Load TinyMCE</button>
<button class="btn btn-primary mr-1" onclick="tinymce.remove('textarea');">Remove  TinyMCE</button>
<h2>The Editor Textarea</h2>
<textarea id="tinymce-dark"></textarea>

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/skins/ui/oxide/content.min.css" integrity="sha512-U8A/twP2qv8LP/I9jf9GOI6FioG4BhrB1yMkT6Z+5UI44Z5qhuVeR5Pnh4NATpPPmaPP34gm6GV1roiejydBYQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/skins/ui/oxide-dark/skin.min.css" integrity="sha512-r3IXhPGM2XA8Yqjv5SKfx/3FNWSaAtk6h1TbZh2Oz38Mp+xO1zRGMu2Ek/IF870FyMV2f1Gq5og5i3wYEC5W8w==" crossorigin="anonymous" />  

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/tinymce.min.js" integrity="sha512-sOO7yng64iQzv/uLE8sCEhca7yet+D6vPGDEdXCqit1elBUAJD1jYIYqz0ov9HMd/k30e4UVFAovmSG92E995A==" crossorigin="anonymous"></script>

Javascript

function load_tinymce_dark(idclass) {
      tinymce.init({
          selector: idclass,
          plugins: [ "spellchecker code autolink link image fullscreen searchreplace wordcount visualblocks visualchars insertdatetime media table paste textcolor textpattern emoticons media lists" ],
          toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink image | code | forecolor backcolor | emoticons",
          image_advtab: true,
					skin: "oxide-dark",
					content_css: "dark",
					height: 400,
          /* content_css : "/css/style.css", */
					relative_urls: false,
          convert_urls: false,
          remove_script_host : false
      });
  }

Add a button to enable the editor

or you can load it when the doc is ready, on page load

The Editor Textarea

Other Items in javascript

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 339 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Even if you fall on your face, you're still moving forward.
Victor Kiam