How to use dataprocessors?

Hi there,

I'm really new to CKEditor. I searched about this topic, but I didn't find any answer for my question I have.

At first: I'm using latest version of CKEditor with it's jQuery Adapter.

I add a CKEditor by using this code:

$('#editor').ckeditor(function(){}, { customConfig: '../ckeditor_config.js'});

the custom config is simply for changing the toolbars to my need.

Than I move on with this code:

  var editor = $('#editor').ckeditorGet();

  editor.dataProcessor.dataFilter.addRules({
    elements: {
      img: function (element) {
        element.attributes.src = '../' + element.attributes.src;
      }
    }
  });

  editor.dataProcessor.htmlFilter.addRules ({
    elements: {
      img: function (element) {
        element.attributes.src = element.attributes.src.substr(3);
      }
    }
  });

It's pretty easy. Getting the editor instance (like shown in Dev Guide) and setting the processors. It's just for rewriting the src for an image to see it in the admin area.

But I get the error, that "editor.dataProcessor" is not defined. I tried it with "CKEDITOR.dataProcessor" too, but got the same error.

What's the problem?

Thanks for your help.

Sat, 04/09/2011 - 00:58

mrfr0g

Joined: 29/03/2011

Posts: 5

Re: How to use dataprocessors?

It's not clear from your code, are you making sure to apply these rules after the instanceReady event has fired? To my knowledge the editors have to be initialized before you can apply rules to the dataProcessor.

Using your example:

CKEDITOR.on('instanceReady', function (editor) {
// Editor is passed as the first parameter, don't need to get it
//var editor = $('#editor').ckeditorGet();

  editor.dataProcessor.dataFilter.addRules({
    elements: {
      img: function (element) {
        element.attributes.src = '../' + element.attributes.src;
      }
    }
  });

  editor.dataProcessor.htmlFilter.addRules ({
    elements: {
      img: function (element) {
        element.attributes.src = element.attributes.src.substr(3);
      }
    }
  });
});

Sun, 04/10/2011 - 17:15

raubi

Joined: 08/04/2011

Posts: 5

Re: How to use dataprocessors?

Hi,

thanks for your answer. I'm go to try it, if I'm back on work tomorrow.

Mon, 04/11/2011 - 09:05

raubi

Joined: 08/04/2011

Posts: 5

Re: How to use dataprocessors?

viewtopic.php?p=54333#p54333

  CKEDITOR.on('instanceReady', function (e) {
     e.editor.dataProcessor.dataFilter.addRules({
      elements: {
        img: function (element) {
          element.attributes.src = '../' + element.attributes.src;
        }
      }
    });

    e.editor.dataProcessor.htmlFilter.addRules ({
      elements: {
        img: function (element) {
          element.attributes.src = element.attributes.src.substr(3);
        }
      }
    });
  });

Mon, 04/11/2011 - 10:05

raubi

Joined: 08/04/2011

Posts: 5

Re: How to use dataprocessors?

ahhhhhhh.

They are just used if you press the Button "Source". Then they seem to be working, but that is not that, what I want. :-/ They should work without pressing this button (because my customer don't have this one).

For now I'm going to use some regex to rewrite the img

Tue, 04/12/2011 - 18:06

mrfr0g

Joined: 29/03/2011

Posts: 5

Re: How to use dataprocessors?

http://docs.cksource.com/CKEditor_3.x/D ... _Processor

Thu, 04/14/2011 - 15:14

brunis

Joined: 13/04/2011

Posts: 29

Re: How to use dataprocessors?

elements:
{
   'idt:templatefield': function (element) {
      if (element.attributes && element.attributes['label'])
      {
         element.attributes['style'] = templateBGcss;
         element.attributes['contenteditable'] = 'false';
         element.innerHTML = element.attributes['label'];
         return element;
         //return CKEDITOR.plugins.placeholder.addFieldFromExisting(editor, element);
      }
   },
}