I’m trying to integrate CKEditor into WordPress for a client. I’m not too familiar

Question

0

Asked: May 13, 20262026-05-13T19:47:27+00:00 2026-05-13T19:47:27+00:00

I’m trying to integrate CKEditor into WordPress for a client. I’m not too familiar

0

I’m trying to integrate CKEditor into WordPress for a client. I’m not too familiar with it, it’s the first time I use it.

The client wants to use CKEditor on a textarea that gets stored into a custom field and is displayed in the sidebar of a page.

I added support for this form of editing by adding meta boxes to the page edit window. I have FCKEditor plugin installed, so I just call CKEditor.replace on the relevant metabox.

The problem is that when the meta box contains THIS: (I trimmed the CSS for convenience. There’s actually quite a bit).

<style type="text/css">
<!--
.side-banner .style1 {
    font-family: Arial;
    font-size: 14px;
}
.side-banner .style2 {
font-family: Helvetica;
font-size: 12px;
-->
</style>
<table width="246" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th width="246" height="15" colspan="2" scope="col"> </th>

CKEditor turns it into this:

<p><style type="text/css">
<!--{cke_protected}%3C!%2D%2D%0A.side-banner%20.style1%20%7B%0A%09font-family%3A%20Arial%2C.side-banner%20.style2%20%7B%0A%09font-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B-->
</style></p>
<table border="0" cellpadding="0" cellspacing="0" width="246">
    <tbody>
        <tr>

My client insists on editing the sidebox at the CSS/HTML level rather than just content, and I’d like to provide what is requested rather than spend time educating them (this, perhaps, is a topic for another S.O. question?).

I realise this has to do with CKEDITOR.config.protectedSource but I found very little documentation to help me, and I wouldn’t know what kind of RegEx to provide to avoid this.

How do I keep CKEditor from gobbling up the HTML/CSS code in this <textarea> tag?