3

Hi I've got a small problem with ckeditor, basically I need to make the editor run it's html cleanup command. Is there any way of doing this. At present it doesn't seem to run after I type some stuff into the source and then press save I would like it to tidy the html like it does in the 'normal' editor view Any ideas? Thanks Richard

here is some example code

<SCRIPT type=text/javascript src="http://www.johnpricephotography.co.uk/crawler.js">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   updated: 4/2011 for random order option, more (see below)
*/

</SCRIPT>
<div class="marquee" id="mycrawler2">
    <img alt="Derby wedding photographer - masa restaurant wedding" src="http://johnprice.foliopic.com/images/3539/homepage//226.jpg" style="width: 204px; height: 162px" /> <img alt="Shottle Hall Derby by Nottingham wedding photographer, shottle hall wedding" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/large/049_1314978790.jpg" style="width: 204px; height: 162px" /> <img alt="Shottle Hall wedding Derby wedding by Nottingham wedding photographer" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/large/13150063462954.jpg" style="width: 204px; height: 162px" /> <img alt="derby conference centre wedding by nottingham wedding photographer" src="http://johnprice.foliopic.com/images/3539/homepage//146_1.jpg" style="width: 250px; height: 162px" /> <img alt="professional wedding photographer john price" src="http://johnprice.foliopic.com/images/3539/homepage//31.jpg" style="width: 181px; height: 162px" /> <img alt="Leicestershire wedding photographer john price" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/normal/ian---jo--24-of-62-_1312848448.jpg" style="width: 223px; height: 162px" /> <img alt="Leicestershire wedding photographer john price" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/normal/ian---jo--47-of-62-_1312849131.jpg" style="width: 124px; height: 162px" /> <img alt="Derby river lights holiday inn wedding by derby wedding photographer john price" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/normal/112_1314726892.jpg" style="width: 164px; height: 162px" /> <img alt="alvaston park wedding from derby conference centre wedding" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/normal/163_1311890753.jpg" style="width: 220px; height: 162px" /> <img alt="London uk wedding photographer" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/normal/flashmo-800x450-30_1311894940.jpg" style="width: 215px; height: 162px" /> <img alt="London uk wedding photographer" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/normal/flashmo-800x450-04_1311894907.jpg" style="width: 212px; height: 162px" /></div>
<div class="marquee">
    &nbsp;</div>
<h1 align="center">
    <font face="Times New Roman, Times, serif" size="4"><b><font size="5">By Nottingham Wedding Photographer - John Price, </font></b></font><br />
    <span style="color: #a9a9a9"><font face="Times New Roman, Times, serif" size="4"><b><font size="5">&#39;Give me a wedding and I will give you memories&#39;</font></b></font></span></h1>
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 800px">
    <tbody>
        <tr>
            <td>
                <p>
                    <br />
                    <span style="font-size: 14px"><font face="Times New Roman, Times, serif"><span style="color: #000000">Welcome to the&nbsp;website of Nottingham wedding photographer John Price. </span><span style="color: #000000">If you are browsing my website, the chances are that you already are or have recently become engaged. Congratulations. You are now both embarking on an exciting journey together and never before will you have so many choices to make, not least choosing a wedding photographer in nottingham or a wedding photographer in Derby or Leicester and beyond.&nbsp;</span></font></span></p>
            </td>
        </tr>
    </tbody>
</table>
<div>
    &nbsp;</div>
<SCRIPT type=text/javascript>
marqueeInit({
    uniqueid: 'mycrawler2',
    style: {
        'padding': '2px',
        'width': '840px',
        'height': '160px'
    },
    inc: 10, //speed - pixel increment for each iteration of this marquee's movement
    mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    moveatleast: 1,
noAddedSpace: false,
    neutral: 106,
    savedirection: true,
    random: true

});
</SCRIPT><div>
    &nbsp;</div>
<p>
    <span style="font-size: 16px"><span style="font-family: arial, helvetica, sans-serif">&nbsp;</span></span></p>
<p>
    &nbsp;</p>
