Join Tom Geller for an in-depth discussion in this video Enabling styled text with a WYSIWYG editor, part of Drupal 7 Essential Training.
- View Offline
Now that we know how to work with modules, I'm going to show you how to install a WYSIWYG editor that lets you style text visually. Now that word WYSIWYG is an acronym. It describes what it does. It stands for What You See Is What You Get. This course is almost entirely about Drupal as you get it from drupal.org without adding any modules. But I wanted to include a video about this one for two reasons. First, the lack of a WYSIWYG editor is a huge shortcoming in Drupal that a lot of site designers want to fix. Second installing a WYSIWYG tool is pretty complicated, so doing it gives me an opportunity to help you get used to installing complex tools.
I've already installed the WYSIWYG module, which you can get at drupal.org/project/wysiwyg. If you need any help installing it see the video on finding and installing modules, but to turn it on we just go up to Modules, close the CORE group and there it is, a simple check box, and Save configuration. Once we've done that we see the Configure link, which we'll click to go its configuration page. Now the WYSIWYG module doesn't actually give your site WYSIWYG abilities, Instead it connects Drupal to any of several projects that do and you can see a list of these as you go down. There are quite a few.
There are lots of discussions on drupal.org and elsewhere about which is the best, but for simplicity's sake I'm just going to go with the first one in the list, CKEditor. I found it to be just fine for my purposes. So to get it I'll open up links in two tabs, first this one and this one, and I do that by holding down the Ctrl key while I click. One screen gives me more information about the project generally and the other one gives me a download link. I'll go ahead and download it to my Desktop.
Once it's downloaded, go to your download location. You'll have to uncompress this file. If you're on Windows and you don't have 7-Zip or some other decompression utility you'll need to get one. See the video about using the exercise files for a little more information about that. Now that it's downloaded, I'll double-click it and extract it. So I have the CKEditor itself and I have the WYSIWYG module loaded into my Drupal site, but how do I put the two together? For that I go back to my site and look at the instructions on that page, so we click there and it tells us exactly where to put it.
It should be put in sites /all/libraries/ckeditor. So once again back to my installation, go into sites/all. Oh, there is no folder librarie.s I actually have to create that. Libraries, and then I'll drop this into libraries. Go back and make sure that's what it told me. So the actual library is found at libraries/ckeditor/ckeditor.js. Make sure one more time. sites/all/ libraries/ckeditor and there it is, terrific! Now when I go back to my site and reload the page, I actually have controls so I can make that WYSIWYG editor show up where I want.
However I could go on and install other visual editors. You'll notice that those earlier instructions are under this link here, showing that CKEditor is in fact installed, but that the others aren't. Back up to our controls. We're ready to rock and roll. I'm going to make it appear on filtered HTML and then click Save. So now when we've installed the module and we've installed the CKEditor and we've made it so the CKEditor is applied to all filtered HTML. The last thing we have to do is tell it what commands to make available to all people who have access to that text format.
So I go to Edit and down to Buttons and Plugins. There is a huge number of buttons available. I'm only going to say that I want people to be able to bold and italicize text. So I'll check those, go down to the bottom and Save. Incidentally these other settings are enormously complex, I'm afraid I won't be able to go in to them in this video. But you could of course explore them on your own. Click Save. So what does that actually give us? Basically wherever someone has an opportunity to enter content using the filtered HTML format they now get a toolbar, much like you see in a word processing document.
I'll show you that by creating some content. I go up to Add content and Article. And since this is Filtered HTML, we see our Bold and Italic tab. "This is great." And if I select some text then say Bold, there it is, just as we expect. I'm going to remove this module before continuing with the course but certainly you could continue by making the rich text appear in other text formats. That brings me to a recommendation that you limit use of the editor to specific roles. Unfortunately the WYSIWYG module doesn't have its own permissions. If you click People and PERMISSIONS, you won't find it anywhere on this page.
So the way to limit who uses this rich text editor is to create a new text format as you learned how to do in the video on using text formats to prevent damaging content. Then you limit access to that text format to the roles that you want to be able to use it.
- Comparing Drupal with other content management systems
- Understanding nodes
- Creating basic content
- Adding blogs, discussions groups, and polls
- Subscribing to RSS feeds
- Creating new content types
- Managing users, roles, and permissions
- Creating and modifying block regions
- Adding menus
- Extending site capabilities with modules