Earlier in this course and during the forum section I believe I showed you how you could use a a third
party plugin to import a woozy big editor and or a rich text editor.
So these are text editors that allow you to make text bold or underline it or add H ones or add list
items to your your text area because basic text areas are kind of boring.
And if you want to like they're good for like comments or something like that.
But if you want to like have a few years you're making a mess area like WordPress or something you you
want to have build to control your text make it bold make lists and stuff like that.
You can't do that with just a basic text area with a text area tag.
So the editing API lets you easily make your own rich text editors with just team.
And it's pretty straightforward actually.
So OK let's look at the HMO.
So this all the rest is a lot of styles here and this is all.
I just didn't want to take too much time writing this.
This is just basic styles.
A lot of it is very simple just widths borders heights margin colors background colors.
That's basically a font family thought we outlined.
It's all very basic yes.
OK then right here let's put a div with the I.D.
I.D. I.D. of text editor OK.
And then inside this you won't have another div then under that you won't have an ivory shops offering.
And as I frame it doesn't need to have any of these values right here except an I.D. of enter and that's
it.
And then here this is gonna be the I guess you can call it a toolbar it's going to be where all the
buttons are for the.
The bold button the italics button all that stuff.
OK.
So let's let's do it.
Make a button type button that's good and that's all I need for now then inside here let's put a a b.
Copy this four times.
Let's put an eye here for italics and a you for underline and an S for straight through.
OK.
So the s tag you can put and you put an s tag around that you tag put the U.
OK.
So the U tag is kind of not the best way to do this right now but I'm going to do it because I just
want to get this styled right but the utility is meant to indicate that text here is spelled differently
or misspelled words stuff like that and it isn't anything like that.
So basically the U tag is a semantic element and I'm not using it for semantics in this case.
And usually you wouldn't want to do that but since this is just an example and I just want to show you
in the button area that this that you will be underlining it this will suffice for this little example
although usually if if I was making an actual website I'd probably not use these tags here and I'd probably
just do all this stuff with CSX and I would cover this which bans but I didn't want to take up too much
time.
So don't worry about that.
So for here is one.
Put this in an eye tag and this be put into B.J..
OK.
Let's do it.
We have so far OK cool.
So this kind of looks like a mini little text a text editor right here except nothing is clickable and
you can't really do anything and these buttons obviously don't do anything.
OK.
That's fine.
Let's go back to the code and that's going to be it for the HMO
and now let's go to JavaScript.
Actually it's not going to be because right here you want to say data so you won't have Button data
and it's equal to it.
Now this bold needs or this text inside here needs to be equal to a HMO five editing API command and
I'm going to show you I'm going to link to a page of all the commands that are that are accepted.
There's a lot of them but this is basically the command that will get triggered in the text editing
API.
So basically when you click a button and it doesn't matter which button you click on you could you could
you could set up all these buttons to make the text bold the the text on the button right now.
That's just to indicate what that button should do.
But that text doesn't actually tell the button what to do.
Well what would you tell the button what to do is what's inside right here.
So if you made all these buttons just say bold then all these buttons would trigger a bold command when
you click on them.
Obviously I mean that's put an on click function as well but I'm not going to do that right now.
For now I'm just gonna copy this copy this and put it all right here and this one you want to say change
this to italic
and this one to underline
this one to strike through.
OK.
And is a bit too much space right here.
OK.
Now the JavaScript So let's say let's make a variable called Ed document and that's gonna be equal to
the eye frame.
Get element by I.D.
and then
dot content document then say Ed document dot design mode is equal to on.
So that means everything inside this I frame will be able to get edited as if I've already shown what
design does it basically make the entire page editable.
So that's what this will do.
So inside as I read there will be full tags and you know there could be h ones but I'm not going be
doing that this video.
But you could make header heading tags with the text editing API the editing API but so all the underlined
and all the tags in all the bull tags and all the normal text you Bill to click on anything and just
start editing it right away which is basically what you want to do for a text editor because it wouldn't
be useful at all if you couldn't delete any text or anything like that.
OK.
So that's what that's doing.
Now let's make a function called text action
and it's going to take an element.
So now up on all here
whenever any of these buttons are clicked you want to call a function on click text action and pass
this into it.
OK.
Now let's just do a simple console dot log
text.
Action
OK.
Get
I was in an output document here I suppose for document first.
Okay so the text action fires every time on these buttons are clicked.
Cool.
Now you want to say var action is equal to elem dot dataset dot button.
So then you can come here and let's just consider that log the action
will be bold italic underline and strike through
okay.
Then you want to say Ed document.
So that's this.
The editor.
And this too.
Okay.
So the editor document that exact command
the action in fact true.
Okay actually let's undo that right now because I should have showed you this already but you can type
into here now because this right here this whole document is just an empty HMO page but since it's design
mode is equal to on.
You could just simply just start typing in it just like you could in any other a single document.
Like if you made this entire page design mode on then you could just start editing this and then you
could delete everything and then when there was nothing there you could still click on top and start
typing at the top of the page just like we're doing right here.
Okay.
So let's put this back.
So then you're going to exact that command or execute this command the action which is whichever button
you clicked on.
So you can make text bold and see that
not more than you can click this and say bold click it again and say not Bill.
They set all that and make it all underlined.
And also only make the U.S. a strike.
Strikes.
Okay so you basically see what's going on here.
I should delete that.
Call it a lot but this is like a mini little rich text or really a text editor right here.
But you can also make the buttons.
Show you what's selected with just a bit more javascript.
So let's get rid of that
other thing that you could do here actually is documents that get called in by these.
Now hold on one second because I think this is a bit redundant
because this will make it focus every time you click on a button.
So you click on a button and it starts goes right there.
It doesn't.
The second time for some reason not sure why.
Maybe if I just went to edit document focus.
Let's see this.
So you click on something OK.
So this is an important I just thought it would be a little better to do that.
But it's not important.
So.
OK.
So showing that the buttons are selected you put an F else then Ed document that query command state
action elem die class list dark ad
copy this actually let's not copy it right now.
Let's put it there.
Active now.
Copy it.
Put it down here and put remove.
So you click on the button.
Oh it should do I have the active.
Not sure why this isn't working right now.
Let's look here.
Let's look FOX No reload click this.
Now let's go and inspect
that's really weird.
Okay I'm gonna have to take some time off to fix it figured this out because this should be working
right now and it's not okay.
I think the problem is that I needed to have this code in here for some reason I have no idea why.
Talk me down Get element by D.
Ed done focus.
I think this will fix it.
This will make it show.
Yeah.
I've no idea why it does that though.
So you could select buttons
OK and one last thing that you could do because this text editor is basically a whole other HDMI file
so it doesn't have the styles that we have.
So down here
you could say editor or document head dot enter h t male plus equals and you just want to put this entire
thing right here.
And you get to remove these quotes change them to double quotes.
I mean single quotes.
Okay let's see if this makes an error.
No.
Okay.
But it also isn't gonna put the socket to change the font yet because you also have to say Ed document
ahead of that interracial male plus equals
style style
and just say it's time.
Everything inside the HMO
will have font family.
This Laura font and make it a serious fallback.
Also you could change the font size
to 20 pixels.
Okay so that should make the text editor look a little bit better.
Yeah.
Okay so that's pretty cool and that's going to be it for this video.