Join Jen Kramer for an in-depth discussion in this video Adding formatting options in TinyMCE and formatting an article, part of Joomla! 3.3 Essential Training: Working with Content.
All right. If we take a look at the pages that we've produced so far, they're just not that interesting-looking. I mean, we've got this home page here going on right now. And our homepage looks something like this. Really not very interesting at all. If we could add some text formatting to this, that would definitely help. If you go into the back end of Joomla! and you hop into the Article Manager and just click on the home article here, it's the first one on the page. You'll notice that on top of our editor we have a few buttons here that can be used to add links to this article, or change alignment of things, or add bullets, or a number of other different formatting options.
But they're fairly limited. This window here, where our text is located, is called TinyMCE. TinyMCE is an editor that is a separate open source project. It's used by a ton of other open source projects. So you can find TinyMCE as an editor in many different kinds of content management systems, or learning management systems and so forth. The way Joomla! has TinyMCE configured by default is in a very basic format, so there's not many buttons here to choose from.
The next thing I want to show you is how we can expand this number of buttons so that we have more formatting options, and then apply them to the Our Hotel article and see if we can make that look a little bit better. To do this, we're going to go to Extensions, Plugin Manager, and we are going to find the TinyMCE plugin. If you just scroll on down here, it's, roughly, almost to the bottom of the page, about five from the bottom here.
So it's called "Editor - TinyMCE." Go ahead and click on that to edit it. What you'll see here is that this is functionality is set to Advanced. There's other options here, like Simple or Extended. Simple has even fewer buttons than what we were just looking at. Extended, guess what, has more buttons. So go ahead and pick Extended. There's other options here you're more than welcome to try out. The Skin, there's only the default option. There is a Mobile Mode.
As the tooltip will tell you, it puts the mobile devices into the Simple functionality with big buttons for easy access. So, if you're going to be editing your Joomla! site from your mobile phone, you probably want big buttons for big, fat fingers. You can go ahead and enable this kind of thing. And so forth. You can take a look at some of these other items. We'll come back to this in a little while for some of these other settings. But the big thing to change here is just the Functionality. Make sure that that is set to Extended. Go ahead and say Save and Close.
Now when we go back to Content, Article Manager, and I'm gonna create a new article by clicking the New button, you'll see that we have many, many, many more icons here, and this will give us some formatting options. Okay. Let us open up the Our Hotel information here. I'm gonna go ahead and copy in our title for Our Hotel. I'll go ahead and copy in all of this wonderful information here, which kind of looks like a laundry list because, you know, this is just your basic information about check-in and check-out times and services and so forth.
We'll make sure we set our category over here to Our Hotel, as well. Now, if I just do a quick save, plain old green button Save here, and if I wanted to feature this, yet another way to feature the article is over here on the right-hand side. There is a switch here to switch this to Featured. I'm gonna set that to Yes and hit Save. When I go to the front end of the website and refresh, I'll see the Our Hotel article here. You see that it's just not that interesting. I mean, I don't even wanna read it. It's just kind of, "Blah, blah, blah," with very little context or something big or bold, or anything that would help me skim through this content.
Now we can go ahead and add some additional formatting to this. To do that, it works pretty much the way you would think. Let's take Arrival Information here. Maybe I want this to be a heading, like an HTML-style heading. I can change that here, through this drop-down. Maybe I'll set that to a Heading 2. What you see here is not necessarily what you get on the front end of the website. That is because the CSS formatting that we have here on the back end may be very, very different than the CSS formatting you get with the template on the front end.
Okay. Let's just make those two things H2s for the moment. If I say Save, just to demonstrate that point, and you refresh, you'll see that Arrival Information and Services and Amenities look very, very different than what you saw in the back end of the website, okay? So just keep that in mind as you format things. This list of services and amenities here, this laundry list of stuff here, maybe that is (slurs word) stay a list, maybe it'll best marked up as a list. We can go ahead and hit our bullet list here.
Right now, because of the way the formatting goes, these are all going to be set up under one bullet. You're gonna have to format those and massage it a little bit. I'm just hitting backspace and return to put bullets into place for these things. All right. We've got that all bulleted. That makes that a little bit easier to read through. Maybe we'll wanna do some things here, like bolding things. Maybe the words "Check-in" we'd like to bold, or "Check-out." We can bold that just by clicking the big B button here. Now, one of the options that I have here on the top, just because you have an option doesn't mean you should use it.
One of the options I have here is the option to underline things. I strongly recommend you stay away from underlining anything on any website. Why? Because when people see an underline, what do they think it is? They think it's a link. So I would encourage you not to underline things on websites. Bold them, italicize them, bold and italicize them, but please don't underline them. Just because you have a button doesn't mean that you should use it. And by the way, for those of you who are HTML-savvy, there are two ways to get to the HTML code for this particular webpage.
The first way is this button right here, the two angle brackets. When you click that, in a modal window, you'll get this source code here for this particular webpage. So you can see your HTML and you can make whatever changes you wanna make to it. The other option is down here at the bottom of the screen. There's a button called Toggle Editor. This will toggle this right here inside of the window for you. There is slight difference between the two buttons. What's happening here, with Toggle Editor? Essentially, you're disabling the TinyMCE editor for the moment and making changes directly in Joomla!, as opposed to the HTML source code button here, where you're still putting your source code through TinyMCE before it gets to Joomla!.
That's a very fine distinction, and those of you who are a little bit more advanced will understand that there are ramifications to that. If you're just starting out in this field, don't worry about it so much. You can use either one of these buttons. But if you try editing the source code and you have issues editing it right here in TinyMCE, do try this other source code button down here at the bottom of the screen. You may wind up getting better results. Okay. As you can see here, we can go through and add whatever other additional formatting we wanna add here to make this article just a little bit more easily skimmed and perhaps a bit more attractive to read.
When you're done with all of this, you can go ahead and hit Save and Close, refresh the front end of your website, and take a quick peek. Maybe you'll like it. Maybe you'll wanna add a little bit more formatting. But by adding the Extended functionality of TinyMCE to your Joomla! website, you'll be able to accomplish more tasks inside of Joomla! and have more options for styling your articles.
Note: For installation and setup instructions, see the course Installing and Running Joomla! 3: Local and Web-Hosted Sites.
- Touring the Joomla! interface
- Creating and editing categories
- Adding links and images to articles
- Creating basic menus
- Adding version control and keywords
- Configuring category lists
- Creating a dropdown menu
- Changing display settings