强制 ckeditor 添加 class

Question

我结合使用 CKEditor 和 CKFinder 来控制幻灯片的图像。为了让幻灯片放映一切正常，图像需要 "Slideshow-Sponsors" 作为 class 添加到它们。 ATM 如果您添加图像，则需要再次为每个图像添加 class。我希望 CKEditor 自动添加 class 但仅在那种情况下。

我已经仔细阅读了这篇文章：Force CKEditor to add a class to p-tags，但我无法让它发挥作用。

这就是我的代码的样子

<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 但仅在该实例中。同一页面上还有其他实例运行也使用图像，因此添加配置并不能提供好的解决方案。但实际结果是 ckeditor 没有添加 class.

Answer 1

规则应放在 instanceReady event and you should use hasClass and addClass 函数中。

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

强制 ckeditor 添加 class

Force ckeditor to add a class

php

class

ckeditor

ckfinder