<table border="0" cellpadding="1" cellspacing="1" style="width: 800px">
    <tbody>
        <tr>
            <td>
                <p>
                    <strong><span style="font-size: 18px"><span style="font-family: arial, helvetica, sans-serif"><strong><span style="font-size: 18px"><span style="font-family: arial, helvetica, sans-serif">Nottingham wedding photographer - John Price<br />
                    Receives wedding photographer recommedation by Insight Magazine. </span></span></strong></span></span></strong></p>
                <p style="text-align: center">
                    <strong><span style="font-size: 18px"><span style="font-family: arial, helvetica, sans-serif">&nbsp;</span></span></strong></p>
                <p>
                    <strong><span style="font-size: 18px"><span style="font-family: arial, helvetica, sans-serif"><span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">October 2011 edition of the Insight Magazine features a full page recommended article on the wedding photography services that I provide. </span></span></span></span></strong></p>
                <p>
                    &nbsp;</p>
                <p>
                    <span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">This is also a privilege for the beautiful bride and grooms which also feature in this article. The photos was all taken from real weddings that I photographed during 2011</span></span></p>
                <p>
                    &nbsp;</p>
                <p>
                    <span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">A big thank you to the couples featured.</span></span></p>
                <p>
                    <span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">Wayne&nbsp;&amp; Katey was married at the Derby Riverlights Holiday Inn, </span></span></p>
                <p>
                    <span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">Ian &amp; Jo were had an amazing wedding at&nbsp;Shottle Hall, Derby..&nbsp; </span></span></p>
                <p>
                    <span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">James &amp; Kerry-Ann was married at the Derby Conference Centre.</span></span></p>
                <p>
                    &nbsp;</p>
                <p>
                    &nbsp;</p>
                <p>
                    <span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">You can view a pdf copy of this interview <a href="http://www.johnpricephotography.co.uk/Nottingham Wedding Photographer.pdf"><strong><span style="color: #0000ff"><span style="font-size: 14px">Here</span></span></strong></a>.or see an image <strong><a href="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/large/1317302692.jpg"><span style="color: #0000ff"><span style="font-size: 14px">Here</span></span></a></strong></span></span></p>
            </td>
            <td style="text-align: center">
                <img alt="Nottingham Wedding Photographer Recommended By Insight Magazine" src="http://www.nottinghamweddingphotography.co.uk/images/sites/3539/gallery/normal/1317297874.png" style="width: 264px; height: 187px" /></td>
        </tr>
    </tbody>
</table>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
<p>
    &nbsp;</p>
<p style="text-align: center">
    &nbsp;</p>
<p>
    <span style="font-size: 12px"><span style="font-family: arial, helvetica, sans-serif">Wedding photographer in Nottingham, Wedding photographer in Derby, Wedding photographer in leicester.</span></span></p>
<p>
    <font face="Times New Roman, Times, serif"><font color="#666666"><font color="#666666">John Price is a Nottingham NG based wedding photographer who enjoys capturing that special moment that you know you can look back on time and time again. As a Nottingham wedding photographer, I make no distinction between a Church or Civil Ceremony, Registry Office or Civil Partnerships. Every wedding commands the very best.<span style="display: none">&nbsp;</span></font></font></font></p>
<p>
    <font face="Times New Roman, Times, serif"><font color="#666666">Nottingham Wedding Photography, Nottingham Boudoir Photography, Nottingham Portrait Photography, Nottingham Trash The Dress Photography Covering not just Nottingham, Mansfield, Derby, Leicester, Lincolnshire, Peterborough but the whole of the UK</font></font>&nbsp;<span style="display: none">&nbsp;<span style="display: none">&nbsp;</span></span></p>
<p>
    &nbsp;</p>
<p>
    &nbsp;&nbsp;</p>
<p>
    <a href="http://www.nottinghamweddingphotography.co.uk/article/shottle-hall-wedding-photos-of-ian---jo-1963">Shottle Hall Wedding Photos by Derby Wedding Phototographer John Price&nbsp;Photography at shottle hall&nbsp;&nbsp; </a></p>
<p>
    <a href="http://www.nottinghamweddingphotography.co.uk/article/the-wedding-of-james---lisa-at-rufford-abbey-country-park-2144">Rufford Abbey Wedding Photos by Nottingham Wedding Phototographer Nottingham Rufford Abbey Country Park.</a></p>
<p>
    <a href="http://www.nottinghamweddingphotography.co.uk/article/masa-restaurant-wedding--the-old-chapel--mark---anna-1915">Masa Restaurant Wedding photos Derby wedding photography at Massa Restaurant.</a></p>
<p>
    <a href="http://www.nottinghamweddingphotography.co.uk/article/the-derby-conference-centre-wedding---james---kerry-ann-1911">The Derby Conference Centre Wedding photos by Derby wedding photographer John Price Photography</a></p>
<p>
    <a href="http://www.nottinghamweddingphotography.co.uk/article/the-wedding-of-craig---sarah-at-the-nottingham-council-house-1906">Nottingham Council House Wedding Photos Photographer</a></p>
<p>
    <a href="http://www.nottinghamweddingphotography.co.uk/page/nottingham-boudoir-photographer-1949">Nottingham Boudoir, Derby Boudoir, Leicester Boudoir Photographer</a></p>

