我正在使用 CKEditor 3.6 版
我想自动添加class="newsleft"到通过所见即所得添加的任何图像标签中。
我看过一些提到 dataProcessor 的帖子，但不知道应该添加哪个文件或如何添加。
有人可以告诉我将以下代码放在哪里吗？
editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
img: function( element )
{
if ( !element.attributes.alt )
element.attributes.alt = 'An image';
}
}
} );
基本上把它放在instanceReady监听器中就可以了（3.x和4.x）（小提琴）：
CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,toolbar,sourcearea,image,basicstyles',
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
img: function( el ) {
// Add an attribute.
if ( !el.attributes.alt )
el.attributes.alt = 'An image';
// Add some class.
el.addClass( 'newsleft' );
}
}
} );
}
}
} );
CKEDITOR.htmlParser.element.addClass从 CKEditor 4.4 开始可用。您可以使用this.attributes[ 'class' ]该版本之前的版本。
这是另一种方法：
CKEDITOR.on( 'instanceReady', function( evt ) {
evt.editor.dataProcessor.htmlFilter.addRules( {
elements: {
img: function(el) {
el.addClass('img-responsive');
}
}
});
});
这在 3.6 中对我有用
将以下代码添加到 config.js
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is image dialog window
if (dialogName == 'image') {
// Get a reference to the "Advanced" tab.
var advanced = dialogDefinition.getContents('advanced');
// Set the default value CSS class
var styles = advanced.get('txtGenClass');
styles['default'] = 'newsleft';
}
});
由于这个话题在 Google 中的搜索率很高，我可能会通过回答以下问题来帮助人们：如何在 CKeditor 中插入图像时添加默认类。此答案适用于 CKeditor 4.5.1。因为这是现在的最新版本。
我已经尝试过了，它有效！
在版本：4.5.3