How do I launch CKeditor plugin on event or manually?

Question

So I'm using setData to prepopulate CKeditor content area with some info that is to be send together with what user inputs:

CKEDITOR.on( 'instanceReady', function( ev ) {

           CKEDITOR.instances.ckeditor99.setData( messageTemplate1, function() {

           this.checkDirty();  // true

           });
});

Before the content in "mesageTemplate1" is set to CKeditor content area I apply some JavaScript to clean it. After this I use JS again to remove the div that contained the information that i've just inserted into CKeditor content area. After the removal I want to laucn a custom CKeditor plugin to work on that content in CKeditor. It is important for this plugin to be launched after the used div removal because plugin targets ID's and if both divs are present (somewhere on the page and in ckeditor) plugin targets the one that is not in the CKeditor content area first therefor leaving the one in the ck area untouched.

This is the plugin (it blocks editing to certain content areas) I've got from a member of stack in my previous question:

/*
  Plugin that prevents editing of elements with the "non-editable" class as well as elements outside of blocks with "editable" class.
*/

//* **************************  NOTES  ***************************  NOTES  ****************************
/*
  The "lastSelectedElement" variable is used to store the last element selected.

  This plugin uses the "elementspath" plugin which shows all elements in the DOM
  parent tree relative to the current selection in the editing area.

  When the selection changes, "elementsPathUpdate" is fired,
  we key on this and loop through the elements in the tree checking the classes assigned to each element.

  Three outcomes are possible.

  1) The non-editable class is found:
  Looping stops, the current action is cancelled and the cursor is moved to the previous selection.
  The "selectionChange" hook is fired to set the reverted selection throughout the instance.

  2) The editable class is found during looping, the "in_editable_area" flag is set to true.

  3) Neither the editable or the non-editable classes are found (user clicked outside your main container).
  The "in_editable_area" flag remains set to false.

  If the "in_editable_area" flag is false, the current action is cancelled and the cursor is moved to the previous location.
  The "selectionChange" hook is fired to set the reverted selection throughout the instance.

  If the "in_editable_area" flag is true,
  the "lastSelectedElement" is updated to the currently selected element and the plugin returns true.

---------------
  If you don't want the elements path to be displayed at the bottom of the editor window,
  you can hide it with CSS rather than disabling the "elementspath" plugin.

  The elementspath plugin creates and is left active because we are keying on changes to the path in our plugin.
  #cke_path_content
  {
    visibility: hidden !important;
  }

---------------
  CSS Classes and ID that the plugin keys on. Use defaults or update variables to use your preferred classes and ID:

  var starting_element_id = ID of known editable element that always occurs in the instance.
  Don't use elements like , , 
 that don't contain HTML text.
  Default value = cwjdsjcs_editable_id

  var editable_class = class of editable containers.
  Should be applied to all top level elements that contain editable elements.
  Default = cwjdsjcs_editable

  var non_editable_class = class of non-editable elements within editable containers
  Apply to elements where all child elements are non-editable.
  Default = cwjdsjcs_not_editable

*/

//* **************************  END NOTES  ***************************  END NOTES  ****************************


// Register the plugin with the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html




