In this lesson, let's set up a CKEditor account to get started. com, click on Start Free Trial and then sign up with your desired method. I already have an account, so we'll go directly to that. Now, your free trial includes a 14-day free period to try out all the premium features.
After that, we can upgrade to keep all the best goodies or downgrade to a basic account that is free forever. but still include the essentials. Next, let's grab a license key under the proper tab. There are three options available to us.
We'll use the trial license key to experiment with the premium features available during the trial. Just copy and paste it to your clipboard. At this point, we could manually install CK Editor from scratch within a view project, but there's an easier way. Go back to the quick start tab.
and click the Go to Builder button. This is a visual configuration tool that lets us set things up quickly and easily. In the left-hand column, there are lots of presets to choose from. For example, there's a Collaborative Document Editor, a Notion-like Editor, an Inline Editor, and even an HTML Editor.
Let's go with the Collaborative Document Editor, as that sounds most like Google Docs. Next, we're presented with a list of features that we might like to include. They're grouped by categories like productivity, AI, collaboration, and so on. Inside each group, we can enable or disable specific features.
For example, inside of the productivity group, we get format painter, slash commands, templates, and more out of the box. I think all those sound useful for a Google Docs clone, so we'll keep them. But let's disable the AI group as it involves some extra setup that's beyond the scope of this course. Next, we can configure the toolbar.
It's broken up into two different parts, the main toolbar and the menu bar above it. We can either show all in the toolbar or expose only essential items in the main toolbar and less commonly used items in the menu bar. I think this first option makes the most sense, so let's stick with that. Oh, and we'll also leave Wrapped alone so that any buttons that don't fit in a single line in the main toolbar are hidden in a 3-dot menu.
Lastly, there are a couple of contextual floating toolbars. The Balloon toolbar shows when we select some text. The Block toolbar, if we enable it, gives extra contextual tools when we select a block-level item with this drag-handle looking bar over here. or we can even use that to reorder blocks.
I don't think Google Docs has either of these, last I checked. So I'll turn off the block toolbar. But let's keep the balloon toolbar. That just seems pretty handy to me.
Okay, on to the last step. Looks like we've got several premium features included in our build. That's exactly what we want. Let's test this thing at the highest level.
Now, we can choose to install with any of the major frameworks. js. Next, we'll go for the cloud-hosted version, as the self-hosted version is only available for open source projects with a GPL license and for some custom plans. Lastly, let's copy the code snippets to install with a new Nuxt project.
Inside my terminal, I'll run npm create-nuxt at latest. to boot up the new project. By the way, we'll use Nuxt in this course since we'll need to write some server-side logic to support the secure production-ready user authentication and permissions. You could do the same in a serverless function in your platform of choice or a server-side framework like Express.
Let's just call the app Google Docs Clone, use npm as the package manager, or whichever one you prefer is fine. The rest of the CLI options you can set to your liking. It doesn't really matter what you set them to for the sake of the course. Though I will install ESLint just to keep our code formatting clean.
env variable called Nuxt public CKE editor license key, and then paste that license key that was inside of our clipboard to the project. The reason we prefixed this with Nuxt public is a Nuxt convention for defining environment variables that will be exposed to the client side, which by the way is totally fine. This license key is meant to go to the browser. ts, we do need to set it up as a runtime config option.
emv file and convert it here to camel case. Perfect. Next, to install the CKEditorView library, we can copy the first code block from the builder and then run the command in the terminal. css file with next.
view file inside of the components directory and paste in the editor code from the builder. While we're here, let's also replace the hard-coded license key with the dynamic environment variable. The reason we do this is so that we can have a different license key based on the environment we're deploying the app to. view, let's go and use the editor.
With that, let's start up the dev server and see what happens. Okay, it looks like there's one more configuration option that we need to provide. and that is the cloud services token URL. No problem, back inside of the customer portal, under the cloud environments, inside of the default environment if you already have it, or just create a new one if you don't, but this should be here for you already, view that default environment, and click right here to activate the development token URL.
This will get us started quickly. but we'll develop our own token URL later on during the course. view, we can paste in that token key, or you could set it as an environment variable. But since it's really just a temporary thing that we'll replace later, I'm not going to take the time to do so.
And there you have it. Over in the browser, we've got a robust looking document editor up and running in no time. In this lesson, let's set up a CKEditor account to get started. com, click on Start Free Trial and then sign up with your desired method.
I already have an account, so we'll go directly to that. Now, your free trial includes a 14-day free period to try out all the premium features. After that, we can upgrade to keep all the best goodies or downgrade to a basic account that is free forever. but still include the essentials.
Next, let's grab a license key under the proper tab. There are three options available to us. We'll use the trial license key to experiment with the premium features available during the trial. Just copy and paste it to your clipboard.
At this point, we could manually install CK Editor from scratch within a view project, but there's an easier way. Go back to the quick start tab. and click the Go to Builder button. This is a visual configuration tool that lets us set things up quickly and easily.
In the left-hand column, there are lots of presets to choose from. For example, there's a Collaborative Document Editor, a Notion-like Editor, an Inline Editor, and even an HTML Editor. Let's go with the Collaborative Document Editor, as that sounds most like Google Docs. Next, we're presented with a list of features that we might like to include.
They're grouped by categories like productivity, AI, collaboration, and so on. Inside each group, we can enable or disable specific features. For example, inside of the productivity group, we get format painter, slash commands, templates, and more out of the box. I think all those sound useful for a Google Docs clone, so we'll keep them.
But let's disable the AI group as it involves some extra setup that's beyond the scope of this course. Next, we can configure the toolbar. It's broken up into two different parts, the main toolbar and the menu bar above it. We can either show all in the toolbar or expose only essential items in the main toolbar and less commonly used items in the menu bar.
I think this first option makes the most sense, so let's stick with that. Oh, and we'll also leave Wrapped alone so that any buttons that don't fit in a single line in the main toolbar are hidden in a 3-dot menu. Lastly, there are a couple of contextual floating toolbars. The Balloon toolbar shows when we select some text.
The Block toolbar, if we enable it, gives extra contextual tools when we select a block-level item with this drag-handle looking bar over here. or we can even use that to reorder blocks. I don't think Google Docs has either of these, last I checked. So I'll turn off the block toolbar.
But let's keep the balloon toolbar. That just seems pretty handy to me. Okay, on to the last step. Looks like we've got several premium features included in our build.
That's exactly what we want. Let's test this thing at the highest level. Now, we can choose to install with any of the major frameworks. js.
Next, we'll go for the cloud-hosted version, as the self-hosted version is only available for open source projects with a GPL license and for some custom plans. Lastly, let's copy the code snippets to install with a new Nuxt project. Inside my terminal, I'll run npm create-nuxt at latest. to boot up the new project.
By the way, we'll use Nuxt in this course since we'll need to write some server-side logic to support the secure production-ready user authentication and permissions. You could do the same in a serverless function in your platform of choice or a server-side framework like Express. Let's just call the app Google Docs Clone, use npm as the package manager, or whichever one you prefer is fine. The rest of the CLI options you can set to your liking.
It doesn't really matter what you set them to for the sake of the course. Though I will install ESLint just to keep our code formatting clean. env variable called Nuxt public CKE editor license key, and then paste that license key that was inside of our clipboard to the project. The reason we prefixed this with Nuxt public is a Nuxt convention for defining environment variables that will be exposed to the client side, which by the way is totally fine.
This license key is meant to go to the browser. ts, we do need to set it up as a runtime config option. emv file and convert it here to camel case. Perfect.
Next, to install the CKEditorView library, we can copy the first code block from the builder and then run the command in the terminal. css file with next. view file inside of the components directory and paste in the editor code from the builder. While we're here, let's also replace the hard-coded license key with the dynamic environment variable.
The reason we do this is so that we can have a different license key based on the environment we're deploying the app to. view, let's go and use the editor. With that, let's start up the dev server and see what happens. Okay, it looks like there's one more configuration option that we need to provide.
and that is the cloud services token URL. No problem, back inside of the customer portal, under the cloud environments, inside of the default environment if you already have it, or just create a new one if you don't, but this should be here for you already, view that default environment, and click right here to activate the development token URL. This will get us started quickly. but we'll develop our own token URL later on during the course.
view, we can paste in that token key, or you could set it as an environment variable. But since it's really just a temporary thing that we'll replace later, I'm not going to take the time to do so. And there you have it. Over in the browser, we've got a robust looking document editor up and running in no time.