While visual editing is great for most content creation, sometimes you need precise control over your HTML within a CMS, whether it's for troubleshooting, adding custom elements, or fine-tuning your page structure. TinyMCE has a plugin for that called Code. We'll add it to the plugins option, and then throw it at the end of the toolbar. In the browser now, we can click these code brackets right here, to edit the source code of her page.
But this is kind of difficult to look at. There is absolutely no syntax highlighting or any indentation for legibility. Let's improve this experience. First, let's change the code plugin to ADV code, short for Advanced Code.
We can leave the toolbar code item exactly as it is. This time when I click on the source code All right. Yeah, that's a much easier structure to understand Plus there are some other features that you get like the ability to zoom in and out and a dark mode Who doesn't love a good dark mode? By default the advanced code editor opens in a dialog window While this works, it can be nicer to edit the code right within the existing editor space we can enable this feature with one simple configuration called ADV code underscore inline, and we'll set its value to true.
This time when we click the view code button, the editor transforms in place, giving us a seamless editing experience. The advanced code editor is a powerful tool that bridges the gap between visual editing and code control. Whether you're a content creator who occasionally needs to tweak HTML, or a developer maintaining the system, having proper code editing capabilities makes your CMS more robust and flexible. While visual editing is great for most content creation, sometimes you need precise control over your HTML within a CMS, whether it's for troubleshooting, adding custom elements, or fine-tuning your page structure.
TinyMCE has a plugin for that called Code. We'll add it to the plugins option, and then throw it at the end of the toolbar. In the browser now, we can click these code brackets right here, to edit the source code of her page. But this is kind of difficult to look at.
There is absolutely no syntax highlighting or any indentation for legibility. Let's improve this experience. First, let's change the code plugin to ADV code, short for Advanced Code. We can leave the toolbar code item exactly as it is.
This time when I click on the source code All right. Yeah, that's a much easier structure to understand Plus there are some other features that you get like the ability to zoom in and out and a dark mode Who doesn't love a good dark mode? By default the advanced code editor opens in a dialog window While this works, it can be nicer to edit the code right within the existing editor space we can enable this feature with one simple configuration called ADV code underscore inline, and we'll set its value to true. This time when we click the view code button, the editor transforms in place, giving us a seamless editing experience.
The advanced code editor is a powerful tool that bridges the gap between visual editing and code control. Whether you're a content creator who occasionally needs to tweak HTML, or a developer maintaining the system, having proper code editing capabilities makes your CMS more robust and flexible.