TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?) Topic is solved

This forum is for general questions about extensions for Joomla! 4.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
User avatar
fada
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 07, 2010 5:57 pm
Location: Brussels (Belgium)
Contact:

TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by fada » Fri Sep 17, 2021 7:12 am

Hi there! I was thinking that J!4 would be a good opportunity for me (and possibly for others) to switch back to the native Editor, being TinyMCE :)

But apparently Syntax Highlighting is not available in TinyMCE (when editing an article I mean - I am not speaking about Syntax Highlighting when you insert code snippets inside an article).

So I was happy to see that there is an Advanced Code Editor plugin for TinyMCE:
https://www.tiny.cloud/docs/enterprise/advcode/
https://www.tiny.cloud/tinymce/features ... ode-editor

... but it seems that it costs $ 348 / year (or more if you take a higher plan or if you pay monthly).
This can't be. I must have missed something, haven't I???

(alternatively, an Editor Switcher or something could also do the trick if TinyMCE really costs $ 348+ / year :D  )
Last edited by imanickam on Tue Sep 28, 2021 7:40 am, edited 1 time in total.
Reason: Moved topic » from General Questions/New to Joomla! 4.x to Extensions for Joomla! 4.x
Marc DECHEVRE | Woluweb | https://slides.woluweb.be

User avatar
ltheme
Joomla! Guru
Joomla! Guru
Posts: 631
Joined: Wed Dec 04, 2013 2:43 pm
Location: US
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by ltheme » Fri Sep 17, 2021 12:59 pm

HI,
I see your mean, but I think it's just 'nice-to-have' feature, not for end-user, but developer :)
Steve (Mr.) - Fan of Joomla! CMS over 10 years
https://ltheme.com/joomla-templates/ <= 120+ Joomla! templates
https://ltheme.com/free-one-page-joomla-templates/ <= 80+ Landing Joomla templates
^Compatible with Joomla! 3.x and Joomla! 4

User avatar
fada
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 07, 2010 5:57 pm
Location: Brussels (Belgium)
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by fada » Fri Sep 17, 2021 1:16 pm

I promise, even for end user it is useful :)
If they have to add a class, if they want to search&replace, if they want to fix an issue with div/span/p, whatever.

Or even for myself as integrator: I need an editor (I would not type all the HTML from scratch, right?) but I go very very often in the HTML to improve things, add a div, a class, a fontawesome icon, etc.

There is an Option in TinyMCE Plugin for Joomla to add Plugins. I am just asking how to add a Syntax Highlighting plugin ;)
It could be https://pluginza.com/plugins/codemirror or anything else.
It could maybe even be a link to the existing codemirror of Joomla it that can work
Marc DECHEVRE | Woluweb | https://slides.woluweb.be

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 457
Joined: Tue Jun 30, 2020 12:17 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Pavel-ww » Fri Sep 17, 2021 4:16 pm

fada wrote:
Fri Sep 17, 2021 1:16 pm
I promise, even for end user it is useful :)
If they have to add a class, if they want to search&replace, if they want to fix an issue with div/span/p, whatever.
Hi. For me personally, it is easier and more convenient to do in the desktop code editor, for example, like VS Code.

Ctrl+A > Ctrl+C > Ctrl+V to VS Code > Edit > Ctrl+A > Ctrl+C > Ctrl+V back to Joomla editor.

Try and maybe you will like it, instead of try to find not comfortable things, which will never be equal to the desktop editor.

User avatar
fada
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 07, 2010 5:57 pm
Location: Brussels (Belgium)
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by fada » Fri Sep 17, 2021 4:28 pm

Txs Pavel.
I even have PhpStorm on my computer. But the idea is not to ask my end users (who are not dumb and can from time to time switch to HTML) to buy a PhpStorm licence or to install VS Code.
The idea is really to make people happy with Joomla itself ;)
Marc DECHEVRE | Woluweb | https://slides.woluweb.be

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 457
Joined: Tue Jun 30, 2020 12:17 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Pavel-ww » Fri Sep 17, 2021 4:51 pm

A good code editor is demanding of resources. I tried many different WYSIWYG editors, both paid and free. Including Advanced Code Editor Plugin for Tinymce. None of them seemed to me convenient and enjoying sufficient possibilities. And I think it will never happen because of the demand for resources. Or at least until the era of quantum computers comes.

VS Code Is free and is not inferior to PhpStorm in capabilities. Write down one little video lesson for your users and they will be grateful ;)

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12243
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by brian » Fri Sep 17, 2021 6:05 pm

I can see the usefulness of having pretty-printed source code. I will take a look at the pluginza thing you mention although I dont see any plugin to download there.
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

User avatar
AMurray
Joomla! Champion
Joomla! Champion
Posts: 7133
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by AMurray » Fri Sep 17, 2021 10:24 pm

Unless I have missed the point of the conversation here.....

