ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript-使用ckeditor整理HTML

2019-11-01 20:37:41  阅读:246  来源: 互联网

标签:ckeditor tidy html javascript


嗨,我的ckeditor有一个小问题,基本上我需要让编辑器运行它的html cleanup命令.
有什么办法做到这一点.
目前,在我向源代码中键入一些内容然后按保存后,它似乎没有运行,我希望它像在“常规”编辑器视图中那样整理html.
有任何想法吗?
谢谢
理查德

这是一些示例代码

<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>

这是如何工作的,但是如果有问题,我想做的就是修复HTML.
基本上发生的是,此html被保存到一个隐藏元素中,然后当用户单击“保存”时,所有内容都被整理了.
老实说,现在考虑这不是解决此问题的最佳方法,而目前只是尝试解决问题.
理查德

解决方法:

请在保存之前尝试执行以下操作(仅用于使用CKEditor本机数据处理器处理数据):

    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);

当然,如果您经常这样做,将会给人留下深刻的印象.

更新:
抱歉,我误导了你一面,但是当你提到“ {cke_protected}”后,我想起来了.因此,dataProcessor的“ toHtml”方法执行以下操作:修复损坏的html并将受保护的元素(脚本,flash)包装为特殊的代码结构,以禁止通过所见即所得模式进行编辑,但是当应在源代码模式下显示相同的html时,编辑器将使用“ dataProcessor的“ toDataFormat”方法来删除所有与ckeditor相关的代码构造.因此,请参阅上面的更新.

更新2:
新解决方案适用于CKEditor的3.6.2和3.5.3版本.

标签:ckeditor,tidy,html,javascript
来源: https://codeday.me/bug/20191101/1986193.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有