TinyMCE review and settings
Samschtig,12 Dezämber, 2020

Rich text editors (also known as wysiwyg what you see is what you get) are pretty important for every blogging/CMS application, no matter how small. In the past I have been using Medium editor which is pretty good and totally free and open source. I am far from a power user but one the limitations of medium editor was that pasing code and highlighting it has been always a bit of a hit or miss. There were other issues here and there so I decided to try tinyMCE (https://www.tiny.cloud/)

The commercial, cloud edition of TinyMCE is not free but the community edition (self hosted) is so I decided to give it a try. It is certainly a more robust editor with a lot of functionality and options. I have spent a few hours just to gt it to do what I wanted which is :

  • Photos drag and drop
  • Custom font for the editor editing (not a must for everyone but I do like it!)
  • Code samples
  • Possibility to inspect the HTML source code (to fix formatting issues quickly, which was not possible on medium editor)

If you decide for the self hosted, community option you first need to download it https://www.tiny.cloud/get-tiny/self-hosted/ and the add it to the head of your page

<head>
<script src="/public/js/tinymce/tinymce.min.js" referrerpolicy="origin">
</script>
<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital@1&family=Neuton&display=swap" rel="stylesheet">
</head>

as you can see I have also added the google fonts which are not really needed in your form page but would be needed in the display template/page.

The tinyMCE documentation is very comprehensive but some things are not entirely obvious so here is a sample configuration file assumming that you use tinyMCE in the textarea of your form:

<script>
tinymce.init({
selector: 'textarea',
plugins: 'paste, code, link, codesample,',
paste_data_images: true,
height : "500",
toolbar: ' undo redo styleselect fontselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code link codesample',
<!-- customize the tinyMCE look with Neuton as font for th body and Jetbrains mono for the code samples -->
content_style:
  "@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital@1&family=Neuton&display=swap');
body { font-family: Neuton, serif; font-size:20px; } pre[class*=language-] {font-family: JetBrains Mono; font-size:17px; }; ",
 });
</script>

the four plugins added are paste (for the images) code (to display the source code of what we write) link (obviously we need to add links) and codesample for the
code snippets (note that prismjs will be required to display the code highlight). In the content style we customise not only the editor font but also the code blocks typeface by overwriting the property of pre[class*=language-] .

As a result, you will have a fully functional TinyMCE with images drag and drop, code snippets - if you like - custom fonts. Note that images will be passes as blob/base64 so you need to create your own backend code (in NodeJS or whatever you use as backend) to save them and replace the URL. In alternative, TinyMCE allows you to use an API endpoint to upload the images.

So far I am impressed with Tiny and appreciate the business model that is both cloud/subscription based or community/self hosted without further costs. If you are not so worried about code formatting and other small quirks Medium editor is also an excellent alternative.

computer back home