CODEWITHSUNDEEP
jquerycssckeditor
Petr Dušek
Petr Dušek

Reputation: 627

How to change css style-rules inside CKEDITOR (for example via jQuery)

I have spent a lot of time struggling with modifying CSS rules in CKEDITOR on the fly. But the result is still not satisfying :-).

I would like to select the DOM elements from CKEDITOR and set the CSS style. Then I would like to save the information of the CSS (for re-using the document).

I have read, that the best way is to use jQuery. I have tried it, but was not succesful. Any ideas how to do it?

Thanks a lot.

Upvotes: 0

Views: 1134

Answers (2)

mahmoud fathy
mahmoud fathy

Reputation: 78

for CKEDITOR4 you can append css rules as text for example

     const styles = `
      .example-css-selector {
        padding: 3px 5px;
        color: red;
        border-radius: 3px;
      }`;
    editor.document.appendStyleText(styles);

Upvotes: 0

EpokK
EpokK

Reputation: 38092

I think you can use 'dataProcessor' for this :

CKEDITOR.replace('editor1', {
   on: {
      pluginsLoaded: function(event) {
         event.editor.dataProcessor.dataFilter.addRules({
            elements: {
               a: function(element) {
                  var attr = element.attributes;
                  if(attr.href && attr.href.indexOf('#') === -1) {
                     element.attributes.target = '_blank';
                  }
               },
               // remove script
               script: function(element) {
                  return false;
               }
            }
         });
      }
   }
});

Documentation : http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-dataProcessor

Upvotes: 2

Related Questions