Ticket #5654: 5654_6.patch

File 5654_6.patch, 10.5 KB (added by Sa'ar Zac Elias, 14 years ago)

  • _samples/index.html

     
    4242                <li><a href="output_xhtml.html">Output XHTML</a></li>
    4343                <li><a href="output_html.html">Output HTML</a></li>
    4444                <li><a href="autogrow.html">AutoGrow plugin</a></li>
     45                <li><a href="placeholder.html">Placeholder plugin</a></li>
    4546        </ul>
    4647        <div id="footer">
    4748                <hr />

  • _samples/placeholder.html

     
     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2<!--
     3Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     4For licensing, see LICENSE.html or http://ckeditor.com/license
     5-->
     6<html xmlns="http://www.w3.org/1999/xhtml">
     7<head>
     8        <title>Placeholder Plugin - CKEditor Sample</title>
     9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
     10        <!-- CKReleaser %REMOVE_LINE%
     11        <script type="text/javascript" src="../ckeditor.js"></script>
     12        CKReleaser %REMOVE_START% -->
     13        <script type="text/javascript" src="../ckeditor_source.js"></script>
     14        <!-- CKReleaser %REMOVE_END% -->
     15        <script src="sample.js" type="text/javascript"></script>
     16        <link href="sample.css" rel="stylesheet" type="text/css" />
     17</head>
     18<body>
     19        <h1>
     20                CKEditor Sample
     21        </h1>
     22        <!-- This <div> holds alert messages to be display in the sample page. -->
     23        <div id="alerts">
     24                <noscript>
     25                        <p>
     26                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
     27                                support, like yours, you should still see the contents (HTML data) and you should
     28                                be able to edit it normally, without a rich editor interface.
     29                        </p>
     30                </noscript>
     31        </div>
     32        <form action="sample_posteddata.php" method="post">
     33                <p>
     34                        In this sample the Placeholder plugin is available.<br />
     35                        It replaces text in the format of <code>[[text]]</code> to uneditable sections, and lets the user edit them and create new ones using a dialog.</p>
     36                <p>
     37                        <label for="editor1">
     38                                With default configuration:</label><br />
     39                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;</textarea>
     40                        <script type="text/javascript">
     41                        //<![CDATA[
     42
     43                                CKEDITOR.replace( 'editor1', {
     44                                        extraPlugins : 'placeholder',
     45                                        toolbar : [ [ 'Source', 'CreatePlaceholder' ] ]
     46                                });
     47
     48                        //]]>
     49                        </script>
     50                </p>
     51                <p>
     52                        <input type="submit" value="Submit" />
     53                </p>
     54        </form>
     55        <div id="footer">
     56                <hr />
     57                <p>
     58                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     59                </p>
     60                <p id="copy">
     61                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
     62                        Knabben. All rights reserved.
     63                </p>
     64        </div>
     65</body>
     66</html>

  • _source/plugins/placeholder/dialogs/placeholder.js

     
     1/*
     2 * Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     3 * For licensing, see LICENSE.html or http://ckeditor.com/license
     4 */
     5
     6(function()
     7{
     8        function placeholderDialog( editor, isEdit )
     9        {
     10
     11                var lang = editor.lang.placeholder,
     12                        generalLabel = editor.lang.common.generalTab;
     13                return {
     14                        title : lang.title,
     15                        minWidth : 300,
     16                        minHeight : 80,
     17                        contents :
     18                        [
     19                                {
     20                                        id : 'info',
     21                                        label : generalLabel,
     22                                        title : generalLabel,
     23                                        elements :
     24                                        [
     25                                                {
     26                                                        id : 'text',
     27                                                        type : 'text',
     28                                                        style : 'width: 100%;',
     29                                                        label : lang.text,
     30                                                        'default' : '',
     31                                                        required : true,
     32                                                        validate : CKEDITOR.dialog.validate.notEmpty( lang.textMissing ),
     33                                                        setup : function( element )
     34                                                        {
     35                                                                if ( isEdit )
     36                                                                        this.setValue( element.getText().slice( 2, -2 ) );
     37                                                        },
     38                                                        commit : function( element )
     39                                                        {
     40                                                                var text = '[[' + this.getValue() + ']]';
     41                                                                // The placeholder must be recreated.
     42                                                                CKEDITOR.plugins.placeholder.createPlaceholder( editor, element, text );
     43                                                        }
     44                                                }
     45                                        ]
     46                                }
     47                        ],
     48                        onShow : function()
     49                        {
     50                                if ( isEdit )
     51                                {
     52                                        var node = editor.getSelection().getStartElement();
     53                                        if ( node && node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( '_cke_placeholder' ) )
     54                                                this._element = node;
     55                                        else
     56                                        {
     57                                                var range = editor.getSelection().getRanges()[0];
     58                                                node = range.getTouchedStartNode() || range.getTouchedEndNode();
     59                                                if ( node && node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( '_cke_placeholder' ) )
     60                                                        this._element = node;
     61                                                // FF can't detect the real node if it is in the end of a block so we can safely catch it.
     62                                                else
     63                                                        this._element = range.getCommonAncestor( 1 ).getLast();
     64                                        }
     65                                }
     66                                this.setupContent( this._element );
     67                        },
     68                        onOk : function()
     69                        {
     70                                this.commitContent( this._element );
     71                                delete this._element;
     72                        }
     73                };
     74        }
     75
     76        CKEDITOR.dialog.add( 'createplaceholder', function( editor )
     77                {
     78                        return placeholderDialog( editor );
     79                });
     80        CKEDITOR.dialog.add( 'editplaceholder', function( editor )
     81                {
     82                        return placeholderDialog( editor, 1 );
     83                });
     84} )();

  • _source/plugins/placeholder/lang/en.js

     
     1/*
     2Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6CKEDITOR.plugins.setLang( 'placeholder', 'en',
     7{
     8        placeholder :
     9        {
     10                title           : 'Placeholder Properties',
     11                toolbar         : 'Create Placeholder',
     12                text            : 'Placeholder Text',
     13                edit            : 'Edit Placeholder',
     14                textMissing     : 'The placeholder must contain text.'
     15        }
     16});

  • _source/plugins/placeholder/plugin.js

     
     1/*
     2Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6/**
     7 * @fileOverview The "placeholder" plugin.
     8 *
     9 */
     10
     11(function()
     12{
     13        var placeholderReplaceRegex = /\[\[[^\]]+\]\]/g;
     14        CKEDITOR.plugins.add( 'placeholder',
     15        {
     16                requires : [ 'dialog' ],
     17                lang : [ 'en' ],
     18                init : function( editor )
     19                {
     20                        var lang = editor.lang.placeholder;
     21
     22                        editor.addCommand( 'createplaceholder', new CKEDITOR.dialogCommand( 'createplaceholder' ) );
     23                        editor.addCommand( 'editplaceholder', new CKEDITOR.dialogCommand( 'editplaceholder' ) );
     24
     25                        editor.ui.addButton( 'CreatePlaceholder',
     26                        {
     27                                label : lang.toolbar,
     28                                command :'createplaceholder',
     29                                icon : this.path + 'placeholder.gif'
     30                        });
     31
     32                        if ( editor.addMenuItems )
     33                        {
     34                                editor.addMenuGroup( 'placeholder', 20 );
     35                                editor.addMenuItems(
     36                                        {
     37                                                editplaceholder :
     38                                                {
     39                                                        label : lang.edit,
     40                                                        command : 'editplaceholder',
     41                                                        group : 'placeholder',
     42                                                        order : 1,
     43                                                        icon : this.path + 'placeholder.gif'
     44                                                }
     45                                        } );
     46
     47                                if ( editor.contextMenu )
     48                                {
     49                                        editor.contextMenu.addListener( function( element, selection )
     50                                                {
     51                                                        if ( !element || !element.hasAttribute( '_cke_placeholder' ) )
     52                                                                return null;
     53
     54                                                        return { editplaceholder : CKEDITOR.TRISTATE_OFF };
     55                                                } );
     56                                }
     57                        }
     58
     59                        editor.on( 'doubleclick', function( evt )
     60                                {
     61                                        var element = evt.data.element;
     62                                        if ( element.hasAttribute( '_cke_placeholder' ) )
     63                                                evt.data.dialog = 'editplaceholder';
     64                                });
     65
     66                        editor.addCss(
     67                                '.cke_placeholder' +
     68                                '{' +
     69                                        'background-color: #ffff00;' +
     70                                        ( CKEDITOR.env.gecko ? 'cursor: default;' : '' ) +
     71                                '}'
     72                        );
     73
     74                        editor.on( 'contentDom', function()
     75                                {
     76                                        editor.document.getBody().on( 'resizestart', function( evt )
     77                                                {
     78                                                        if ( editor.getSelection().getSelectedElement().hasAttribute( '_cke_placeholder' ) )
     79                                                                evt.data.preventDefault();
     80                                                });
     81                                });
     82
     83                        CKEDITOR.dialog.add( 'createplaceholder', this.path + 'dialogs/placeholder.js' );
     84                        CKEDITOR.dialog.add( 'editplaceholder', this.path + 'dialogs/placeholder.js' );
     85                },
     86                afterInit : function( editor )
     87                {
     88                        var dataProcessor = editor.dataProcessor,
     89                                dataFilter = dataProcessor && dataProcessor.dataFilter;
     90                                htmlFilter = dataProcessor && dataProcessor.htmlFilter;
     91
     92                        if ( dataFilter )
     93                        {
     94                                dataFilter.addRules(
     95                                {
     96                                        text : function( text )
     97                                        {
     98                                                return text.replace( placeholderReplaceRegex, function( match )
     99                                                        {
     100                                                                return CKEDITOR.plugins.placeholder.createPlaceholder( editor, null, match, 1 );
     101                                                        });
     102                                        }
     103                                });
     104                        }
     105
     106                        if ( htmlFilter )
     107                        {
     108                                htmlFilter.addRules(
     109                                {
     110                                        elements :
     111                                        {
     112                                                'span' : function( element )
     113                                                {
     114                                                        if ( element.attributes && element.attributes._cke_placeholder )
     115                                                                delete element.name;
     116                                                }
     117                                        }
     118                                });
     119                        }
     120                }
     121        });
     122})();
     123
     124CKEDITOR.plugins.placeholder =
     125{
     126        createPlaceholder : function( editor, oldElement, text, isGet )
     127        {
     128                var element = new CKEDITOR.dom.element( 'span', editor.document );
     129                element.setAttributes(
     130                        {
     131                                contentEditable : 'false',
     132                                _cke_placeholder        : 1,
     133                                'class'         : 'cke_placeholder'
     134                        }
     135                );
     136
     137                text && element.setText( text );
     138
     139                if ( isGet )
     140                        return element.getOuterHtml();
     141
     142                if ( oldElement )
     143                {
     144                        if ( CKEDITOR.env.ie )
     145                        {
     146                                element.insertAfter( oldElement );
     147                                // Some time is required for IE before the element is removed.
     148                                setTimeout( function()
     149                                        {
     150                                                oldElement.remove();
     151                                                element.focus();
     152                                        }, 10 );
     153                        }
     154                        else
     155                                element.replace( oldElement );
     156                }
     157                else
     158                        editor.insertElement( element );
     159        }
     160};
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy