I've gone ahead and created a new view project off-screen with npm init view at latest. I chose to include TypeScript, ESLint, and Prettier, but none of those are really necessary. For the practical use cases that we'll work on later on, I'll provide some starter code for you to download, but now let's get started from scratch so you can see just how easy it is to get started. All right, I'll start up the dev server with npm run dev.
And then over in the browser, we've got the stock site that you get out of the box with view. Now let's install the necessary TinyMCE dependency. There's only one, so it's pretty easy. npm install at tinymce slash tinymce view.
Since we're using view three, we will install the latest version. But if you need View2 support, then you should install version 3. TinyMC requires an API key. Let's set that up now.
First, I'll create a new file in the root of my project. env. Then we can add our API key like this. cloud.
I've left a link to that in the description below. Here you'll have to hit the start for free button in the upper right hand corner and This lets us create a totally free account. I've already got an account set up. view, I'll get rid of all the boilerplate code and scaffold out a single file component.
Then we'll need to import the editor component from the tinyMCE view package. emv variable and just store it in a const called API key. Next, we'll need to pass this as a prop to the editor component when we use it in the template. And that's it.
We should now have a fully functional rich text editor. Sure enough, over in the browser, that's exactly what we get. Nice. Now, I don't like the layout here very much because of the default styles that come with view out of the box.
So let me come back over to the code. ts, I will just comment out the style sheet. Perfect. Zoom in just a little bit.
And that's a lot better. Here is a fully functional text editor. And if I start typing in it, it works great. Plus, it's got some nice sensible defaults for the toolbar and options for formatting our text.
Okay, we're off to a great start, but how can I pass existing content down to the editor? And then how do we get the resulting content out of the editor so that we can save it to a database or send it to an API endpoint? or whatever we need to do with it. Well, you might think that we could use vModel, and indeed, we can.
All that's needed now is to create a reactive ref with some hard-coded existing data in it, and then we'll pass that data to the vModel on the editor component. When I refresh the page, we can see that our past content is displayed directly in the editor, bold text, and all. If we edit the content a bit, and then open up the View DevTools. Indeed, the value of our reactive ref is updated with the resulting HTML.
Finally, back in the code editor, if I print out the reactive ref to the DOM with vHTML, we do indeed get valid and reactive HTML displayed underneath the editor. Can't you just see the possibility in your mind of what all is possible with this editor? And this is before we even configure anything at all. In the next lesson, let's get into some basic props that you can use to configure the editor further.
I've gone ahead and created a new view project off-screen with npm init view at latest. I chose to include TypeScript, ESLint, and Prettier, but none of those are really necessary. For the practical use cases that we'll work on later on, I'll provide some starter code for you to download, but now let's get started from scratch so you can see just how easy it is to get started. All right, I'll start up the dev server with npm run dev.
And then over in the browser, we've got the stock site that you get out of the box with view. Now let's install the necessary TinyMCE dependency. There's only one, so it's pretty easy. npm install at tinymce slash tinymce view.
Since we're using view three, we will install the latest version. But if you need View2 support, then you should install version 3. TinyMC requires an API key. Let's set that up now.
First, I'll create a new file in the root of my project. env. Then we can add our API key like this. cloud.
I've left a link to that in the description below. Here you'll have to hit the start for free button in the upper right hand corner and This lets us create a totally free account. I've already got an account set up. view, I'll get rid of all the boilerplate code and scaffold out a single file component.
Then we'll need to import the editor component from the tinyMCE view package. emv variable and just store it in a const called API key. Next, we'll need to pass this as a prop to the editor component when we use it in the template. And that's it.
We should now have a fully functional rich text editor. Sure enough, over in the browser, that's exactly what we get. Nice. Now, I don't like the layout here very much because of the default styles that come with view out of the box.
So let me come back over to the code. ts, I will just comment out the style sheet. Perfect. Zoom in just a little bit.
And that's a lot better. Here is a fully functional text editor. And if I start typing in it, it works great. Plus, it's got some nice sensible defaults for the toolbar and options for formatting our text.
Okay, we're off to a great start, but how can I pass existing content down to the editor? And then how do we get the resulting content out of the editor so that we can save it to a database or send it to an API endpoint? or whatever we need to do with it. Well, you might think that we could use vModel, and indeed, we can.
All that's needed now is to create a reactive ref with some hard-coded existing data in it, and then we'll pass that data to the vModel on the editor component. When I refresh the page, we can see that our past content is displayed directly in the editor, bold text, and all. If we edit the content a bit, and then open up the View DevTools. Indeed, the value of our reactive ref is updated with the resulting HTML.
Finally, back in the code editor, if I print out the reactive ref to the DOM with vHTML, we do indeed get valid and reactive HTML displayed underneath the editor. Can't you just see the possibility in your mind of what all is possible with this editor? And this is before we even configure anything at all. In the next lesson, let's get into some basic props that you can use to configure the editor further.