How this works but what I want to do is fix the html if there is a problem. Basically what happens is that this html gets saved into a hidden element and then when the user clicks save it all gets sorted out. To be honest thinking about it now it's prob not the best way to process this but at present just trying to fix the problem. Richard

Richard Housham
  • 864
  • 2
  • 15
  • 34
  • I think you just need to switch to 'normal' editor view before saving. – Mateo Jan 23 '12 at 14:35
  • Yeah I know that, but we are talking about users and you can't control all of them. If you have any other ideas that would be great. Thanks for your help. – Richard Housham Jan 25 '12 at 10:19
  • Dou you use the embbed 'save' button in the toolbar or your own ? – Mateo Jan 25 '12 at 15:26
  • I think about simulating a click on 'source' button before saving... – Mateo Jan 25 '12 at 15:36
  • I use a custom one, I'll think about simulating a click on source see if I can do that - thanks another idea I have is to copy the code into a temp display none div and some browsers (IE7, don't worry I hate it too) seem to fix it so that's a possibility as well. Thanks for your help any other ideas are welcome! – Richard Housham Jan 25 '12 at 15:59
  • Hi was about to give you the points but trying in ie9 and I got a few error messages - which I'm not sure about. I've had Message: Unable to get value of the property 'innerHTML': object is null or undefined and Message: Unable to get value of the property 'on': object is null or undefined and just now an error from ie9 Message: 66 - the errors seem to come up mostly when you make a change and then go back to the wysiwyg editor. I'm going to try and put an if statement to fire your 'fix' commands only if in source more as wysiwyg fixes the code anyway. – Richard Housham Feb 02 '12 at 10:34

1 Answers1

4

Please, try to do the following before you save(just to process data with CKEditor native data processor):

    var yourEditor = CKEDITOR.instances.yourEditor;
    // retrieve current data from editor and process it with its dataprocessor
    var formattedDataForWysiWyg = yourEditor.dataProcessor.toHtml(yourEditor.getData());
    // "decode" content processed by ckeditor
    var sourceData = yourEditor.dataProcessor.toDataFormat(formattedDataForWysiWyg);
    // set formatted data back
    yourEditor.setData(sourceData);

Sure, it'll be perfomance hit if you do it frequently.

UPDATE: Sorry, I misled you a bit, but after you mentioned "{cke_protected}" I remembered. So, "toHtml" method of dataProcessor does the following: fixes broken html and wraps protected elements(scripts, flash) into special code constructions to prohibit editing through wysiwyg mode, but when the same html should be displayed in source mode, editor uses "toDataFormat" method of dataProcessor to remove all ckeditor-related code constructions. So, see my update above.

UPDATE 2: New solution works for both 3.6.2 and 3.5.3 versions of CKEditor.

Aleh Zasypkin
  • 731
  • 6
  • 8
  • Sorry it seemed to work and then a user came along with a very long piece of html and it didn't want to work! I guess it's back to the drawing board - thanks for your help. – Richard Housham Jan 27 '12 at 10:58
  • Richard, could you please somehow provide the html sample for which it isn't working and I'll try to figure out what is going on? – Aleh Zasypkin Jan 27 '12 at 13:18
  • Hmm, I've just tried to insert the whole HTML you provided into editor source mode, than removed last "" and executed "yourEditor.dataProcessor.toHtml(yourEditor.getData())" and html fragment was fixed("

    " was closed). Could you please clarify in which way you 'break' html ?

     – Aleh Zasypkin Jan 31 '12 at 12:50
  • Hi when I did that on this html I got – Richard Housham Feb 01 '12 at 09:37
  • I'm on CKEditor 3.5.3 is there a difference? – Richard Housham Feb 01 '12 at 09:38
  • I just gets really odd as well with sometimes destroying the content completely, I should add that I'm making the editor through ajax. Could I ask if you know a way to switch back to the normal editor as I think that might be the solution. – Richard Housham Feb 01 '12 at 09:42
  • I test it on CKEDitor demo page(http://ckeditor.com/demo) and run js through firebug console. The version they use on Demo page is 3.6.2(revision:'7275'). But I'll try to replicate it on local box with two different version(3.6.2 and 3.5.3) and update you later. – Aleh Zasypkin Feb 01 '12 at 10:35
  • Thanks it works for me I had to add if(yourEditor.mode == 'source') { } around it as had a few probs in ie really odd but yeah it works. Thanks for your help the points are yours if I can figure out how to accept the answer! – Richard Housham Feb 02 '12 at 11:15