CKEditor4配置与开发详细中文说明文档(12)

日期：2020-05-11 栏目：程序人生浏览：次

用于元素列表中的星号意思是：“该规则对所有元素接受后面的属性，但不是这些元素本身；必须有另一条规则显式地接受这些元素”。
属性列表中的星号意思是：“接受所有属性”。
用于属性列表中条目名前的感叹号（!）（如：[!href]）意思是：“此属性是必需的。

如果一个元素不具有此属性，此规则不应应用于该元素（故此元素将不会由它得到验证）”。

例子：

// 一条规则接受<p>和<h1>元素，但没有任何属性。
 p h1
//一条规则接受具有可选的"left"和 "right"类的<p>和<h1>元素 //注意：两个元素都可能含有这些类，而不仅仅是<h1>
p h1(left,right)
//一条规则接受具有其所有属性的<p>和<h1>元素
p h1[*]
//一条规则接受<a>，只有当它含有"href"属性时。
 a[!href]
//一条规则接受<img>，它具有必需的"src"属性和一个可选的"alt"属性，加上可选的"width"和"height"样式
img[alt,!src]{width,height}
//与上面相同，因为属性的顺序和其清单是不相关的，并且忽略空格
img { height, width } [ !src, alt ]

允许内容规则集可以含有由分号（;）分隔的多条规则。如：

// 这些规则允许：
// 具有可选的"text-align"样式的<p和><h1>元素 //具有必需的"href"属性的<a>
// <strong> 和 <em> 元素,
//具有可选的"tip"类的<p>（故<p>元素可以同时具有"text-align"样式和"tip"类）
 p h1{text-align}; a[!href]; strong em; p(tip)
 //这些规则允许：
// 具有可选的"id"属性的<p>和<h1>元素
//具有必需的"href"属性和可选的"id"属性的<a>
p h1; a[!href]; *[id]

调试

为了验证允许内容规则是否被正确解析了，可以检查CKEDITOR.editor.filter对象的CKEDITOR.filter.allowedContent属性。

var editor = CKEDITOR.replace( 'textarea_id', {
   allowedContent: 'a[!href]; ul; li{text-align}(someclass)' } 
  );
  editor.on( 'instanceReady', function() {
   console.log( editor.filter.allowedContent )
   }
  );
// 这将对下列数组做日志：
// { elements: 'p br', ... } (默认编辑器规则)
// { elements: 'a', attributes: '!href' }
// { elements: 'ul' }
// { elements: 'li', styles: 'text-align', classes: 'someclass' }

对象格式（Object Format）

为方便使用，允许内容规则可以定义成标准的对象字面量，故下面的：

allowedContent: 'p h1{text-align}; a[!href]; strong em; p(tip)'
 
//与下面的相对应：
 
allowedContent: {  
   'p h1': { 
    styles: 'text-align'  
   },   
   a: { 
    attributes: '!href'   
   },
   'strong em': true,   
   p: { 
    classes: 'tip'   
   }
}

转载注明出处：http://www.heiqu.com/269.html

CKEditor4配置与开发详细中文说明文档(12)

相关推荐