JCE has the code syntax colour-coding (maybe that's the Pro version) but is only a few $$ year (10's of $ not 100's).

Or CodeMirror (the other included editor) - which is code-only not WYSIWYG?
Regards - A Murray

User avatar
ceford
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 246
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by ceford » Fri Sep 17, 2021 11:26 pm

I switch back and forth between TinyMCE and CodeMirror, which has syntax highlighting. I find that enough.

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 457
Joined: Tue Jun 30, 2020 12:17 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Pavel-ww » Sat Sep 18, 2021 8:50 am

AMurray wrote:
Fri Sep 17, 2021 10:24 pm
Unless I have missed the point of the conversation here.....

JCE has the code syntax colour-coding (maybe that's the Pro version) but is only a few $$ year (10's of $ not 100's).

Or CodeMirror (the other included editor) - which is code-only not WYSIWYG?
Hi. Yes, it is in JCE PRO. But my point of view is that even in JCE Pro and others, all this is not convenient - there is no easy to increase the font size, there is no Emmet, no code error highlighting. So I personally prefer to use the desktop editor and do not buy Pro version of any WYSIWYG

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12243
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by brian » Sat Sep 18, 2021 9:00 am

code syntax colour-coding in tinymce would be great. it would save switching editors.
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 477
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Jaydot » Sat Sep 18, 2021 9:18 am

I use Notepad++ with the NppFTP plugin - a simple little FTP client integrated in Notepad++.
It lets me download files from the server, and on save it uploads them again.
You hardly notice this, it "feels" like editing directly on the server.
Easy to set up and a pleasure to work with :).
More info on NppFTP: https://ashkulz.github.io/NppFTP/
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40372
Joined: Sat Apr 05, 2008 9:58 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Webdongle » Sat Sep 18, 2021 9:42 am

How secure are the login details with NppFTP?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12243
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by brian » Sat Sep 18, 2021 9:46 am

@all this is about editing content not files
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 477
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Jaydot » Sat Sep 18, 2021 9:53 am

Webdongle wrote:
Sat Sep 18, 2021 9:42 am
...How secure...
As a long time and very enthusiastic Notepad user, I'm afraid I simply trusted Notepad++ and the plugin dev.
I lack the knowledge to judge the security.
I did make a separate FTP user for NppFTP, whom I remove when I'm no longer developing a site.

brian wrote:
Sat Sep 18, 2021 9:46 am
...this is about editing content not files...
Oh! Of course. I use it for files. For content I use copy-paste.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40372
Joined: Sat Apr 05, 2008 9:58 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Webdongle » Sat Sep 18, 2021 10:16 am

But if a local text editor connects to the server then surely use a text editor that encrypts the password rather than store it in plain text? I use notepad++ but use an ftp program to upload the changed files, I have Keeass 2 to auto fill the ftp password.

Call me paranoid but editing off-line surely needs a mention about security of uploading the changed file.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 457
Joined: Tue Jun 30, 2020 12:17 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Pavel-ww » Sat Sep 18, 2021 10:36 am

Jaydot wrote:
Sat Sep 18, 2021 9:18 am
I use Notepad++ with the NppFTP plugin - a simple little FTP client integrated in Notepad++.
It lets me download files from the server, and on save it uploads them again.
You hardly notice this, it "feels" like editing directly on the server.
Easy to set up and a pleasure to work with :).
More info on NppFTP: https://ashkulz.github.io/NppFTP/
My stack to edit files from server VS Code + SFTP plugin.
Previously, I also used the Notepad & NppFTP plugin. But VS Code to order steeper than Notepad++ :D
How secure are the login details with NppFTP?
FTP settings are stored in the JSON file. It also allows you to use not only the login / password, but also an encrypted file for access (generated on the server side)

User avatar
fada
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 07, 2010 5:57 pm
Location: Brussels (Belgium)
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by fada » Sun Sep 19, 2021 5:36 pm

Discussions about VS Code, PHPStorm, Notepad++, FTP, plugins for FTP, file edition are certainly interesting, but this is not the topic :)

So let's focus back on the current topic:

1. specifically, how to have Syntax Highlighting in TinyMCE. So here is the solution ;)
https://github.com/dgrammatiko/tinyMCE-with-CodeMirror 

2. just one thing I would like to improve: now the Code popup is 800px by 550px. Any clue how to change that default size?

3. for those who would be interested by an Editor Switcher, there was none for J!4 yet.
But since yesterday there is one. See here:
https://forum.joomla.fr/forum/joomla-4- ... ost2031248

4. now that I have discovered that very nice feature of TinyMCE, namely adding "TinyMCE plugins", do you know of any other interesting "TinyMCE plugins" that could be added?
Marc DECHEVRE | Woluweb | https://slides.woluweb.be

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40372
Joined: Sat Apr 05, 2008 9:58 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Webdongle » Sun Sep 19, 2021 7:42 pm

