WYSIWYG, Text Formats, and Getting Setup

Video loading...

  • 0:00
    [WYSIWYG, Text Formats, and Getting Setup]
  • 0:02
    [WYSIWYG and Media Management for Drupal 7, Chapter 2 with Kyle Hofmeyer]
  • 0:05
    In this first lesson of the WYSIWYG series
  • 0:07
    I'm going to cover WYSIWYG itself: What You See Is What You Get.
  • 0:10
    I'm going to cover where you get it, how to install it.
  • 0:14
    I'm also going to cover explaining different editors that work with the WYSIWYG module,
  • 0:18
    where you can get those.
  • 0:20
    I'm going to show different configurations.
  • 0:22
    I'm also going to dive into Text Formats
  • 0:24
    because Text Formats and the WYSIWYG module kind of work hand in hand.
  • 0:28
    They give you the ability to create different setups of your editor for different possible roles
  • 0:33
    and users of your website.
  • 0:35
    So I'm pretty much just going to dive right into WYSIWYG,
  • 0:37
    getting it configured, and how it works with Text Formats.
  • 0:41
    In this series I'm going to cover the WYSIWYG module.
  • 0:44
    There's a lot of videos out there--obviously, a ton of them on Drupalize.Me--
  • 0:49
    that cover all this fantastic stuff you can do with Drupal,
  • 0:52
    how to do all those things from theming to coding
  • 0:55
    to the basics of the block system to Views.
  • 0:59
    But a very common question I hear all the time is,
  • 1:02
    "So where's the editor?"
  • 1:04
    Well, the editor is there. You've just got to install it, just like everything else, with a module.
  • 1:10
    Drupal works with a lot of WYSIWYG editors.
  • 1:13
    And just in case it's starting to get a little confusing,
  • 1:15
    WYSIWYG: What You See Is What You Get.
  • 1:18
    It's basically an editor that functions kind of like a word processor in your text areas
  • 1:24
    where a user doesn't have to know how to code to make something bold,
  • 1:27
    to make something italic.
  • 1:29
    Because there's all these editors, Drupal did what it does best
  • 1:32
    and we built a module called the WYSIWYG module.
  • 1:35
    What the WYSIWYG module is is just basically an API for editors to hook into Drupal.
  • 1:42
    If you do some search, there still are some standalone editors,
  • 1:45
    but for best practices let's just use the WYSIWYG module going forward.
  • 1:49
    It's pretty much the way Drupal is headed to keep things organized
  • 1:53
    and to make it so everybody is able to tap into resources through APIs.
  • 1:58
    So again, this series is going to cover this module, the WYSIWYG module,
  • 2:03
    and we're going to go over using this as well as covering media management. Cool.
  • 2:09
    Now that we have a basic understanding of this crazy acronym of WYSIWYG
  • 2:13
    and the fact that we now know one does exist for Drupal,
  • 2:17
    let's learn how to go about installing this.
  • 2:20
    And where do we go about getting it? [www.drupal.org/project/wysiwyg]
  • 2:23
    Obviously, we can download it at drupal.org/project/wysiwyg.
  • 2:27
    I've already got it downloaded, so I'm going to go ahead and install this module.
  • 2:30
    Let's go ahead and do that. Modules. And let's just go until we find it.
  • 2:42
    I've got a lot of things in here because this series is going to go over quite a bit
  • 2:46
    that has to do with WYSIWYG and media management.
  • 2:48
    Okay, here's what we've got right now is the WYSIWYG module.
  • 2:52
    It's all we need to install, and that's all we're going to do.
  • 2:55
    Everything else is configuration-based just to get ourselves an editor.
  • 2:59
    So let's go ahead and click and save the configuration.
  • 3:03
    Now we'll notice under Configuration we now have WYSIWYG profiles.
  • 3:08
    One thing we really, really want to understand
  • 3:10
    is that WYSIWYG profiles also work with Text Formats.
  • 3:15
    We've talked about Text Formats before, but I'm going to talk about them here again.
  • 3:19
    Text Formats are basically different options that you can have across your website
  • 3:24
    within different areas such as text areas
  • 3:28
    that kind of manipulate how the content is rendered out by Drupal.
  • 3:32
    So for instance, inside of a text area if we have it as a filtered HTML,
  • 3:37
    what's going to go on is that as Drupal renders out the page,
  • 3:41
    it's going to go through a couple of processes it calls filters,
  • 3:45
    and it's those filters that are going to strip things out, correct things,
  • 3:49
    all that type of stuff to whatever you put into that text area.
  • 3:53
    This is for security reasons, this is just for good practice of coding.
  • 3:58
    It's also to stop users from doing certain things you don't want them to do.
  • 4:02
    You can customize this and you can create tons of them,
  • 4:05
    and you can have different kinds for different roles.
  • 4:09
    And as you start to add modules, especially in this series,
  • 4:12
    we're going to start getting more filters that we have to enable.
  • 4:16
    So some of the options we do you might not want to enable for one type of Text Format,
  • 4:20
    but you might want to enable it for the other.
  • 4:22
    So let's go see how this is intertwined with the WYSIWYG module.
  • 4:25
    Let's go back to the Configuration, and let's check out our WYSIWYG profiles.
  • 4:29
    Okay, this is the page we're going to get,
  • 4:31
    and we're only going to really technically see this once.
  • 4:35
    It's telling us that we still don't have an editor.
  • 4:38
    And because these editors are open source projects of their own,
  • 4:40
    they can't be packaged in with the WYSIWYG module.
  • 4:43
    It's also a way of them showing you all the different types of editors
  • 4:46
    that you have a potential to use as well as where to download them
  • 4:49
    and what to do and how to download them and then how to install them.
  • 4:53
    It's very, very simple. You just find an editor.
  • 4:56
    You're going to usually download a zip file,
  • 4:58
    you're going to copy that extracted zip file into a folder in your sites/all,
  • 5:03
    you're going to create that folder called libraries and drag it in.
  • 5:06
    And I'm going to show you how to do that.
  • 5:08
    A lot of these editors are great. I've tried them all.
  • 5:11
    This tutorial I'm going to only really cover the TinyMCE module
  • 5:16
    as well as the CKEditor,
  • 5:19
    the main reason being is I've learned by doing a lot of practice,
  • 5:23
    especially for this series, that not all editors have all the same options,
  • 5:29
    not all the editors work properly with WYSIWYG,
  • 5:32
    and some of the editors work differently in browsers.
  • 5:35
    And I'm going to show you 2 major flaws I've found, and we'll cover that later on.
  • 5:41
    But for now I'm just going to go ahead and let's download the CKEditor.
  • 5:44
    This is going to take us to the CKEditor website.
  • 5:46
    We're just going to go ahead and download the latest.
  • 5:49
    Go back. Let's go ahead and go to the TinyMCE.
  • 5:53
    I'm going to download this one.
  • 5:55
    Let's go ahead and grab the latest.
  • 5:59
    Let's go back to our site.
  • 6:02
    Okay. Nothing's obviously magically happened yet.
  • 6:05
    Let's just go ahead and now install these.
  • 6:07
    It's showing you exactly where and what you have to do.
  • 6:11
    Basically, these are all pretty much packaged properly,
  • 6:13
    so all we have to do is copy over our extracted zips into a folder that we're going to go create.
  • 6:19
    Let's go ahead and do that.
  • 6:22
    Now we're in our sites/all folder.
  • 6:25
    I'm just going to go ahead and add a new folder. We're going to call it libraries.
  • 6:29
    Over here we've got our 2 downloads.
  • 6:31
    We've just got to extract them and grab those 2 editors,
  • 6:35
    and put those right in the libraries folder.
  • 6:37
    That's all there is to it.
  • 6:39
    If we go back, refresh this page, it's going to automatically detect in that libraries folder
  • 6:44
    what editors you have.
  • 6:46
    So now here's where it comes to work again with the Text Formats.
  • 6:50
    We now see each individual Text Format, and each one of those Text Formats
  • 6:54
    can have their own editor.
  • 6:56
    For now I'm pretty much just going to use the same editor across all of them
  • 6:58
    until I want to demonstrate some of those flaws I was talking about earlier.
  • 7:01
    But for now let's just go ahead and set the CKEditor--
  • 7:04
    see how you could change either one?--to each format.
  • 7:08
    Well, let's not do plain text.
  • 7:10
    Plain text you'll probably just want to leave with no editor because it's exactly what it says:
  • 7:13
    plain text.
  • 7:15
    Let's go ahead and save this. Perfect.
  • 7:18
    Now we have an editor in place.
  • 7:20
    Now we've just got to configure the editor.
  • 7:22
    How do you do that? Right here with these Edit links.
  • 7:25
    What's pretty cool here also is per input format you can configure the editor to be different.
  • 7:30
    So I'll go ahead and show you the options, and you can start thinking why
  • 7:33
    or how you might want to have an editor different for, let's say,
  • 7:36
    filtered HTML versus full HTML.
  • 7:39
    Let's go ahead and edit this.
  • 7:41
    Everything is collapsed as you go in here, our basic setup.
  • 7:44
    There's really nothing in here to change.
  • 7:46
    It just basically says let's enable this by default,
  • 7:48
    and everything else is just there.
  • 7:50
    Maybe you might not want them to see the enable/disable rich text toggle--not sure why.
  • 7:54
    Let's just go ahead and leave those as is.
  • 7:56
    Here's pretty much where a lot of the magic happens: Buttons and Plugins.
  • 8:01
    This is basically a big checkbox list of everything that the editor can have,
  • 8:06
    and when you enable them, it usually adds a button just like word processor buttons
  • 8:11
    on the editor bar.
  • 8:13
    I'm just going to edit some of the most basic ones.
  • 8:15
    Let's go ahead and add them. Bold, Italic, Underline. Okay.
  • 8:27
    Perfect. That's a good setup. Let's just go ahead and save that.
  • 8:31
    I'm going to show you exactly what you did,
  • 8:33
    and then we're going to dive deeper into those buttons and configurations and stuff.
  • 8:38
    But for now let's go ahead and see what this did.
  • 8:40
    Now if we want to add content to our website such as an article or a basic page,
  • 8:46
    we now see that we have a WYSIWYG editor.
  • 8:50
    So now if someone wants to type "I want bold,"
  • 8:54
    they now can actually physically select this and hit B for bold
  • 8:58
    just like a word processor.
  • 9:00
    A couple things to take a look at here.
  • 9:02
    Obviously, this bar can grow. That's what the buttons do.
  • 9:05
    They allow you to add more of them.
  • 9:07
    Here is that Disable rich text op, and if you don't want this here,
  • 9:10
    what that does is kind of just bring it right down just to raw text.
  • 9:15
    Here's our different Text Formats.
  • 9:17
    Notice we only set up these buttons on our filtered HTML.
  • 9:20
    So if we switch this to full HTML, notice how our text editor has changed.
  • 9:25
    See, there's where some of the power starts to come in.
  • 9:28
    So if a role doesn't have access to full HTML, now you can make your full HTML toolbar
  • 9:33
    have a heck of a lot more options, like inserting a table.
  • 9:36
    Maybe you don't want your typical user to be able to use a table from an editor.
  • 9:41
    So that's pretty much an editor at an overview glance.
  • 9:44
    Let's go ahead and configure some more of it.
  • 9:46
    Configurations, WYSIWYG profiles, filtered HTML, and edit. All right. Cool.
  • 9:53
    One last thing I want to show you when it comes to just adding buttons to your editor.
  • 9:58
    Let's just go ahead and add a few other ones just so we can kind of see some stuff.
  • 10:01
    Numbered lists. Let's go ahead and add--what else? Kind of common stuff.
  • 10:09
    Let's do the HTML block format so we can get some other h1 tags in there.
  • 10:14
    That's good. Let's go ahead and save this.
  • 10:17
    Let's go ahead and add some content again.
  • 10:20
    Let's go to our Article, and let's show a few things. "My title."
  • 10:24
    So now if I select this, we have the option of choosing a lot of these common things.
  • 10:28
    Let's make this a Heading 2.
  • 10:31
    "This works great."
  • 10:35
    Let's go ahead and make that a Heading 3.
  • 10:39
    And let's name this Test.
  • 10:42
    I've got a few things in here just showing you exactly how this works.
  • 10:45
    Let's go ahead and save this.
  • 10:49
    Okay. As we're looking at this, now we're starting to see a problem.
  • 10:53
    "My titleThis works great."
  • 10:55
    That's not how it looked.
  • 10:57
    This is kind of a gotcha that can get you right off the bat.
  • 11:00
    One thing to understand is by default--
  • 11:02
    let's go to Configuration, Text Formats, configure the filtered HTML.
  • 11:10
    If we scroll down and look at this, Limit allowed HTML tags,
  • 11:15
    this is kind of the reason behind the filtered HTML,
  • 11:19
    but it's filtered a lot more than we probably want.
  • 11:22
    If you notice, right in here we don't get a lot of things,
  • 11:24
    so you may want to just add a few more things in here
  • 11:27
    just to make sure that you get everything.
  • 11:31
    One thing cool about Drupal is part of its security feature.
  • 11:34
    Although I've typed h2 tags and h3 tags,
  • 11:38
    when it renders it, it strips them out at render time.
  • 11:42
    So my content is still saved perfectly fine in the database.
  • 11:45
    Right now by just adding these tags into the allowed tags and saving it,
  • 11:50
    if we go ahead and go look at my content, all right, now that's what I was expecting.
  • 11:55
    So it's just one of those things to look out for
  • 11:57
    if you're going to work with the filtered HTML type.
  • 12:00
    Just probably you'll want to add a few more tags in there,
  • 12:02
    especially when using an editor
  • 12:04
    and giving your user some more potential of doing things within that editor.
  • 12:08
    Okay, one last thing. We were talking about the configuration of the editor itself.
  • 12:12
    So let's go back to that, back to our filtered HTML and editing it.
  • 12:16
    There's a few other things in here besides Buttons and Plugins.
  • 12:19
    We also have the Editor Appearance.
  • 12:21
    Not much to change here. It kind of lets you change the location of the toolbar.
  • 12:24
    To me, the defaults make the most sense.
  • 12:28
    And then there is the Cleanup and Output.
  • 12:30
    It kind of is almost like those filters but just a little bit more going on here
  • 12:34
    where you can do a few more things.
  • 12:36
    I usually let it be the same, but a lot of times I might apply some source formatting
  • 12:41
    and definitely force some cleanup because a lot of times--exactly what it's saying right here--
  • 12:45
    when you paste from Word you're getting a bunch of junk.
  • 12:47
    So you might as well help them out.
  • 12:49
    Let me warn you, this doesn't clean it up exactly perfect,
  • 12:52
    so I'm going to cover in another lesson another method to making sure we get some good,
  • 12:57
    clean text inside of our text area.
  • 13:00
    And then finally, there's the CSS option here.
  • 13:03
    Again, here's the options being allowed in the block formats.
  • 13:07
    Notice we weren't allowed to put an h1 tag in there.
  • 13:10
    I'm not sure why by default it's not there, mainly because a lot of the times
  • 13:13
    the node title is your h1.
  • 13:15
    But if you wanted to add the h1 there, you can go ahead and add it.
  • 13:18
    Here's a big one, Editor CSS.
  • 13:21
    By default it uses the theme CSS, and that seems like it makes a lot of sense.
  • 13:29
    And it may be fine, but a lot of times your theme might start doing some stuff
  • 13:33
    where your body background is a different color such as black,
  • 13:37
    and a lot of that starts to get difficult using an editor.
  • 13:39
    At that point you can go ahead and use the Editor default CSS,
  • 13:44
    and that way it's pretty much normal.
  • 13:46
    You can start customizing this.
  • 13:48
    This gets a little bit more advanced where you can start adding some of your theme CSS
  • 13:51
    or overriding CSS.
  • 13:53
    I just wanted to let you know that if at some point you load up your editor
  • 13:56
    and it's all black, you may want to come in and change this.
  • 13:59
    And then the last thing I want to cover, just a quick one here, is CSS classes.
  • 14:03
    There is an option to add a button that gives us a font style drop-down,
  • 14:07
    and we can start adding classes to that and then define those in our CSS.
  • 14:10
    So that starts to allow users to start utilizing some of your customizations
  • 14:15
    and your typography and maybe floating pictures and things like that
  • 14:19
    to allow them to choose them,
  • 14:21
    and all of a sudden it works because you did the CSS work. All right.
  • 14:25
    So basically, what we've done now is we've gone through,
  • 14:28
    we've installed the WYSIWYG module,
  • 14:31
    we've shown where the WYSIWYG module had some configurations,
  • 14:34
    we've shown how you have to install them.
  • 14:36
    If you look here, the installation instructions are still available, just collapsed.
  • 14:39
    It shows you what we've got installed.
  • 14:41
    We explained how you could have multiple editors per input formats,
  • 14:46
    we went over editing a WYSIWYG editor,
  • 14:49
    and we went ahead and showed how one looks.
  • 14:51
    So if we click the Add content button or looked at existing content and clicked Add,
  • 14:56
    Article, we showed exactly what the buttons do and how you add them.
  • 15:01
    And that's pretty much a great beginning for WYSIWYG.

WYSIWYG, Text Formats, and Getting Setup


In this lesson we cover downloading and installing the WYSIWYG module. We show the relationship between the WYSIWYG editor and Drupal Text Formats. We go over the basic settings of the WYSIWYG module, how to download and install an editor, and configurations necessary in Text Formats to make things work properly.

Use this handbook page on Drupal.org to determine which version of TinyMCE is supported with CKEditor: Editors.

Additional resources: 

Modules Needed