CKEditor - WYSIWYG, Getting Started with the Ultimate HTML Editor

For these sections related to CKEditor, I'm going to use the Laravel project. It's the project I recommend using. If you want to create another one or use a different one, that's up to you, but for me this is the most suitable, especially for the form we're going to use.

The idea is to place a "rich content" field in the content section. And what do I mean by this? At this point, I'm going to introduce you to CKEditor.

What is CKEditor?

You can open your browser and type "CKEditor" and click the first link. At the same time, you can also search for "What You See Is What You Get." It's there, I didn't misspell it: what you see is what you get, and you'll see the results.

CKEditor: Word for the web

This may be the first time you've heard of this, or maybe not, I don't know. But basically, CKEditor is exactly what its name suggests: what you see is what you get. I call it "Word online" or "Word for the web," as it offers features similar to Microsoft Word or Google Docs.

I'm referring to an editor that allows you to apply formatting such as bold, italics, strikethrough, color changes, headings, tables, lists, etc. This is precisely what the term What You See Is What You Get (abbreviated as WYSIWYG) means: you can format your text and see how it will look in real time.

In other words, we're talking about a plugin that allows us to enrich the content, so that it doesn't look so flat or boring, but rather has a more visually appealing style. This is ideal, of course, when working with a blog.

Applying it to our blog

That's why I'm using this Laravel project again, since we're supposedly working on a blog and don't want our posts to look so simple.

When you go into the details of a post, it shouldn't look so "blank," but rather should display rich content. For example, you can insert YouTube videos, something more advanced than the basic settings these editors come with by default.

In these types of editors, like the one you see above, you don't have options to insert a YouTube video or anything similar. Only basic things like titles, bold, or underlined text.

Additionally, I also place code blocks in my posts. I define that format elsewhere, but when we use CKEditor, we can directly indicate that a block corresponds to code, among many other options.

Conclusion

So, in summary, that's what CKEditor is for, and the concept of "What You See Is What You Get," which you're seeing on the screen. Let's leave it at that, and in the next lesson, I'll talk about plugins for this type of editor and why we're going to use CKEditor in particular.

What is WYSIWYG?

Now that we know what this acronym stands for—What You See Is What You Get—and it can be referenced in several ways, it's a way of defining rich content.
I've already shown you an example of rich content in both my book and my blog, so I think it's time to introduce a plugin available for this.

Looking for a WYSIWYG editor

Obviously, if you type "What You See Is What You Get JavaScript" into Google, you'll find tons of plugins. Mind you, I'm not saying they're bad or anything like that. Many of them are probably excellent and have been around for quite some time.

Why do I use CKEditor?

In my case, I use CKEditor for a very simple reason: it's a project that, colloquially speaking, I find serious.
It's been around for years, I've been using it for a while—I think since version 3, but not that long—and the team behind the plugin keeps it constantly updated.

This is important because not all projects have that kind of constant improvement.
Additionally, CKEditor is highly customizable and has good documentation (although it can sometimes seem a bit abstract).

What makes it stand out?

It's available for vanilla JavaScript, which is what we'll be using (no additional frameworks).

You can also integrate it with frameworks like Angular, React, Vue 2, Vue 3, and even .NET.

It has extensive documentation and an active team that keeps the project running.

There's a demo section where you can see what it looks like, how it works, and test out many of its features.

The editor even includes an AI-powered assistant, which demonstrates the product's constant evolution.

You can export to PDF, Word, modify the interface, etc.

It's visually beautiful and functionally very complete.

And the price?

Some of its more advanced features are paid. That's something to keep in mind.
For example, the product called SunBox (I think that's what it's called), which you can even integrate with services like Dropbox and other online services, is a separate solution that comes at a price.

However, even with the limitations of the free version, the plugin already offers a lot.

Why do I use it?

In summary, I use CKEditor for three reasons:

1. Confidence: I've been using it for years, and it's always responded well.
2. Customization: I can adjust it to practically anything I want.
3. Scalability: I know I'll never run out of features if I need to expand functionality.

Yes, it's true that setting it up can be a bit complex. In fact, that's exactly why I'm making these videos: to help you overcome that initial barrier.