In this lesson, let's crank things up a notch. Now, so that we can focus on the most interesting parts of TinyMCE, I've provided some boilerplate code in order to get you started quickly. Go ahead and use the link in the description below to download it from GitHub. This code base is a simple view application with TinyMCE already installed and a page setup for each chapter in the course.
The Chapter 2 Start page is the page where you can start working along with me. But first, go over to Chapter 2 End in the browser and you'll get an idea of what we're going to build. It's a rich newsletter editor. It provides non-technical users the ability to edit newsletter content visually without messing up your amazing design.
It comes with some features tailor-made for the use case at hand. Notice that we can use merge tags to provide placeholders for dynamic content, things like the first name of the user receiving the email. Also, we've made it very easy for the newsletter editors to include common links. This is achieved by adding a dropdown of labeled links for them to choose from whenever they go to add in their link.
Okay, well, that's what we're building. Let's get to it. The first thing I want to do is provide the HTML email template to the editor. I've already imported that inside of our component.
Notice that I've used the raw query variable at the end of the import. This tells me to treat the import as a raw string. Don't try to run it through some HTML loader, just give me the raw HTML string. If you take a look at the file, you'll see that it's just a normal HTML email.
For real apps, you could write this from scratch. or copy it from any number of free email template resources out there. Also note that we've included it in our project source code, but you could also fetch it from a database or an API. It's totally up to you.
Now let's pass the HTML email into the editor by making it the value for the model. Over in the browser, I'll visit chapter to start, and just like that, we're moving along quite quickly. The email is showing in the editor. However, it doesn't quite look like the finished product that we saw a minute ago.
We're still missing some styles. We can include those with the content style option. And I've already got a style sheet imported as a raw string right here. So we'll just pass it in.
Beautiful. Now those styles are coming in perfectly. But we are a little bit limited in terms of real estate. Let's do the intuitive thing and just adjust the height of the editor with some CSS I'll make it the full height of the viewport Minus a hundred pixels in order to leave some room for the page heading Beautiful that solution worked great It's easy to fix the size and position of the editor with regular old CSS Now if I click around inside the email You'll notice that we're able to edit all the text even the images.
We probably want to limit what's editable though. For instance, we don't want our content editors to be able to remove the unsubscribe link. Limiting what's editable is really easy to do with a feature called multi-root editing. How do we enable that?
Well, first let's disable editing of the root document. This is possible with the editable root option set to false. Next, let's say that we should allow editing any piece of the email template that includes the class TinyEditable. Back in the browser now, notice that I can no longer edit the unsubscribe link or any other data at the bottom of the newsletter.
However, I can edit select info at the top, like this heading here. Why are these behaving differently? Well, it's because I've already added the TinyEditable class where I wanted things to be editable in that HTML email. Notice that here we have class TinyEditable on that H2 that I just edited.
Pretty simple. Okay, finally, let's do a little bit of cleanup to remove some of the things that don't work great for our email editor. Notice here that we have these dotted lines around different editable portions of the newsletter. It's a little weird and a little distracting, so I would prefer to get rid of them.
We can do that by setting the visual option to false. Now those lines disappear. Next, notice when we go to edit a link, we have the option of choosing where a link should open. In the current window or in a new window.
This doesn't really make sense for email. All links are going to open in a new tab or window. We can hide this drop down with the link target list option set to false. Now that dropdown is no longer visible.
Lastly, let's prevent the email editor from messing up our layout by allowing images to be resized. We can do that with the object resizing option. And done. In this lesson, we've loaded an HTML template into the TinyMCE editor by simply passing the raw HTML as the V model.
We've also specified exactly what can be edited within the template with the multi-root editing feature. Finally, we've cleaned things up for an optimal email editing experience with some other simple tiny MCE configurations. Before we go though, let's fix one little mistake, and that is instead of providing the raw email template string directly to V model, Let's set the vModel to the reactive value, and then we'll pass the email template as the default value for this reactive ref. This means when we make edits to the template, our value will reactively update as it should.
In this lesson, let's crank things up a notch. Now, so that we can focus on the most interesting parts of TinyMCE, I've provided some boilerplate code in order to get you started quickly. Go ahead and use the link in the description below to download it from GitHub. This code base is a simple view application with TinyMCE already installed and a page setup for each chapter in the course.
The Chapter 2 Start page is the page where you can start working along with me. But first, go over to Chapter 2 End in the browser and you'll get an idea of what we're going to build. It's a rich newsletter editor. It provides non-technical users the ability to edit newsletter content visually without messing up your amazing design.
It comes with some features tailor-made for the use case at hand. Notice that we can use merge tags to provide placeholders for dynamic content, things like the first name of the user receiving the email. Also, we've made it very easy for the newsletter editors to include common links. This is achieved by adding a dropdown of labeled links for them to choose from whenever they go to add in their link.
Okay, well, that's what we're building. Let's get to it. The first thing I want to do is provide the HTML email template to the editor. I've already imported that inside of our component.
Notice that I've used the raw query variable at the end of the import. This tells me to treat the import as a raw string. Don't try to run it through some HTML loader, just give me the raw HTML string. If you take a look at the file, you'll see that it's just a normal HTML email.
For real apps, you could write this from scratch. or copy it from any number of free email template resources out there. Also note that we've included it in our project source code, but you could also fetch it from a database or an API. It's totally up to you.
Now let's pass the HTML email into the editor by making it the value for the model. Over in the browser, I'll visit chapter to start, and just like that, we're moving along quite quickly. The email is showing in the editor. However, it doesn't quite look like the finished product that we saw a minute ago.
We're still missing some styles. We can include those with the content style option. And I've already got a style sheet imported as a raw string right here. So we'll just pass it in.
Beautiful. Now those styles are coming in perfectly. But we are a little bit limited in terms of real estate. Let's do the intuitive thing and just adjust the height of the editor with some CSS I'll make it the full height of the viewport Minus a hundred pixels in order to leave some room for the page heading Beautiful that solution worked great It's easy to fix the size and position of the editor with regular old CSS Now if I click around inside the email You'll notice that we're able to edit all the text even the images.
We probably want to limit what's editable though. For instance, we don't want our content editors to be able to remove the unsubscribe link. Limiting what's editable is really easy to do with a feature called multi-root editing. How do we enable that?
Well, first let's disable editing of the root document. This is possible with the editable root option set to false. Next, let's say that we should allow editing any piece of the email template that includes the class TinyEditable. Back in the browser now, notice that I can no longer edit the unsubscribe link or any other data at the bottom of the newsletter.
However, I can edit select info at the top, like this heading here. Why are these behaving differently? Well, it's because I've already added the TinyEditable class where I wanted things to be editable in that HTML email. Notice that here we have class TinyEditable on that H2 that I just edited.
Pretty simple. Okay, finally, let's do a little bit of cleanup to remove some of the things that don't work great for our email editor. Notice here that we have these dotted lines around different editable portions of the newsletter. It's a little weird and a little distracting, so I would prefer to get rid of them.
We can do that by setting the visual option to false. Now those lines disappear. Next, notice when we go to edit a link, we have the option of choosing where a link should open. In the current window or in a new window.
This doesn't really make sense for email. All links are going to open in a new tab or window. We can hide this drop down with the link target list option set to false. Now that dropdown is no longer visible.
Lastly, let's prevent the email editor from messing up our layout by allowing images to be resized. We can do that with the object resizing option. And done. In this lesson, we've loaded an HTML template into the TinyMCE editor by simply passing the raw HTML as the V model.
We've also specified exactly what can be edited within the template with the multi-root editing feature. Finally, we've cleaned things up for an optimal email editing experience with some other simple tiny MCE configurations. Before we go though, let's fix one little mistake, and that is instead of providing the raw email template string directly to V model, Let's set the vModel to the reactive value, and then we'll pass the email template as the default value for this reactive ref. This means when we make edits to the template, our value will reactively update as it should.