Javascript 强制CKEditor向Image2小部件添加类
我想配置CKEditor(版本4.3.2)为内容中的每个Image2小部件图标记添加一个class属性。我使用以下代码(基于):Javascript 强制CKEditor向Image2小部件添加类,javascript,css,ckeditor,wysiwyg,Javascript,Css,Ckeditor,Wysiwyg,我想配置CKEditor(版本4.3.2)为内容中的每个Image2小部件图标记添加一个class属性。我使用以下代码(基于): 不幸的是,我只能为没有类“caption”的figure元素添加类,但它不再是一个小部件。您可以使用CKEditor 4.4及更高版本,使用一些配置选项来实现这一点。以下是相关说明: 由于在CKEDITOR 4.4中引入了CKEDITOR.config.image2_alignClasses选项,您可以使用CSS类设置图像对齐。此外,CKEDITOR.config.i
不幸的是,我只能为没有类“caption”的figure元素添加类,但它不再是一个小部件。您可以使用CKEditor 4.4及更高版本,使用一些配置选项来实现这一点。以下是相关说明: 由于在CKEDITOR 4.4中引入了CKEDITOR.config.image2_alignClasses选项,您可以使用CSS类设置图像对齐。此外,CKEDITOR.config.image2_captionedClass选项允许您将自定义类分配给标题图像的元素 将生成类驱动、可设置样式的标记,使您能够避免不灵活和非语义的内联CSS代码:
我的字幕
CKEDITOR.on("instanceReady", function(e)
{
var editor = e.editor;
pClass = 'additional_class',
pClassRegexp = new RegExp(pClass, 'g');
editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
figure: function(element)
{
// If there's no class, assign the custom one:
if (!element.attributes['class'])
element.attributes['class'] = pClass;
// It there's some other class, append the custom one:
else if (!element.attributes['class'].match(pClassRegexp))
element.attributes['class'] += ' ' + pClass;
}
}
});
});
config.image2_alignClasses = [ 'image-left', 'image-center', 'image-right' ];
config.image2_captionedClass = 'image-captioned';
<figure class="image-captioned image-right">
<img alt="MyImage" src="myimage.png" />
<figcaption>MyCaption</figcaption>
</figure>