CKEditor 4
Mon, 03/31/2008 - 16:56
#1
meagher1969
meagher1969's picture
Joined: 31/03/2008
Posts: 4

Insert paragraphs into the DOM, simulate enter key

Hello,

From a plugin I want to insert a new paragraph into the document.

The following works fine (at least in firefox)

var newBlock = document.createElement('p');
newBlock.className = 'myCSSClassName';
textNode = document.createTextNode('A new paragraph');
newBlock.appendChild(textNode);
FCKDomTools.InsertAfterNode(currentBlock, newBlock);

Now how do I insert a paragraph with no text? I want to simulate an enter key
changing the above to, does not work.

var newBlock = document.createElement('p');
newBlock.className = 'myCSSClassName';
textNode = document.createTextNode('');
newBlock.appendChild(textNode);
FCKDomTools.InsertAfterNode(currentBlock, newBlock);

Thanks in advance!

Dave
Top
Mon, 03/31/2008 - 18:30
meagher1969
meagher1969's picture
Joined: 31/03/2008
Posts: 4

Re: Insert paragraphs into the DOM, simulate enter key

Is there a way i could call:

FCKEnterKey.DoEnter('br', false);


Dave
Top
Tue, 04/01/2008 - 17:30
meagher1969
meagher1969's picture
Joined: 31/03/2008
Posts: 4

Re: Insert paragraphs into the DOM, simulate enter key

Got it, the folow code from EntryKey will simulate the user pressing enter


FSUtils.EnterKey = function( blockTag, range )
{
   // Get the current selection.
   var oRange = range || new FCKDomRange( FCK.EditorWindow ) ;

   var oSplitInfo = oRange.SplitBlock( blockTag ) ;

   if ( oSplitInfo )
   {
      // Get the current blocks.
      var ePreviousBlock   = oSplitInfo.PreviousBlock ;
      var eNextBlock      = oSplitInfo.NextBlock ;

      var bIsStartOfBlock   = oSplitInfo.WasStartOfBlock ;
      var bIsEndOfBlock   = oSplitInfo.WasEndOfBlock ;

      // If there is one block under a list item, modify the split so that the list item gets split as well. (Bug #1647)
      if ( eNextBlock )
      {
         if ( eNextBlock.parentNode.nodeName.IEquals( 'li' ) )
         {
            FCKDomTools.BreakParent( eNextBlock, eNextBlock.parentNode ) ;
            FCKDomTools.MoveNode( eNextBlock, eNextBlock.nextSibling, true ) ;
         }
      }
      else if ( ePreviousBlock && ePreviousBlock.parentNode.nodeName.IEquals( 'li' ) )
      {
         FCKDomTools.BreakParent( ePreviousBlock, ePreviousBlock.parentNode ) ;
         oRange.MoveToElementEditStart( ePreviousBlock.nextSibling );
         FCKDomTools.MoveNode( ePreviousBlock, ePreviousBlock.previousSibling ) ;
      }

      // If we have both the previous and next blocks, it means that the
      // boundaries were on separated blocks, or none of them where on the
      // block limits (start/end).
      if ( !bIsStartOfBlock && !bIsEndOfBlock )
      {
         // If the next block is an <li> with another list tree as the first child
         // We'll need to append a placeholder or the list item wouldn't be editable. (Bug #1420)
         if ( eNextBlock.nodeName.IEquals( 'li' ) && eNextBlock.firstChild
               && eNextBlock.firstChild.nodeName.IEquals( ['ul', 'ol'] ) )
            eNextBlock.insertBefore( FCKTools.GetElementDocument( eNextBlock ).createTextNode( '\xa0' ), eNextBlock.firstChild ) ;
         // Move the selection to the end block.
         if ( eNextBlock )
            oRange.MoveToElementEditStart( eNextBlock ) ;
      }
      else
      {
         if ( bIsStartOfBlock && bIsEndOfBlock && ePreviousBlock.tagName.toUpperCase() == 'LI' )
         {
            oRange.MoveToElementStart( ePreviousBlock ) ;
            this._OutdentWithSelection( ePreviousBlock, oRange ) ;
            oRange.Release() ;
            return true ;
         }

         var eNewBlock ;

         if ( ePreviousBlock )
         {
            var sPreviousBlockTag = ePreviousBlock.tagName.toUpperCase() ;

            // If is a header tag, or we are in a Shift+Enter (#77),
            // create a new block element (later in the code).
            if ( !this._HasShift && !(/^H[1-6]$/).test( sPreviousBlockTag ) )
            {
               // Otherwise, duplicate the previous block.
               eNewBlock = FCKDomTools.CloneElement( ePreviousBlock ) ;
            }
         }
         else if ( eNextBlock )
            eNewBlock = FCKDomTools.CloneElement( eNextBlock ) ;

         if ( !eNewBlock )
            eNewBlock = this.Window.document.createElement( blockTag ) ;

         // Recreate the inline elements tree, which was available
         // before the hitting enter, so the same styles will be
         // available in the new block.
         var elementPath = oSplitInfo.ElementPath ;
         if ( elementPath )
         {
            for ( var i = 0, len = elementPath.Elements.length ; i < len ; i++ )
            {
               var element = elementPath.Elements[i] ;

               if ( element == elementPath.Block || element == elementPath.BlockLimit )
                  break ;

               if ( FCKListsLib.InlineChildReqElements[ element.nodeName.toLowerCase() ] )
               {
                  element = FCKDomTools.CloneElement( element ) ;
                  FCKDomTools.MoveChildren( eNewBlock, element ) ;
                  eNewBlock.appendChild( element ) ;
               }
            }
         }

         if ( FCKBrowserInfo.IsGeckoLike )
            FCKTools.AppendBogusBr( eNewBlock ) ;

         oRange.InsertNode( eNewBlock ) ;

         // This is tricky, but to make the new block visible correctly
         // we must select it.
         if ( FCKBrowserInfo.IsIE )
         {
            // Move the selection to the new block.
            oRange.MoveToElementEditStart( eNewBlock ) ;
            oRange.Select() ;
         }

         // Move the selection to the new block.
         oRange.MoveToElementEditStart( bIsStartOfBlock && !bIsEndOfBlock ? eNextBlock : eNewBlock ) ;
      }

      if ( FCKBrowserInfo.IsSafari )
         FCKDomTools.ScrollIntoView( eNextBlock || eNewBlock, false ) ;
      else if ( FCKBrowserInfo.IsGeckoLike )
         ( eNextBlock || eNewBlock ).scrollIntoView( false ) ;

      oRange.Select() ;
   }

   // Release the resources used by the range.
   oRange.Release() ;

   return true ;
}
Top
Tue, 04/01/2008 - 17:30
meagher1969
meagher1969's picture
Joined: 31/03/2008
Posts: 4

Re: Insert paragraphs into the DOM, simulate enter key

Got it, the folow code from EntryKey will simulate the user pressing enter