CKEDITOR.plugins.add( 'cwjdsjcsconfineselection',
{

  requires : [ 'elementspath' ],

  // The plugin initialization logic goes inside this method.
  // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init
  init: function( editor )
  {
    editor.on( 'instanceReady', function( instance_ready_data )
    {

      // Create variable that will hold the last allowed selection (for use when a non-editable selection is made)
      var lastSelectedElement;
      editor.cwjdsjcs_just_updated = false;

      // This section starts things off right by selecting a known editable element.
      // *** Enter the ID of the element that should have initial focus *** IMPORTANT *** IMPORTANT ***
      var starting_element_id = "cwjdsjcs_editable_id";

      var resInitialRange = new CKEDITOR.dom.range( editor.document );

      resInitialRange.selectNodeContents( editor.document.getById( starting_element_id ) );
      resInitialRange.collapse();

      var selectionObject = new CKEDITOR.dom.selection( editor.document );

      editor.document.focus();
      selectionObject.selectRanges( [ resInitialRange ] );

      var sel = editor.getSelection();
      var firstElement = sel.getStartElement();
      var currentPath = new CKEDITOR.dom.elementPath( firstElement );

      // Set path for known editable element, fire "selectionChange" hook to update selection throughout instance.
      editor._.selectionPreviousPath = currentPath;
      editor.fire( 'selectionChange', { selection : sel, path : currentPath, element : firstElement } );
    }); // *** END - editor.on( 'instanceReady', function( e )


    // When a new element is selected by the user, check if it's ok for them to edit it,
    // if not move cursor back to last know editable selection
    editor.on( 'elementsPathUpdate', function( resPath )
    {
      // When we fire the "selectionChange" hook at the end of this code block, the "elementsPathUpdate" hook fires.
      // No need to check because we just updated the selection, so bypass processing.
      if( editor.cwjdsjcs_just_updated == true )
      {
        editor.cwjdsjcs_just_updated = false;
        return true;
      }

      var elementsList = editor._.elementsPath.list;
      var in_editable_area = false;
      var non_editable_class = "cwjdsjcs_not_editable";
      var editable_class = "cwjdsjcs_editable";

      for(var w=0;w

This is the div that is being set to CKeditor content area:


    
        
            
            
            

            
        

        
            
                 

                
                
                    
                        
                            
                            Application sent by Matt Faro for Audition: Actors Needed
                            
                        
                        
                            
                            Reply to applicant directly: mantas@mantas.co or visit full profile: http://www.globalcastingcenter.com/talent/jack-bolton
                            
                        
                    
                
                
                    
                        
                            Short Profile Summary:
                        
                    
                
                
                    
                        
                            
                            
                            
                        
                    
                
                
                    
                        
                            Areas:
                            Actor,Extra
                        
                        
                            Country:
                            WORLDWIDE,Any
                        
                        
                            Age:
                            26



I've pasted a lot of stuff here but it all boils down to the question if and how I can launch ckeditor plugin manually or best after the removal event is completed. I also do ask if theres any more reasonable solution to my problem. Maybe plugin launching timing is not the case.

Thanks

EDIT:

Plugin script to launch cwjdsjcsconfineselection after setData:

// JavaScript Document

CKEDITOR.plugins.add('cwjdsjcsconfineselection',
{

    requires : [ 'elementspath' ],

    init: function(editor)
    {

/*        editor.on( 'confineselection', function( confineselection_data )
    {

            alert ("Blocker is on!");




        }); // editor on END

*/      

        editor.on( 'confineselection', function( confineselection_data )
    {
        alert ("Plugin fired!");

      // Create variable that will hold the last allowed selection (for use when a non-editable selection is made)
      var lastSelectedElement;
      editor.cwjdsjcs_just_updated = false;

      // This section starts things off right by selecting a known editable element.
      // *** Enter the ID of the element that should have initial focus *** IMPORTANT *** IMPORTANT ***
      var starting_element_id = "cwjdsjcs_editable_id";

      var resInitialRange = new CKEDITOR.dom.range( editor.document );

      resInitialRange.selectNodeContents( editor.document.getById( starting_element_id ) );
      resInitialRange.collapse();

      var selectionObject = new CKEDITOR.dom.selection( editor.document );

      editor.document.focus();
      selectionObject.selectRanges( [ resInitialRange ] );

      var sel = editor.getSelection();
      var firstElement = sel.getStartElement();
      var currentPath = new CKEDITOR.dom.elementPath( firstElement );

      // Set path for known editable element, fire "selectionChange" hook to update selection throughout instance.
      editor._.selectionPreviousPath = currentPath;
      editor.fire( 'selectionChange', { selection : sel, path : currentPath, element : firstElement } );
    }); // *** END - editor.on( 'instanceReady', function( e )


    // When a new element is selected by the user, check if it's ok for them to edit it,
    // if not move cursor back to last know editable selection
    editor.on( 'elementsPathUpdate', function( resPath )
    {
      // When we fire the "selectionChange" hook at the end of this code block, the "elementsPathUpdate" hook fires.
      // No need to check because we just updated the selection, so bypass processing.
      if( editor.cwjdsjcs_just_updated == true )
      {
        editor.cwjdsjcs_just_updated = false;
        return true;
      }

      var elementsList = editor._.elementsPath.list;
      var in_editable_area = false;
      var non_editable_class = "cwjdsjcs_not_editable";
      var editable_class = "cwjdsjcs_editable";

      for(var w=0;w


There is still problem with transform handles appearing around the table. This only happens in Firefox, this is the video: http://screencast.com/t/lxKJWb6NI Sometimes this box disapear after refresh and sometimes not. Login details are in my comments if you'd like to test it live.

This is my config:

CKEDITOR.editorConfig = function( config )
{


    config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar =
    [

        { name: 'clipboard', items : [ 'Undo','Redo' ] },           
        { name: 'styles', items : ['FontSize' ] },
        { name: 'basicstyles', items : [ 'Bold','Italic'] },
        { name: 'paragraph', items : ['Outdent','Indent' ] },

    ];
    config.startupShowBorders = false;
    config.disableObjectResizing = true;


    config.removePlugins = 'contextmenu';
    config.forcePasteAsPlainText = true;   
    config.pasteFromWordRemoveFontStyles = true;
    config.pasteFromWordRemoveStyles = true;
    config.extraPlugins = 'cwjdsjcsconfineselection';




};

codewaggle · Accepted Answer

Try firing an event after you remove the div:

CKEDITOR.instances.ckeditor99.fire( 'confineselection' );

Change this line of the plugin code from:

    editor.on( 'instanceReady', function( instance_ready_data )
    {

To this:

    editor.on( 'confineselection', function( confineselection_data )
    {

You might want to move the block of code that fires on elementsPathUpdate, inside the other block of code. So this:

    editor.on( 'confineselection', function( confineselection_data )
    {
      ......................................................
      ......................................................
      // Set path for known editable element, fire "selectionChange" hook to update selection throughout instance.
      editor._.selectionPreviousPath = currentPath;
      editor.fire( 'selectionChange', { selection : sel, path : currentPath, element : firstElement } );
    }); // *** END - editor.on( 'instanceReady', function( e )


    // When a new element is selected by the user, check if it's ok for them to edit it,
    // if not move cursor back to last know editable selection
    editor.on( 'elementsPathUpdate', function( resPath )
    {
      ......................................................
      ......................................................
      catch (e)
      {}
    });

Becomes this:

    editor.on( 'confineselection', function( confineselection_data )
    {
      ......................................................
      ......................................................
      // Set path for known editable element, fire "selectionChange" hook to update selection throughout instance.
      editor._.selectionPreviousPath = currentPath;
      editor.fire( 'selectionChange', { selection : sel, path : currentPath, element : firstElement } );


      // When a new element is selected by the user, check if it's ok for them to edit it,
      // if not move cursor back to last know editable selection
      editor.on( 'elementsPathUpdate', function( resPath )
      {
        ......................................................
        ......................................................
        catch (e)
        {}
      });      

    }); // *** END - editor.on( 'instanceReady', function( e )

How do I launch CKeditor plugin on event or manually?

Answers (1)

Related Questions