如何防止ckeditor添加空白html标记

时间:2015-10-16 06:59:43

标签: html visual-studio-2012 ckeditor

我在Windows 8.1操作系统中安装了Visual Studio 2012 Express,并根据要求在我的项目中使用CKEditor。

我是CKEditor的新手,并以正确的方式使用它,但问题是在CKEditor中定义源代码中的html,它会自动替换

<div><i class="classname"></i></div>

<div>&nbsp;</div> or <div></div>

那么如何防止CKEditor不替换它并保存原样? 我有一些解决方案但仍然有点错误我正在替换

<i class="classname"></i>

<div class="classname"></div>

但在标记之间会自动添加&amp; nbsp。

如何防止它不添加&amp; nbsp?

在下面的图片中,CKEditor已打开,您可以在圆角区域看到它会自动在我的代码中添加一些空格或制表符。

如何制止?

enter image description here

3 个答案:

答案 0 :(得分:6)

看一下这篇文章: CKEditor unwanted &nbsp; characters

  

经过一番研究后,我可能会对这个问题有所了解 -   遗憾的是,没有开箱即用的解决方案。

     

在CKEditor中有四种方式可以发生不间断空间(有谁知道更多?):

     
      
  1. Automatic filling of empty blocks。这可以在配置中禁用:

    config.fillEmptyBlocks = false;
    
  2.   
  3. Automatic insertion when pressing TAB-key。这可以在配置中删除:

    config.tabSpaces = 0;
    
  4.   
  5. 将双空格转换为SPACE + NBSP。 This is a browser behavior and will thus not be fixed by the CKEditor team。它可以修复   服务器端或客户端javascript onunload。也许这个PHP是一个   开始:

    preg_replace('/\s&nbsp;\s/i', ' ', $text);
    
  6.   
  7. 通过复制和粘贴。如果粘贴UTF-8 no-break space或双空格,CKEditor会自动转换它。唯一的   解决方案我在这里看到正在做一个如上所述的正则表达式。 config.forcePasteAsPlainText = true;没有帮助。

  8.         

    总结:要摆脱所有不间断的空间,你需要写一个   清除用户输入的附加功能。

         

    非常感谢评论和进一步的建议! (我使用ckeditor   3.6.4)

编辑#1

看看这个。

CKEDITOR.dtd.$removeEmpty.i= 0;

您也可以将其与span和其他标签一起使用。

The documentation to this.

  

停止在CKEditor中删除任何空标记

     

如果有,则会删除要删除的标记列表   empty(请参阅dtd.js和$ removeEmpty或运行CKEDITOR.dtd。$ removeEmpty   来自控制台)。

     
      
  • 来自HTmL
  •   
     

要确保未删除某个空标记,请添加属性   “数据CKE-生存”:

<span data-cke-survive="true" ></span>
     
      
  • 来自配置
  •   
     

或者您可以配置不删除的特定标记:

if(window.CKEDITOR){
            CKEDITOR.on('instanceCreated', function (ev) {
                CKEDITOR.dtd.$removeEmpty['span'] = 0;
                CKEDITOR.dtd.$removeEmpty['TAG-NAME'] = 0;
           }
}
     

通过在CKEDITOR.dtd。$ removeEmpty中将元素设置为0,它   防止CKEditor删除空标签。

http://margotskapacs.com/

答案 1 :(得分:1)

此主题可能有用https://stackoverflow.com/

简而言之 - 您可以在配置中禁用自动填充空块:

config.fillEmptyBlocks = false;

更多信息 - here

UPD。

您可以尝试此config.protectedSource.push(/<i[^>]*><\/i>/g);

来自official documentation

  

{Array} CKEDITOR.config.protectedSource自:3.0

     

要在输入HTML上执行的正则表达式列表,表示匹配时的HTML源代码,必须在WYSIWYG模式下可用于编辑。

     

config.protectedSource.push(/&lt; \?[\ s \ S] *?\?&gt; / g); // PHP代码

     

config.protectedSource.push(/&lt;%[\ s \ S] *?%&gt; / g); // ASP代码

     

config.protectedSource.push(/(] +&gt; [\ s | \ S] *?&lt; / asp:[^&gt;] +&gt;)|(] + /&gt;)/ gi); // ASP.Net代码

UPD 2

希望这会有所帮助。

&#13;
&#13;
CKEDITOR.on( 'instanceReady', function( ev )
{
// turn off excess line breaks in html output formatting for blockquote tag.
// In same way you can correct any tag output formating

ev.editor.dataProcessor.writer.setRules( 'blockquote',
{
  indent : false,
  breakBeforeOpen : false,
  breakAfterOpen : false,
  breakBeforeClose : false,
  breakAfterClose : true
});
});
&#13;
&#13;
&#13;

答案 2 :(得分:0)

对于使用UniSharp / laravel-ckeditor的人

<script>
  var options = {
    fillEmptyBlocks: false,
  };

  CKEDITOR.replace( 'content', options);
</script>