CKEditor Plugin: Rich source editing mode

Hello garry.yao,

And thank you for this useful plugin integration.
I have a small problem, if i switch the editor to Source View (and CodeMirror takes over) and i save the data through POST, the modified values in textarea don't appear in the $_POST variable. I'm sure this is something related to CodeMirror.

Thanks

For those who find themselves with the IE height issue you need to change the plugin.js by moving the
holderElement.$.clientHeight out of the CodeMirror initilisation and put into a variable to set the height instead.

i.e.

var sourceAreaElement = editor.textarea,
   holderElement = sourceAreaElement.getParent();

var holderHeight = holderElement.$.clientHeight+ 'px';

var codemirror =
CodeMirror.fromTextArea(
   sourceAreaElement.$, {
      parserfile: 'parsexml.js',
      stylesheet: rootPath + 'css/xmlcolors.css',
      // Adapt to holder height.
      height: holderHeight ,
      path: rootPath + 'js/',
      continuousScanning: 300,
      lineNumbers: false,
      textWrapping: false
} );

-M-

Hi Garry,
how would you recommend attempting to send codemirror.getCode() to the plugin instance without switching to wysiwyg mode to trigger it please?

I'm trying to open CKEditor in source mode using your codemirror plugin and then submit any changes made in codemirror without needing to click on the source button on the toolbar first.
I could maybe add an onclick function to the input button but I'm struggling to come up with ideas on what that function needs to contain.

Great plugin by the way, I've got php running through it here.
Just really want it to save without needing to switch out of source mode first.

Thanks,
Zanpakutō

function MirrorUpdate(){

   for (i in CKEDITOR.instances) {
       CKEDITOR.instances[i].execCommand( 'mirrorSnapshot' );
   }
   
}

/**
 * @fileOverview The "codemirror" plugin. It's indented to enhance the
 *  "sourcearea" editing mode, which displays the xhtml source code with
 *  syntax highlight and line numbers.
 * @see http://marijn.haverbeke.nl/codemirror/ for CodeMirror editor which this
 *  plugin is using.
 */

CKEDITOR.plugins.add( 'codemirror', {
   requires : [ 'sourcearea' ],
   /**
    * This's a command-less plugin, auto loaded as soon as switch to 'source' mode  
    * and 'textarea' plugin is activeated.
    * @param {Object} editor
    */

   init : function( editor ) {
      var thisPath = this.path;
      CKEDITOR.scriptLoader.load( thisPath + '/js/codemirror.js', function( success ){
         if ( success )
         editor.on( 'mode', function() {
               if ( editor.mode == 'source' ) {
                  var sourceAreaElement = editor.textarea,
                     holderElement = sourceAreaElement.getParent();
                  var holderHeight = holderElement.$.clientHeight + 'px';
                  /* http://codemirror.net/manual.html */
                  var codemirrorInit =
                  CodeMirror.fromTextArea(
                     sourceAreaElement.$, {
                        parserfile: ['parsexml.js'],
                        stylesheet: [thisPath + 'css/xmlcolors.css'],
                        // Adapt to holder height.
                        height: holderHeight,
                        path: thisPath + 'js/',
                        passDelay: 300,
                        passTime: 35,
                        continuousScanning: 1000, /* Numbers lower than this suck megabytes of memory very quickly out of firefox */
                        lineNumbers: false,
                        textWrapping: false,
                        enterMode: 'flat'
                     }
                  );
                      // Commit source data back into 'source' mode.
                      editor.on( 'beforeCommandExec', function( ev ){
                         // Listen to this event once.
                         ev.removeListener();
                         sourceAreaElement.setValue( codemirrorInit.getCode() );
                         editor.fire( 'dataReady' );
                         /*editor._.modes[ editor.mode ].loadData(
                            codemirror.getCode() );*/
                      } );
                      
                      CKEDITOR.plugins.mirrorSnapshotCmd = {
                         exec : function( editor ) {
                            if ( editor.mode == 'source' ) {
                               sourceAreaElement.setValue( codemirrorInit.getCode() );
                               editor.fire( 'dataReady' );
                            }
                         }
                      };
                      editor.addCommand( 'mirrorSnapshot', CKEDITOR.plugins.mirrorSnapshotCmd );
                      /* editor.execCommand('mirrorSnapshot'); */
               }
         } );
      } );

   }

});

onSubmit="MirrorUpdate();"

onclick="MirrorUpdate();"

http://github.com/marijnh/CodeMirror

Hi all,

Can you package this plugin ?

I used it in drupal & Wordpress, and its realy embarrassing that the editor doesn't update correctly the fields.

Thanks in advance.

serialbob wrote:Hi all,

Can you package this plugin ?

I used it in drupal & Wordpress, and its realy embarrassing that the editor doesn't update correctly the fields.

Thanks in advance.

CodeMirror source view plugin for CKEditor

The plugin is rather awesome.

@Zanpakutō: I think one minor improvement would be the addition of some type of marker/indicator on the non-source side indicating any location of code, perhaps a one char something like: "◻". Otherwise it's a bit too easy to delete any code if it happens to be intertwined with the text.

That would be sufficient, but beyond that would be either separate characters for php/script/styles or a single character with different colors.

Awsome, Zanpakuto!

I guess one problem is form tag.
I usually put CKEditor middle of form.
Since form tag can not be nested, It's problem.
And some times, I use multiple CKEditor on same page.

Is there anyway I can avoid this limitation?