CKEditor编辑器allowedContent过滤器规则设置教程

在CKEditor中有个allowedContent属性,主要功能是规定编辑内容允许的标签、标签的属性(attributes)、标签的样式(style)以及可以使用的类(class),默认为开启状态,可以通过在config.js文件中配置,如果要禁用内容过滤,只需要找到ckeditor/config.js配
在CKEditor中有个allowedContent属性,主要功能是规定编辑内容允许的标签、标签的属性(attributes)、标签的样式(style)以及可以使用的类(class),默认为开启状态,可以通过在config.js文件中配置,如果要禁用内容过滤,只需要找到ckeditor/config.js配置文件中添加如下代码:
config.allowedContent=true
CKEditor编辑器在开启过滤器状态下,可以详细设置各种过滤规则,比如设置允许哪些标签,只允许带哪些属性的标签、过滤什么标签、过滤什么属性、过滤什么样式等。
比如禁用图片img属性中的宽高(width,height),规则如下:
config.disallowedContent = 'img{width,height};img[width,height]';
当然禁用图片img属性中的宽高(width,height)也可以在config.js中添加如下代码,找到:
CKEDITOR.editorConfig = function( config ) {
…….代码段….
}; 
在这段的下面添加如下代码:
CKEDITOR.on('dialogDefinition', function(ev) {
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
        var editor = ev.editor;
        if (dialogName == 'image') {
           dialogDefinition.onOk = function(e) {
              var imageSrcUrl = e.sender.originalElement.$.src;
              var imageAlt = $('#title').val();
              var imgHtml = CKEDITOR.dom.element.createFromHtml("<img src='" + imageSrcUrl + "' alt='" + imageAlt + "'/>");
              editor.insertElement(imgHtml);
           };
        }
});

设置允许某些标签:
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
更多详细过滤器规则可参考CKEditor官方文档
http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

使用Vite从零搭建前端项目的详细过程 目录 一.环境搭建 二.初始化项目 一.环境搭建 首先,请确保已经安装了代码编辑器和浏览器,如果没有安装推荐安装VSCode和Chrome浏览器. 其次是安装 Node.js,如果你的系统中还没有安装 Node.js ,可以进入 Nodejs 官网下
HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定。但是AJAX却是例外的,所以解决方法是设置响应为session失效。
关于ES6中的箭头函数超详细梳理 目录 一.箭头函数的介绍 1.1 什么是箭头函数 1.2 基本语法 1.3 箭头函数的参数 1.4 箭头函数的函数体 二.箭头函数的this指向规则 三.箭头函数的arguments规则 3.1 箭头函数没有自己的arguments 3.2 可以用rest替代,rest参数获
JavaScript实现QQ聊天室功能 本文实例为大家分享了JavaScript实现QQ聊天室的具体代码,供大家参考,具体内容如下 1. 任务要求 1)掌握基本过滤选择器: 2)掌握jQuery对象的click()方法: 3)掌握jQuery对象的css()方法: 4)掌握jQuery对象的addClass()方法: 5)如何获取指定