Changeset 6694


Ignore:
Timestamp:
04/18/2011 03:18:11 PM (4 years ago)
Author:
garry.yao
Message:

Post-review fixes:

  1. Better sample page and better shaped dialog thanks to Wiktor;
  2. Smiley to text emoticon convention.
  3. Output hexadecimal color.
Location:
CKEditor/branches/features/bbcode
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • CKEditor/branches/features/bbcode/_samples/bbcode.html

    r6504 r6694  
    1818<body>
    1919        <h1 class="samples">
    20                 CKEditor Sample &mdash; Replace Textarea Elements by Class Name
     20                CKEditor Sample &mdash; BBCode plugin
    2121        </h1>
    2222        <div class="description">
     
    7575                                fillEmptyBlocks : false,
    7676                                fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
    77                                 colorButton_colors : 'Red/FF0000,Green/00FF00,Blue/0000FF',
    7877                                toolbar :
    7978                                [
    80                                         ['Source', '-', 'Save','NewPage','Preview','-','Bold', 'Italic','Underline','-', 'TextColor', 'FontSize','-','Link', 'Image'],
     79                                        ['Source', '-', 'Save','NewPage','Preview','-','Undo','Redo'],
     80                                        ['Find','Replace','-','SelectAll','RemoveFormat'],
     81                                        ['Link', 'Image'],
    8182                                        '/',
     83                                        ['FontSize', 'Bold', 'Italic','Underline'],
    8284                                        ['NumberedList','BulletedList','-','Blockquote'],
    83                                         ['Smiley','SpecialChar'],
    84                                         ['Find','Replace','-','SelectAll','RemoveFormat']
     85                                        ['TextColor', '-', 'Smiley','SpecialChar', '-', 'Maximize']
     86                                ],
     87                                smiley_images :
     88                                [
     89                                        'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','tounge_smile.gif',
     90                                        'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angel_smile.gif','shades_smile.gif',
     91                                        'cry_smile.gif','kiss.gif'
     92                                ],
     93                                smiley_descriptions :
     94                                [
     95                                        'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
     96                                        'indecision', 'angel', 'cool', 'crying', 'kiss'
    8597                                ]
    8698                        });
  • CKEditor/branches/features/bbcode/_samples/index.html

    r6358 r6694  
    8080                        Configuring CKEditor to produce HTML code that can be used with Adobe Flash.
    8181                </li>
     82                <li><a class="samples" href="bbcode.html">BBCodes</a><br />
     83                        Configuring CKEditor to produce BBCode tags instead of HTML.
     84                </li>
    8285                <li><a class="samples" href="placeholder.html">Placeholder plugin</a><br />
    8386                        Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.
  • CKEditor/branches/features/bbcode/_source/plugins/bbcode/plugin.js

    r6531 r6694  
    66(function()
    77{
     8        CKEDITOR.on( 'dialogDefinition', function( ev )
     9        {
     10                var tab, name = ev.data.name,
     11                        definition = ev.data.definition;
     12
     13                if ( name == 'link' )
     14                {
     15                        definition.removeContents( 'target' );
     16                        definition.removeContents( 'upload' );
     17                        definition.removeContents( 'advanced' );
     18                        tab = definition.getContents( 'info' );
     19                        tab.remove( 'emailSubject' );
     20                        tab.remove( 'emailBody' );
     21                }
     22                if ( name == 'image' )
     23                {
     24                        definition.removeContents( 'advanced' );
     25                        tab = definition.getContents( 'Link' );
     26                        tab.remove( 'cmbTarget' );
     27                        tab = definition.getContents( 'info' );
     28                        tab.remove( 'ratioLock' );
     29                        tab.remove( 'txtAlt' );
     30                        tab.remove( 'txtHeight' );
     31                        tab.remove( 'txtWidth' );
     32                        tab.remove( 'txtBorder' );
     33                        tab.remove( 'txtHSpace' );
     34                        tab.remove( 'txtVSpace' );
     35                        tab.remove( 'cmbAlign' );
     36                }
     37                if ( name == 'numberedListStyle' )
     38                {
     39                        tab = definition.getContents( 'info' );
     40                        tab.remove('start');
     41                }
     42        });
     43
    844        var bbcodeMap = { 'b' : 'strong', 'u': 'u', 'i' : 'em', 'color' : 'span', 'size' : 'span', 'quote' : 'blockquote', 'code' : 'code', 'url' : 'a', 'email' : 'span', 'img' : 'span', '*' : 'li', 'list' : 'ol' },
    945                        convertMap = { 'strong' : 'b' , 'b' : 'b', 'u': 'u', 'em' : 'i', 'i': 'i', 'code' : 'code', 'li' : '*' },
     
    4177                return retval;
    4278        }
     79
     80        function RGBToHex( cssStyle )
     81        {
     82                return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue )
     83                        {
     84                                red = parseInt( red, 10 ).toString( 16 );
     85                                green = parseInt( green, 10 ).toString( 16 );
     86                                blue = parseInt( blue, 10 ).toString( 16 );
     87                                var color = [red, green, blue] ;
     88
     89                                // Add padding zeros if the hex value is less than 0x10.
     90                                for ( var i = 0 ; i < color.length ; i++ )
     91                                        color[i] = String( '0' + color[i] ).slice( -2 ) ;
     92
     93                                return '#' + color.join( '' ) ;
     94                         });
     95        }
     96
     97        // Maintain the map of smiley-to-description.
     98        var smileyMap = {"smiley":":)","sad":":(","wink":";)","laugh":":D","cheeky":":P","blush":":*)","surprise":":-o","indecision":":|","angry":">:(","angel":"o:)","cool":"8-)","devil":">:-)","crying":";(","kiss":":-*" },
     99                smileyReverseMap = {},
     100                smileyRegExp = [];
     101
     102        // Build regexp for the list of smiley text.
     103        for ( var i in smileyMap )
     104        {
     105                smileyReverseMap[ smileyMap[ i ] ] = i;
     106                smileyRegExp.push( smileyMap[ i ].replace( /\(|\)|\:|\/|\*|\-|\|/g, function( match ) { return '\\' + match; } ) );
     107        }
     108
     109        smileyRegExp = new RegExp( smileyRegExp.join( '|' ), 'g' );
    43110
    44111        var decodeHtml = ( function ()
     
    203270                        }
    204271                }
    205                
     272
    206273                function checkPendingBrs( tagName, closing )
    207274                {
     
    387454                                                pendingBrs++;
    388455                                        else if ( piece.length )
    389                                                 addElement( new CKEDITOR.htmlParser.text( piece ), currentNode );
     456                                        {
     457                                                var lastIndex = 0;
     458
     459                                                // Create smiley from text emotion.
     460                                                piece.replace( smileyRegExp, function( match, index )
     461                                                {
     462                                                        addElement( new CKEDITOR.htmlParser.text( piece.substr( lastIndex, index ) ), currentNode );
     463                                                        addElement( new CKEDITOR.htmlParser.element( 'smiley', { 'desc': smileyReverseMap[ match ] } ), currentNode );
     464                                                        lastIndex = index + match.length;
     465                                                });
     466
     467                                                if ( lastIndex != piece.length )
     468                                                        addElement( new CKEDITOR.htmlParser.text( piece.substr( lastIndex, piece.length ) ), currentNode );
     469                                        }
    390470                                });
    391471                        }
     
    580660                  init : function( editor )
    581661                  {
     662                          var config = editor.config;
     663
    582664                          function BBCodeToHtml( code )
    583665                          {
     
    643725                                                  if ( !element.attributes.href )
    644726                                                          element.attributes.href = element.children[ 0 ].value
     727                                          },
     728                                          'smiley' : function( element )
     729                                          {
     730                                                        element.name = 'img';
     731
     732                                                        var description = element.attributes.desc,
     733                                                                image = config.smiley_images[ CKEDITOR.tools.indexOf( config.smiley_descriptions, description ) ],
     734                                                                src = CKEDITOR.tools.htmlEncode( config.smiley_path + image );
     735
     736                                                  element.attributes =
     737                                                  {
     738                                                          src : src,
     739                                                          'data-cke-saved-src' : src,
     740                                                          title :  description,
     741                                                          alt : description
     742                                                  };
    645743                                          }
    646744                                  }
     
    663761                                                {
    664762                                                        if ( value = style.color )
     763                                                        {
    665764                                                                tagName = 'color';
     765                                                                value = RGBToHex( value );
     766                                                        }
    666767                                                        else if ( value = style[ 'font-size' ] )
    667768                                                        {
     
    738839                                                {
    739840                                                        element.isEmpty = 0;
    740                                                         element.children = [ new CKEDITOR.htmlParser.text( attributes.src ) ];
     841
     842                                                        // Translate smiley (image) to text emotion.
     843                                                        var src = attributes[ 'data-cke-saved-src' ];
     844                                                        if ( src && src.indexOf( editor.config.smiley_path ) != -1 )
     845                                                                return new CKEDITOR.htmlParser.text( smileyMap[ attributes.alt ] );
     846                                                        else
     847                                                                element.children = [ new CKEDITOR.htmlParser.text( src ) ];
    741848                                                }
    742849
Note: See TracChangeset for help on using the changeset viewer.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy