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?