Заставить ckeditor добавить класс - PullRequest
Новая
       9

Заставить ckeditor добавить класс

0 голосов
/ 11 апреля 2019

Я использую 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, но только в этом случае. на той же странице работают другие экземпляры, которые также используют изображения, поэтому добавление в конфигурацию не дает хорошего решения. но фактический результат заключается в том, что ckeditor не добавляет класс.

1 Ответ

1 голос
/ 11 апреля 2019

Правила должны быть помещены в событие 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');
                }
            }
        }
    });
});
...