How I Use CKEditor to Show I Can Learn Any Tool — and So Can You

When you're trying to break into tech, especially after a bootcamp, you're often told to “show your work.” But what if your best skill is learning new tools quickly?

That doesn’t always show up in a GitHub repo or code challenge.
So here’s how I solved that problem, and how you can, too.

✨ The Backstory: More Than Just Code

During a recent job interview, I shared that I had integrated CKEditor 5 into my portfolio. The interviewer lit up.

Not because of the tool itself, but because it demonstrated three things:

• I could understand a product’s documentation
• I could configure and troubleshoot a live integration
• I could think like a developer and a user

That’s when I realized: learning to use a tool well is a project.

You just have to tell the story.

---

💡 Why CKEditor?

CKEditor is a rich text editor with serious flexibility — great for custom UIs, WYSIWYG editors, and forms where formatting matters.

(WYSIWYG stands for “What You See Is What You Get” — it means users can style text visually, like in Word or Google Docs, without writing HTML.)

I used it in my portfolio contact form to let visitors leave styled messages.

---

🛠️ My CKEditor Integration Story

I wanted my contact form to reflect who I am: thoughtful, clear, and ready to collaborate.

Instead of a plain <textarea>, I added a rich-text editor using CKEditor.

Here’s how I did:

✅ Step-by-step:

1. Use the CKEditor Builder

I started with the CKEditor Builder, selecting the plugins I wanted (emoji, alignment, special characters, etc.).

2. Create the HTML form

I built a basic contact form with a #contactForm ID and included a <div id="editor"></div> element where CKEditor would be mounted. I also added a hidden input to store the editor’s content.

3. Copy the generated config and connect

The builder gives you the full configuration code. I pasted it into my JavaScript file and connected CKEditor to the form using .getData() to retrieve the message on submit.

window.addEventListener('DOMContentLoaded', function () {
  ClassicEditor
    .create(document.querySelector('#editor'), editorConfig)
    .then(instance => {
      editor = instance; // Assign instance to global variable
    })
    .catch(error => {
      console.error('CKEditor initialization error:', error);
    });
});

document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById('contactForm');
  const formMessage = document.getElementById('formMessage');
  const messageInput = document.getElementById('message-content');

  form.addEventListener('submit', function (e) {
    e.preventDefault();

    // Get CKEditor content (assumes CKEditor is assigned to a global variable `editor`)
    messageInput.value = editor.getData();

    // Gather form data
    const formData = {
      name: document.getElementById('name').value,
      email: document.getElementById('email').value,
      message: messageInput.value
    };

    // Log form data to the console
    console.log("📨 Form Submitted:", formData);

    // Show thank you message to the user
    formMessage.textContent = "✅ Thank you for your message! I'll get back to you soon.";

    // Clear form and editor
    form.reset();
    editor.setData('');
  });
});

4. Add polish

I added a thank-you message, emoji support, and smart link handling with decorators like downloadable.

5. Tell the story — especially in interviews

When I shared this CKEditor integration during a job interview, I didn’t just say “I used a rich-text editor.”

I explained why I picked it, what it added to the user experience, and how I customized it.

That context made it memorable. It showed me that I could not only use a tool but also consider its impact.

---

🧠 Lessons for Bootcampers

If you’re trying to show off your tool skills, here’s what I recommend:

• Pick one real-world dev tool (Stripe, Auth0, Firebase, CKEditor, etc.)
• Use it for a functional purpose — not just a tutorial
• Document your process clearly (in a blog or project README)
• Explain the *why* — what did it solve for you?

---

🙌 Your Turn

Have you integrated a third-party tool into your project recently?

Drop your link or tell me what you learned in the comments — I’d love to see how you tell your story.