TinyMCE 8 with Line Number Language and Copy Button

JavaScript
1

Hi Sitepoint friends,

I’ve been making progress toward my goal of integrating the TinyMCE text editor. I’m using the self-hosted version 8.0.2, and while I’m happy with several aspects of it, I haven’t yet been able to achieve everything I’m aiming for.

The challenge I’m facing is understanding the “TinyMCE way” of doing things. I’m not sure whether I should be applying changes through TinyMCE’s commands and configuration options, or by directly modifying the local HTML, CSS, and JavaScript.

What I’m trying to build is a code editor that:

  • Displays line numbers

  • Shows the language label

  • Includes a “copy code” button

I’ve hardcoded a version that works when the page loads, but it doesn’t render the way I expect when new code blocks are added via menus and tools. Also, here the local version does not show in the Pen. I suspect this is due to differences in my local setup. On my setup, the language label does appear in the top right, and there’s a button that says “true” (not “copy”) — but the line numbers seem to be hidden (here also). I know they’re there because I inspected the DOM and saw them briefly flash when I refreshed the page (picture).

If anyone has experience with this or knows the best way to get Prism.js and TinyMCE working together properly, I’d really appreciate your help or guidance.

Thanks so much!

hiddenLN
hiddenLN816×427 36.4 KB

2

With regards the codepen, the console is logging an error of

tinymce.min.js:25 A valid API key is required to continue using TinyMCE.

*Please alert the admin* to check the current API key.

Read to learn more:....

This might explain why features like line numbers are briefly being shown and removed again.

3

Hi, thanks for the reply. I guess to post a pen, I must get an API key. I am using the hosted version. I do not need one when I am working with the hosted version. I do not get that API key error. I think the line numbers are not showing due to some styling that I do not understand. The other stuff that is not showing up could be what you say. Thanks

4

here is a *.zip of the whole working TinyMCE test configuration. I have this running in a Docker server. It does not need a API key because it is the self-hosted version that authorizes with license_key: ‘gpl’, line in the code. Thanks for any help

2509161052_ccs_flashingLN.zip (1.1 MB)