different HTML processor

Hi,

I am trying to include the CKeditor into a wiki installation. The written text is not HTML but some wiki text language. I looked at the sourcecode plugin that comes with the CKeditor to transform the HTML to some wiki text.
This works well when hitting the source code button in the toolbar. To achieve this I placed my custom code inside the loadData() function of the sourcecode plugin.
What I don't know is where to place the code that makes the transformation back into html. This must happen when the source code button is hit again to switch back to the wysiwyg mode. How can I do this?
Any help is very appreciated.
Thank you.

Tue, 10/26/2010 - 14:58

choxy

Joined: 26/10/2010

Posts: 4

Re: different HTML processor

This is how I created custom HTML processor.

cke/plugins/customprocessor/plugin.js:

CKEDITOR.plugins.add( 'customprocessor',
{
   requires : [ 'htmlwriter' ],
   init : function( editor )
   {
      editor.dataProcessor = new CKEDITOR.customprocessor( editor );
   }
});

CKEDITOR.customprocessor = function( editor )
{
   this.editor = editor;
   this.writer = new CKEDITOR.htmlWriter();
   this.dataFilter = new CKEDITOR.htmlParser.filter();
   this.htmlFilter = new CKEDITOR.htmlParser.filter();
};

CKEDITOR.customprocessor.prototype =
{
   toHtml : function( data, fixForBody )
   {
      // all converting to html (like: data = data.replace( /</g, '&lt;' );)
      return data;
   },

   toDataFormat : function( html, fixForBody )
   {
      // all converting from html (like: html = html.replace( /<br><\/p>/gi, '\r\n');)
      return html;
   }
};

Then I add this custom plugin to config:

config.extraPlugins = 'customprocessor';

Tue, 10/26/2010 - 17:33

stero

Joined: 11/06/2009

Posts: 7

Re: different HTML processor

Thank you for your post. This works pretty well.

The problem that I still have is that the conversion into html is done at the server. Therefore the editor must call an ajax function. This works but I have no idea how I can set the editor content after the ajax response is received.
My toHtml() functioon looks like this:

toHtml : function( data ){
        var newData = '';
        var loadHTMLFromAjax = function( result ){
            newData = result.responseText;
        }
        // Use Ajax to transform the Wikitext to HTML.
        CK_sajax( 'wfSajaxWikiToHTML', [data], loadHTMLFromAjax );
        return newData;
   },

This doesn't work because when toHtml() is called the ajax request is send but the answer is not yet received thus newData is still emptry when the return statement is reached.
Is there any way to set the editors content in the ajax response?
Thanks again for any hints.

Tue, 10/26/2010 - 18:50

stero

Joined: 11/06/2009

Posts: 7

Re: different HTML processor

Another problem that I just observed is that some datafilters do not work anymore. Sofar I had them defined in my plugin in the function "afterInit : function( editor )".
I tried to set the data filter like this:

CKEDITOR.customprocessor = function( editor )
{
   this.editor = editor;
   this.writer = new CKEDITOR.htmlWriter();
   this.dataFilter = new CKEDITOR.htmlParser.filter();
   this.htmlFilter = new CKEDITOR.htmlParser.filter();
   if ( this.htmlFilter )
      {
         this.htmlFilter.addRules(
            {
               elements :
               {
                  span : function( element )
                  {
....

This is called once but not at the transformation process.

Wed, 10/27/2010 - 18:45

stero

Joined: 11/06/2009

Posts: 7

Re: different HTML processor

Hi again,

the replacement of the processor works now and I was also able to put my custom filters. I will post the solution once its fully working.
What I am still working on is that in the dataProcessor.toHtml() an ajax request is done and the result will be set as the editor content.
I don't get this working the function looks like:

CKEDITOR.customprocessor.prototype =
{
   _inPre : false,
   _inLSpace : false,

   toHtml : function( data, fixForBody )
   {
        // all converting to html (like: data = data.replace( /</g, '&lt;' );)
        var loadHTMLFromAjax = function( result ){
            if (this.editor)
                this.editor.setData(result.responseText);
        }

        // Use Ajax to transform the Wikitext to HTML.
        window.parent.FCK_sajax( 'wfSajaxWikiToHTML', [data], loadHTMLFromAjax );

        var fragment = CKEDITOR.htmlParser.fragment.fromHtml( data, fixForBody ),
        writer = new CKEDITOR.htmlParser.basicWriter();
        fragment.writeHtml( writer, this.dataFilter );
   data = writer.getHtml( true );
       
   return data;
   },
...

Like this the this.editor inside the loadHTMLFromAjax is undefined. If I change the function call in the FCK_sajax function to loadHTMLFromAjax.bind(this) I get an endless loop.
Any hints how can I solve this?
Thanks in advance.

Mon, 05/23/2011 - 23:14

akrogers

Joined: 23/05/2011

Posts: 1

Re: different HTML processor

Did you ever get your custom solution to work for editing wikitext? If so, I'd be interested in knowing how. Thanks!