-
CKEditor 查看源码中空格的过滤
普通类 -
- 支持
- 批判
- 提问
- 解释
- 补充
- 删除
-
-
前言：
关于如何使用 CKEditor 网上的文章已经很多了，前些天本人还发过一篇 ASP.NET MVC 3 中使用 CKEditor 的文章。默认配置下使用 CKEditor 时点击“源码”时，发现会自动生成回车换行，并带个制表符，后台程序接收时发现确实为：<p>\r\n\t、<ol>\r\n\t 等。
当然这样不会有什么问题，但追求极致的人会觉得它不仅占用空间，而且影响源码中应有的整洁。大家看看下边两个图就会清楚本篇要实现的功能：
我们可以写代码来过滤 CKEditor 中的空格，但我们不需要花费这个时间， CKEditor 中的配置功能非常强大，我们只需将下边的代码添加到 ckediotr 文件夹下的 config.js 文件中即可，如下：
CKEDITOR.editorConfig = function( config ){};CKEDITOR.on('instanceReady', function (ev) {with (ev.editor.dataProcessor.writer) {setRules("p", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("h1", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("h2", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("h3", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("h4", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("h5", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("div", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("table", { indent: false, breakAfterOpen: false, breakBeforeClose:false });setRules("tr", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("td", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("iframe", { indent: false, breakAfterOpen: false, breakBeforeClose:false });setRules("li", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("ul", { indent: false, breakAfterOpen: false, breakBeforeClose: false});setRules("ol", { indent: false, breakAfterOpen: false, breakBeforeClose: false});}});这样我们就实现了 CKEditor 中空格的过滤，当再次点“源码”时就会发现代码变得很紧密，最终在页面上解析后的效果相信大家可以想像到了
。 -
-
- 标签：
- indent
- false
- breakafteropen
- 源码
- 空格
- ckeditor
- setrules
- breakbeforeclose
-
.jpg)
学习元评论 (0条)
聪明如你，不妨在这 发表你的看法与心得 ~