_source/plugins/placeholder/plugin.js

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