http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12243
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by brian » Mon Sep 20, 2021 6:13 am

That is a list of all the tinymce plugins that are already present in tinymce. Not extra ones that could be added.
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 457
Joined: Tue Jun 30, 2020 12:17 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Pavel-ww » Mon Sep 20, 2021 7:25 am

fada wrote:
Sun Sep 19, 2021 5:36 pm
1. specifically, how to have Syntax Highlighting in TinyMCE. So here is the solution ;)
https://github.com/dgrammatiko/tinyMCE-with-CodeMirror 

3. for those who would be interested by an Editor Switcher, there was none for J!4 yet.
But since yesterday there is one. See here:
https://forum.joomla.fr/forum/joomla-4- ... ost2031248
Hi. Thanks for these things.
fada wrote:
Sun Sep 19, 2021 5:36 pm
2. just one thing I would like to improve: now the Code popup is 800px by 550px. Any clue how to change that default size?
Create css file
J3 : /administrator/templates/isis/css/custom.css
J4 : /administrator/templates/atum/css/user.css

Use following code with your "max-width" value and if need add height property

Code: Select all

.tox-dialog {
	width: 100% !important;
	max-width: 1200px !important;
}

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40372
Joined: Sat Apr 05, 2008 9:58 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Webdongle » Mon Sep 20, 2021 8:49 am

brian wrote:
Mon Sep 20, 2021 6:13 am
That is a list of all the tinymce plugins that are already present in tinymce. Not extra ones that could be added.
Yes it is a reference point.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
fada
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 07, 2010 5:57 pm
Location: Brussels (Belgium)
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by fada » Mon Sep 20, 2021 9:25 am

Pavel-ww wrote:
Mon Sep 20, 2021 7:25 am

Create css file
J3 : /administrator/templates/isis/css/custom.css
J4 : /administrator/templates/atum/css/user.css

Use following code with your "max-width" value and if need add height property

Code: Select all

.tox-dialog {
	width: 100% !important;
	max-width: 1200px !important;
}
Txs Pavel! That works fine :)
(tested only in J4 so far)
Marc DECHEVRE | Woluweb | https://slides.woluweb.be

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12243
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by brian » Mon Sep 20, 2021 2:24 pm

@fada
be aware that the version of tinymce in joomla3 is very old
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

User avatar
fada
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 07, 2010 5:57 pm
Location: Brussels (Belgium)
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by fada » Tue Sep 21, 2021 6:37 am

Txs @brian!

Yes, I *am* aware that Joomla 3 does not run the latest generation of TinyMCE.
Actually, for all my J!3 sites I was using JCE.
But TinyMCE has evolved a lot (drag & drop of image, ...) and we now have a decent Media Manager in J!4, so this are two good reasons to try and get rid of old habits now that J!4 is released and that all my new websites will run J!4 :)
(especially that JCE is based on an old version of TinyMCE, a kind of mix between versions 3 & 4)

Now that we have a nice integration of CodeMirror, I am only left with two questions :

a. by default, the CodeMirror popup is here 800x550 (which is pretty small). Usually, F10 is the shortcut to go full screen. But it does not seem to work here. Is there any way to enable/get this full screen option (note: if not, they using user.css explained above would be the best alternative)

b. the CodeMirror addition above is "custom made" (also bc it reuses the CodeMirror code already available within Joomla). But would it be possible to add easily (without recoding) a plugin like https://pluginza.com/plugins/n1ed for instance (or any other one listed on that site or on any site, I just picked the first one as an example) ?
Marc DECHEVRE | Woluweb | https://slides.woluweb.be

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 457
Joined: Tue Jun 30, 2020 12:17 pm

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by Pavel-ww » Tue Sep 21, 2021 11:33 am

fada wrote:
Tue Sep 21, 2021 6:37 am
But would it be possible to add easily (without recoding) a plugin like https://pluginza.com/plugins/n1ed for instance (or any other one listed on that site or on any site, I just picked the first one as an example) ?
Hi. The installation method is exactly the same as in the case of CodeMirror plugin. n1ed has its own J3 integration. But for J4 I use main integration.
1.jpg
2.jpg
I played a little and deleted. The free version has great limitations.
You do not have the required permissions to view the files attached to this post.
Last edited by Pavel-ww on Tue Sep 21, 2021 12:07 pm, edited 1 time in total.

User avatar
fada
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Oct 07, 2010 5:57 pm
Location: Brussels (Belgium)
Contact:

Re: TinyMCE and Syntax Highlighting ? (if not, an Editor Switcher ?)

Post by fada » Sun Sep 26, 2021 4:57 pm

Note: topic to be followed on https://github.com/joomla/joomla-cms/pull/35647 for the integration in Joomla :)
Txs everybody.
Marc DECHEVRE | Woluweb | https://slides.woluweb.be


Post Reply

Return to “Extensions for Joomla! 4.x”