FSUtils.EnterKey = function( blockTag, range )
{
   // Get the current selection.
   var oRange = range || new FCKDomRange( FCK.EditorWindow ) ;

   var oSplitInfo = oRange.SplitBlock( blockTag ) ;

   if ( oSplitInfo )
   {
      // Get the current blocks.
      var ePreviousBlock   = oSplitInfo.PreviousBlock ;
      var eNextBlock      = oSplitInfo.NextBlock ;

      var bIsStartOfBlock   = oSplitInfo.WasStartOfBlock ;
      var bIsEndOfBlock   = oSplitInfo.WasEndOfBlock ;

      // If there is one block under a list item, modify the split so that the list item gets split as well. (Bug #1647)
      if ( eNextBlock )
      {
         if ( eNextBlock.parentNode.nodeName.IEquals( 'li' ) )
         {
            FCKDomTools.BreakParent( eNextBlock, eNextBlock.parentNode ) ;
            FCKDomTools.MoveNode( eNextBlock, eNextBlock.nextSibling, true ) ;
         }
      }
      else if ( ePreviousBlock && ePreviousBlock.parentNode.nodeName.IEquals( 'li' ) )
      {
         FCKDomTools.BreakParent( ePreviousBlock, ePreviousBlock.parentNode ) ;
         oRange.MoveToElementEditStart( ePreviousBlock.nextSibling );
         FCKDomTools.MoveNode( ePreviousBlock, ePreviousBlock.previousSibling ) ;
      }

      // If we have both the previous and next blocks, it means that the
      // boundaries were on separated blocks, or none of them where on the
      // block limits (start/end).
      if ( !bIsStartOfBlock && !bIsEndOfBlock )
      {
         // If the next block is an <li> with another list tree as the first child
         // We'll need to append a placeholder or the list item wouldn't be editable. (Bug #1420)
         if ( eNextBlock.nodeName.IEquals( 'li' ) && eNextBlock.firstChild
               && eNextBlock.firstChild.nodeName.IEquals( ['ul', 'ol'] ) )
            eNextBlock.insertBefore( FCKTools.GetElementDocument( eNextBlock ).createTextNode( '\xa0' ), eNextBlock.firstChild ) ;
         // Move the selection to the end block.
         if ( eNextBlock )
            oRange.MoveToElementEditStart( eNextBlock ) ;
      }
      else
      {
         if ( bIsStartOfBlock && bIsEndOfBlock && ePreviousBlock.tagName.toUpperCase() == 'LI' )
         {
            oRange.MoveToElementStart( ePreviousBlock ) ;
            this._OutdentWithSelection( ePreviousBlock, oRange ) ;
            oRange.Release() ;
            return true ;
         }

         var eNewBlock ;

         if ( ePreviousBlock )
         {
            var sPreviousBlockTag = ePreviousBlock.tagName.toUpperCase() ;

            // If is a header tag, or we are in a Shift+Enter (#77),
            // create a new block element (later in the code).
            if ( !this._HasShift && !(/^H[1-6]$/).test( sPreviousBlockTag ) )
            {
               // Otherwise, duplicate the previous block.
               eNewBlock = FCKDomTools.CloneElement( ePreviousBlock ) ;
            }
         }
         else if ( eNextBlock )
            eNewBlock = FCKDomTools.CloneElement( eNextBlock ) ;

         if ( !eNewBlock )
            eNewBlock = this.Window.document.createElement( blockTag ) ;

         // Recreate the inline elements tree, which was available
         // before the hitting enter, so the same styles will be
         // available in the new block.
         var elementPath = oSplitInfo.ElementPath ;
         if ( elementPath )
         {
            for ( var i = 0, len = elementPath.Elements.length ; i < len ; i++ )
            {
               var element = elementPath.Elements[i] ;

               if ( element == elementPath.Block || element == elementPath.BlockLimit )
                  break ;

               if ( FCKListsLib.InlineChildReqElements[ element.nodeName.toLowerCase() ] )
               {
                  element = FCKDomTools.CloneElement( element ) ;
                  FCKDomTools.MoveChildren( eNewBlock, element ) ;
                  eNewBlock.appendChild( element ) ;
               }
            }
         }

         if ( FCKBrowserInfo.IsGeckoLike )
            FCKTools.AppendBogusBr( eNewBlock ) ;

         oRange.InsertNode( eNewBlock ) ;

         // This is tricky, but to make the new block visible correctly
         // we must select it.
         if ( FCKBrowserInfo.IsIE )
         {
            // Move the selection to the new block.
            oRange.MoveToElementEditStart( eNewBlock ) ;
            oRange.Select() ;
         }

         // Move the selection to the new block.
         oRange.MoveToElementEditStart( bIsStartOfBlock && !bIsEndOfBlock ? eNextBlock : eNewBlock ) ;
      }

      if ( FCKBrowserInfo.IsSafari )
         FCKDomTools.ScrollIntoView( eNextBlock || eNewBlock, false ) ;
      else if ( FCKBrowserInfo.IsGeckoLike )
         ( eNextBlock || eNewBlock ).scrollIntoView( false ) ;

      oRange.Select() ;
   }

   // Release the resources used by the range.
   oRange.Release() ;

   return true ;
}
Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check