强制 ckeditor 添加类

Question

我正在使用CKEditor和CKFinder来控制幻灯片的图像。 为了使幻灯片一切正常，图像需要"幻灯片赞助商"作为类添加到其中。ATM 如果您添加图像，则需要再次为每个图像添加类。我希望 CKEditor 自动添加类，但仅限于该实例。

我已经阅读了这个踏板：强制 CKEditor 仔细地将类添加到 p 标签中，但我无法让它工作。

所以这就是我的代码的样子

<form action="verwerken.php" method="post">
<div class="Slideshow-container w3-half w3-content w3-display-container" id="Slideshow">
<textarea style="width: 100%" rows="5" id="sponsorsideshow" name="sponsorslideshow">
<?php echo $sponsorslideshow; ?>
</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'sponsorslideshow', {
filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
editor.dataProcessor.htmlFilter.addRules({
elements :{
img : function( element ){
if ( element.className.indexOf("Slideshow-Sponsors") < 0){
element.className += 'Slideshow-Sponsors';
}
}
}
});
CKFinder.setupCKEditor( editor, '../' );
</script>
<button type="submit"">Opslaan</button>
</div>
</form>

预期的结果是 CKEditor 将 class="Slideshow-Sponsors" 添加到每个 img 中，但仅限于该实例。 ALSE 使用图像的同一页面上运行的其他实例，因此添加配置并不能提供良好的解决方案。 但实际结果是 ckEditor 没有添加类。

Answer 1

规则应该放在 instanceReady 事件中，你应该使用 hasClass 和 addClass 函数。

editor.on('instanceReady', function(evt) {
this.dataProcessor.htmlFilter.addRules({
elements: {
img: function(element) {
if (!element.hasClass('Slideshow-Sponsors')) {
element.addClass('Slideshow-Sponsors');
}
}
}
});
});