Produced by Araxis Merge on 2/1/2017 2:57:56 PM Eastern Standard Time. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | C:\Araxis_Merge_Comprasion\Pub_un\BTSSS_CIF_122016.zip\BTSSS_CIF_12_20_16\clean\CRM Portal\trunk\BTSSSPortal\js\ckeditor\samples\old\htmlwriter | outputforflash.html | Tue Dec 20 19:50:50 2016 UTC |
| 2 | Wed Feb 1 19:57:56 2017 UTC |
| Description | Between Files 1 and 2 |
|
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 0 | 0 |
| Changed | 0 | 0 |
| Inserted | 0 | 0 |
| Removed | 1 | 283 |
| Whitespace | |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
No regular expressions were active.
| 1 | <!DOCTYPE html> | |||||
| 2 | <!-- | |||||
| 3 | Copyright (c) 2003-2 015, CKSou rce - Fred erico Knab ben. All r ights rese rved. | |||||
| 4 | This softw are is cov ered by CK Editor Com mercial Li cense. Usa ge without proper li cense is p rohibited. | |||||
| 5 | --> | |||||
| 6 | <html> | |||||
| 7 | <head> | |||||
| 8 | <m eta charse t="utf-8"> | |||||
| 9 | <t itle>Outpu t for Flas h — CKEditor S ample</tit le> | |||||
| 10 | <s cript src= "../../../ ckeditor.j s"></scrip t> | |||||
| 11 | <s cript src= "../../../ samples/ol d/sample.j s"></scrip t> | |||||
| 12 | <s cript src= "assets/ou tputforfla sh/swfobje ct.js"></s cript> | |||||
| 13 | <l ink href=" ../../../s amples/old /sample.cs s" rel="st ylesheet"> | |||||
| 14 | <m eta name=" ckeditor-s ample-requ ired-plugi ns" conten t="sourcea rea"> | |||||
| 15 | <m eta name=" ckeditor-s ample-name " content= "Output fo r Flash"> | |||||
| 16 | <m eta name=" ckeditor-s ample-grou p" content ="Advanced Samples"> | |||||
| 17 | <m eta name=" ckeditor-s ample-desc ription" c ontent="Co nfiguring CKEditor t o produce HTML code that can b e used wit h Adobe Fl ash."> | |||||
| 18 | <s tyle> | |||||
| 19 | ||||||
| 20 | .ale rt | |||||
| 21 | { | |||||
| 22 | backgr ound: #ffa 84c; | |||||
| 23 | paddin g: 10px 15 px; | |||||
| 24 | font-w eight: bol d; | |||||
| 25 | displa y: block; | |||||
| 26 | margin -bottom: 2 0px; | |||||
| 27 | } | |||||
| 28 | ||||||
| 29 | </ style> | |||||
| 30 | </head> | |||||
| 31 | <body> | |||||
| 32 | <h 1 class="s amples"> | |||||
| 33 | <a h ref="../.. /../sample s/old/inde x.html">CK Editor Sam ples</a> & raquo; Pro ducing Fla sh Complia nt HTML Ou tput | |||||
| 34 | </ h1> | |||||
| 35 | <d iv class=" warning de precated"> | |||||
| 36 | This sample is not maint ained anym ore. Check out the < a href="ht tp://sdk.c keditor.co m/">brand new sample s in CKEdi tor SDK</a >. | |||||
| 37 | </ div> | |||||
| 38 | <d iv class=" descriptio n"> | |||||
| 39 | <p> | |||||
| 40 | This s ample show s how to c onfigure C KEditor to output | |||||
| 41 | HTML c ode that c an be used with | |||||
| 42 | <a cla ss="sample s" href="h ttp://www. adobe.com/ livedocs/f lash/9.0/m ain/wwhelp /wwhimpl/c ommon/html /wwhelp.ht m?context= LiveDocs_P arts&f ile=000009 22.html"> | |||||
| 43 | Adobe Flash</a>. | |||||
| 44 | The co de will co ntain a su bset of st andard HTM L elements like <cod e><b> ;</code>, | |||||
| 45 | <code> <i>< /code>, an d <code>&l t;p></c ode> as we ll as HTML attribute s. | |||||
| 46 | </p> | |||||
| 47 | <p> | |||||
| 48 | To add a CKEdito r instance outputtin g Flash co mpliant HT ML code, l oad the ed itor using a standar d | |||||
| 49 | JavaSc ript call, and defin e CKEditor features to use HTM L elements and attri butes. | |||||
| 50 | </p> | |||||
| 51 | <p> | |||||
| 52 | For de tails on h ow to crea te this se tup check the source code of t his sample page. | |||||
| 53 | </p> | |||||
| 54 | </ div> | |||||
| 55 | <p > | |||||
| 56 | To s ee how it works, cre ate some c ontent in the editin g area of CKEditor o n the left | |||||
| 57 | and send it to the Flash object on the right side of t he page by using the | |||||
| 58 | <str ong>Send t o Flash</s trong> but ton. | |||||
| 59 | </ p> | |||||
| 60 | <t able style ="width: 1 00%; borde r-spacing: 0; border -collapse: collapse;" > | |||||
| 61 | <tr> | |||||
| 62 | <td st yle="width : 100%"> | |||||
| 63 | <textare a cols="80 " id="edit or1" name= "editor1" rows="10"> <p>& lt;b>&l t;font siz e="18 " sty le="f ont-size:1 8px;" >Flash and HTML&l t;/font> ;</b> ;</p> ;<p> &nbsp; </p> <p>I t is possi ble to hav e <a hr ef="h ttp://cked itor.com&q uot;>CK Editor< /a> cre ating cont ent that w ill be lat er loaded inside < ;b>Flas h</b> ; objects and animat ions.</ p><p >&n bsp;</p ><p& gt;Flash h as a few l imitations when deal ing with H TML:</p ><p& gt;&nb sp;</p& gt;<ul& gt;<li& gt;It has limited su pport on t ags.</l i><l i>There is no mar gin betwee n block el ements, li ke paragra phs.</l i></ ul></te xtarea> | |||||
| 64 | <script> | |||||
| 65 | ||||||
| 66 | if ( docum ent.locati on.protoco l == 'file :' ) | |||||
| 67 | al ert( 'Warn ing: This samples do es not wor k when loa ded from l ocal files ystem' + | |||||
| 68 | 'due to securi ty restric tions impl emented in Flash.' + | |||||
| 69 | '\n\ nPlease lo ad the sam ple from a web serve r instead. ' ); | |||||
| 70 | ||||||
| 71 | var editor = CKEDITO R.replace( 'editor1' , { | |||||
| 72 | /* | |||||
| 73 | * Ensure th at htmlwri ter plugin , which is required for this s ample, is loaded. | |||||
| 74 | * / | |||||
| 75 | ex traPlugins : 'htmlwri ter', | |||||
| 76 | ||||||
| 77 | he ight: 290, | |||||
| 78 | wi dth: '100% ', | |||||
| 79 | to olbar: [ | |||||
| 80 | [ 'S ource', '- ', 'Bold', 'Italic', 'Underlin e', '-', ' BulletedLi st', '-', 'Link', 'U nlink' ], | |||||
| 81 | [ 'J ustifyLeft ', 'Justif yCenter', 'JustifyRi ght', 'Jus tifyBlock' ], | |||||
| 82 | '/', | |||||
| 83 | [ 'F ont', 'Fon tSize' ], | |||||
| 84 | [ 'T extColor', '-', 'Abo ut' ] | |||||
| 85 | ], | |||||
| 86 | ||||||
| 87 | /* | |||||
| 88 | * Style she et for the contents | |||||
| 89 | * / | |||||
| 90 | co ntentsCss: 'body {co lor:#000; background -color#FFF ; font-fam ily: Arial ; font-siz e:80%;} p, ol, ul {m argin-top: 0px; marg in-bottom: 0px;}', | |||||
| 91 | ||||||
| 92 | /* | |||||
| 93 | * Quirks do ctype | |||||
| 94 | * / | |||||
| 95 | do cType: '<! DOCTYPE HT ML PUBLIC "-//W3C//D TD HTML 4. 01 Transit ional//EN" >', | |||||
| 96 | ||||||
| 97 | /* | |||||
| 98 | * Core styl es. | |||||
| 99 | * / | |||||
| 100 | co reStyles_b old: { ele ment: 'b' }, | |||||
| 101 | co reStyles_i talic: { e lement: 'i ' }, | |||||
| 102 | co reStyles_u nderline: { element: 'u' }, | |||||
| 103 | ||||||
| 104 | /* | |||||
| 105 | * Font face . | |||||
| 106 | * / | |||||
| 107 | ||||||
| 108 | // Define th e way font elements will be ap plied to t he documen t. The "fo nt" | |||||
| 109 | // element w ill be use d. | |||||
| 110 | fo nt_style: { | |||||
| 111 | elem ent: 'font ', | |||||
| 112 | attr ibutes: { 'face': '# (family)' } | |||||
| 113 | }, | |||||
| 114 | ||||||
| 115 | /* | |||||
| 116 | * Font size s. | |||||
| 117 | * / | |||||
| 118 | ||||||
| 119 | // The CSS p art of the font size s isn't us ed by Flas h, it is t here to ge t the | |||||
| 120 | // font rend ered corre ctly in CK Editor. | |||||
| 121 | fo ntSize_siz es: '8px/8 ;9px/9;10p x/10;11px/ 11;12px/12 ;14px/14;1 6px/16;18p x/18;20px/ 20;22px/22 ;24px/24;2 6px/26;28p x/28;36px/ 36;48px/48 ;72px/72', | |||||
| 122 | fo ntSize_sty le: { | |||||
| 123 | elem ent: 'font ', | |||||
| 124 | attr ibutes: { 'size': '# (size)' }, | |||||
| 125 | styl es: { 'fon t-size': ' #(size)px' } | |||||
| 126 | } , | |||||
| 127 | ||||||
| 128 | /* | |||||
| 129 | * Font colo rs. | |||||
| 130 | * / | |||||
| 131 | co lorButton_ enableMore : true, | |||||
| 132 | ||||||
| 133 | co lorButton_ foreStyle: { | |||||
| 134 | elem ent: 'font ', | |||||
| 135 | attr ibutes: { 'color': ' #(color)' } | |||||
| 136 | }, | |||||
| 137 | ||||||
| 138 | co lorButton_ backStyle: { | |||||
| 139 | elem ent: 'font ', | |||||
| 140 | styl es: { 'bac kground-co lor': '#(c olor)' } | |||||
| 141 | }, | |||||
| 142 | ||||||
| 143 | on : { 'insta nceReady': configure FlashOutpu t } | |||||
| 144 | }); | |||||
| 145 | ||||||
| 146 | /* | |||||
| 147 | * Adjust the behavi or of the dataProces sor to mat ch the | |||||
| 148 | * require ments of F lash | |||||
| 149 | */ | |||||
| 150 | function c onfigureFl ashOutput( ev ) { | |||||
| 151 | va r editor = ev.editor , | |||||
| 152 | data Processor = editor.d ataProcess or, | |||||
| 153 | html Filter = d ataProcess or && data Processor. htmlFilter ; | |||||
| 154 | ||||||
| 155 | // Out self closing ta gs the HTM L4 way, li ke <br>. | |||||
| 156 | da taProcesso r.writer.s elfClosing End = '>'; | |||||
| 157 | ||||||
| 158 | // Make outp ut formatt ing match Flash expe ctations | |||||
| 159 | va r dtd = CK EDITOR.dtd ; | |||||
| 160 | fo r ( var e in CKEDITO R.tools.ex tend( {}, dtd.$nonBo dyContent, dtd.$bloc k, dtd.$li stItem, dt d.$tableCo ntent ) ) { | |||||
| 161 | data Processor. writer.set Rules( e, { | |||||
| 162 | indent : false, | |||||
| 163 | breakB eforeOpen: false, | |||||
| 164 | breakA fterOpen: false, | |||||
| 165 | breakB eforeClose : false, | |||||
| 166 | breakA fterClose: false | |||||
| 167 | }); | |||||
| 168 | } | |||||
| 169 | da taProcesso r.writer.s etRules( ' br', { | |||||
| 170 | inde nt: false, | |||||
| 171 | brea kBeforeOpe n: false, | |||||
| 172 | brea kAfterOpen : false, | |||||
| 173 | brea kBeforeClo se: false, | |||||
| 174 | brea kAfterClos e: false | |||||
| 175 | }) ; | |||||
| 176 | ||||||
| 177 | // Output pr operties a s attribut es, not st yles. | |||||
| 178 | ht mlFilter.a ddRules( { | |||||
| 179 | elem ents: { | |||||
| 180 | $: fun ction( ele ment ) { | |||||
| 181 | var styl e, match, width, hei ght, align ; | |||||
| 182 | ||||||
| 183 | // Outpu t dimensio ns of imag es as widt h and heig ht | |||||
| 184 | if ( ele ment.name == 'img' ) { | |||||
| 185 | style = el ement.attr ibutes.sty le; | |||||
| 186 | ||||||
| 187 | if ( style ) { | |||||
| 188 | // Get the w idth from the style. | |||||
| 189 | ma tch = ( /( ?:^|\s)wid th\s*:\s*( \d+)px/i ) .exec( sty le ); | |||||
| 190 | wi dth = matc h && match [1]; | |||||
| 191 | ||||||
| 192 | // Get the h eight from the style . | |||||
| 193 | ma tch = ( /( ?:^|\s)hei ght\s*:\s* (\d+)px/i ).exec( st yle ); | |||||
| 194 | he ight = mat ch && matc h[1]; | |||||
| 195 | ||||||
| 196 | if ( width ) { | |||||
| 197 | elem ent.attrib utes.style = element .attribute s.style.re place( /(? :^|\s)widt h\s*:\s*(\ d+)px;?/i , '' ); | |||||
| 198 | elem ent.attrib utes.width = width; | |||||
| 199 | } | |||||
| 200 | ||||||
| 201 | if ( height ) { | |||||
| 202 | elem ent.attrib utes.style = element .attribute s.style.re place( /(? :^|\s)heig ht\s*:\s*( \d+)px;?/i , '' ); | |||||
| 203 | elem ent.attrib utes.heigh t = height ; | |||||
| 204 | } | |||||
| 205 | } | |||||
| 206 | } | |||||
| 207 | ||||||
| 208 | // Outpu t alignmen t of parag raphs usin g align | |||||
| 209 | if ( ele ment.name == 'p' ) { | |||||
| 210 | style = el ement.attr ibutes.sty le; | |||||
| 211 | ||||||
| 212 | if ( style ) { | |||||
| 213 | // Get the a lign from the style. | |||||
| 214 | ma tch = ( /( ?:^|\s)tex t-align\s* :\s*(\w*); ?/i ).exec ( style ); | |||||
| 215 | al ign = matc h && match [1]; | |||||
| 216 | ||||||
| 217 | if ( align ) { | |||||
| 218 | elem ent.attrib utes.style = element .attribute s.style.re place( /(? :^|\s)text -align\s*: \s*(\w*);? /i , '' ); | |||||
| 219 | elem ent.attrib utes.align = align; | |||||
| 220 | } | |||||
| 221 | } | |||||
| 222 | } | |||||
| 223 | ||||||
| 224 | if ( ele ment.attri butes.styl e === '' ) | |||||
| 225 | delete ele ment.attri butes.styl e; | |||||
| 226 | ||||||
| 227 | return e lement; | |||||
| 228 | } | |||||
| 229 | } | |||||
| 230 | }) ; | |||||
| 231 | } | |||||
| 232 | ||||||
| 233 | function s endToFlash () { | |||||
| 234 | va r html = C KEDITOR.in stances.ed itor1.getD ata() ; | |||||
| 235 | ||||||
| 236 | // Quick fix for link color. | |||||
| 237 | ht ml = html. replace( / <a /g, '<f ont color= "#0000FF"> <u><a ' ) | |||||
| 238 | ht ml = html. replace( / <\/a>/g, ' </a></u></ font>' ) | |||||
| 239 | ||||||
| 240 | va r flash = document.g etElementB yId( 'ckFl ashContain er' ) ; | |||||
| 241 | fl ash.setDat a( html ) ; | |||||
| 242 | } | |||||
| 243 | ||||||
| 244 | CKEDITOR.d omReady( f unction() { | |||||
| 245 | if ( !swfobj ect.hasFla shPlayerVe rsion( '8' ) ) { | |||||
| 246 | CKED ITOR.dom.e lement.cre ateFromHtm l( '<span class="ale rt">' + | |||||
| 247 | 'At leas t Adobe Fl ash Player 8 is requ ired to ru n this sam ple. ' + | |||||
| 248 | 'You can download it from <a href="htt p://get.ad obe.com/fl ashplayer" >Adobe\'s website</a >.' + | |||||
| 249 | '</spa n>' ).inse rtBefore( editor.ele ment ); | |||||
| 250 | } | |||||
| 251 | ||||||
| 252 | sw fobject.em bedSWF( | |||||
| 253 | 'ass ets/output forflash/o utputforfl ash.swf', | |||||
| 254 | 'ckF lashContai ner', | |||||
| 255 | '550 ', | |||||
| 256 | '400 ', | |||||
| 257 | '8', | |||||
| 258 | { wm ode: 'tran sparent' } | |||||
| 259 | ); | |||||
| 260 | }); | |||||
| 261 | ||||||
| 262 | </script > | |||||
| 263 | <p> | |||||
| 264 | <input typ e="button" value="Se nd to Flas h" onclick ="sendToFl ash();"> | |||||
| 265 | </p> | |||||
| 266 | </td> | |||||
| 267 | <td st yle="verti cal-align: top; padd ing-left: 20px"> | |||||
| 268 | <div id= "ckFlashCo ntainer">< /div> | |||||
| 269 | </td> | |||||
| 270 | </tr > | |||||
| 271 | </ table> | |||||
| 272 | <d iv id="foo ter"> | |||||
| 273 | <hr> | |||||
| 274 | <p> | |||||
| 275 | CKEdit or - The t ext editor for the I nternet - <a class=" samples" h ref="http: //ckeditor .com/">htt p://ckedit or.com</a> | |||||
| 276 | </p> | |||||
| 277 | <p i d="copy"> | |||||
| 278 | Copyri ght © 2003-2015 , <a class ="samples" href="htt p://cksour ce.com/">C KSource</a > - Freder ico | |||||
| 279 | Knabbe n. All rig hts reserv ed. | |||||
| 280 | </p> | |||||
| 281 | </ div> | |||||
| 282 | </body> | |||||
| 283 | </html> |
Araxis Merge (but not the data content of this report) is Copyright © 1993-2016 Araxis Ltd (www.araxis.com). All rights reserved.