Using the WYSIWYG editor - Drupal Tutorial

- [Instructor] In this video, I want to talk to you about the WYSIWYG Editor. Now, WYSIWYG stands for, what you see is what you get. And that's pretty true in Drupal 9. So I'm in my first Drupal Node, feel free to open that up and follow along. If you've used any kind of HTML editor before you're probably pretty familiar with the WYSIWYG Editor. Drupal uses CKEditor and has several different toolbars depending on the text format that you are using. Here in basic HTML, which is the default. You have the ability to bold, italicize create a link, unlink, unordered list, ordered list, block quote, insert a standalone image, change the format from paragraph to heading two or three or four or five. And of course view the source. The key thing to remember here with the basic HTML format is that you cannot embed advanced HTML. Drupal will strip it out. This is the kind of text format you want to use for your, say, junior content editors. We're going to cover text formats in an upcoming video. For now go ahead and select some text, make it bold, make some of the texts italic. You get the idea, you select the text and you click the button. To create a link I can highlight a word or a paragraph and click the create link button and I'll need to know the URL. You should never put the full domain link of another node in here, simply because if you are working on say a test server and then push it to production, the links will break. We're going to fix that in just a little bit with another module. All right, I'm going to just hit enter there and make an unordered list. It's as simple as that. Typically what I do is I paste all of the text in and then come back and format it. You can paste from Word in Drupal 9. That said, it's usually not a good idea because Word has all kinds of stuff in it. And if you try and paste a table or an image those things will definitely get stripped out. And hit enter again here and do an ordered list. You get the idea pretty simple to do. One of the good things about a WYSIWYG Editor is the ability kind of change up or divide up your node or content area with some headings. And again, this is really simple in Drupal 9, highlight the text you want to head, make a header, change normal to heading two or heading three. Heading two is just a little bit bigger than heading three. And again, I'm going to unbolt that but it's still going to be in nice large text. If I wanted to make another heading here I'm going to make it so it's in its own paragraph, highlight the text and change that to a heading three as well. If I look at the source you're going to see a heading three, a paragraph tag, a heading three, there's my unordered list, a paragraph and the ordered list that I have. You can edit this in here if you know a little bit of HTML. But again you cannot just paste advanced HTML like tables, divs, when you are using the basic HTML text format. So the three options I have are basic, restricted and full HTML. Restricted is almost no HTML. If I change to full HTML, it's going to say, hey, changing this is going to permanently remove content that is not allowed in the text format. Save your changes. Now I have a little bit more in the toolbar. Strike through superscript, subscript, remove formatting. insert a horizontal line. Once again, still have my heading tags. I can click and observe the various HTML elements and of course again I can view the source. With full HTML turned on I can embed some advanced HTML, like JavaScript, tables and classes to my tags and all kinds of things. So if you need to do any of that then you'll definitely want to make sure you are working in full HTML. Now here is the thing, if I switch back to basic HTML it is going to strip out any of that advanced HTML that I've added. That also means if you've used the advanced HTML text format and a junior editor who doesn't have access to that format edits your node at a later time and saves it. Well, then all of your advanced HTML will be deleted as well. So this is something you are going to need to really think through, if you have multiple editors working on your site. All right, two more icons here that we haven't touched yet. Block quote is a simple function that does exactly what it sounds. This look and feel will change depending on the theme that you are using. And then finally insert image, which is going to be a stand alone image that you can't use anywhere else. You can align it, none, left, center or right and you can add a caption. And it's in the body field. So I can't actually do anything with it later. We'll talk more about that when we get to views. All right, I'm going to hit save. And here's my first Drupal Node. You'll notice there's the image field, the body field, there's the block quote that I added, there's that picture of the girl with her dog, there's the heading three and more. So the WYSIWYG Editor is really helpful and enables me to quickly add formatting and other elements to my nodes. Remember if you mess something up you always have version control to go back to a previous version of a node.