Produced by Araxis Merge on 2/1/2017 2:57:57 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 | outputhtml.html | Tue Dec 20 19:50:50 2016 UTC |
| 2 | Wed Feb 1 19:57:57 2017 UTC |
| Description | Between Files 1 and 2 |
|
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 0 | 0 |
| Changed | 0 | 0 |
| Inserted | 0 | 0 |
| Removed | 1 | 224 |
| 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>HTML Compliant Output &md ash; CKEdi tor Sample </title> | |||||
| 10 | <s cript src= "../../../ ckeditor.j s"></scrip t> | |||||
| 11 | <s cript src= "../../../ samples/ol d/sample.j s"></scrip t> | |||||
| 12 | <l ink href=" ../../../s amples/old /sample.cs s" rel="st ylesheet"> | |||||
| 13 | <m eta name=" ckeditor-s ample-requ ired-plugi ns" conten t="sourcea rea"> | |||||
| 14 | <m eta name=" ckeditor-s ample-name " content= "Output HT ML"> | |||||
| 15 | <m eta name=" ckeditor-s ample-grou p" content ="Advanced Samples"> | |||||
| 16 | <m eta name=" ckeditor-s ample-desc ription" c ontent="Co nfiguring CKEditor t o produce legacy HTM L 4 code." > | |||||
| 17 | </head> | |||||
| 18 | <body> | |||||
| 19 | <h 1 class="s amples"> | |||||
| 20 | <a h ref="../.. /../sample s/old/inde x.html">CK Editor Sam ples</a> & raquo; Pro ducing HTM L Complian t Output | |||||
| 21 | </ h1> | |||||
| 22 | <d iv class=" warning de precated"> | |||||
| 23 | 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 >. | |||||
| 24 | </ div> | |||||
| 25 | <d iv class=" descriptio n"> | |||||
| 26 | <p> | |||||
| 27 | This s ample show s how to c onfigure C KEditor to output va lid | |||||
| 28 | <a cla ss="sample s" href="h ttp://www. w3.org/TR/ html401/"> HTML 4.01< /a> code. | |||||
| 29 | Tradit ional HTML elements like <code ><b> </code>, | |||||
| 30 | <code> <i>< /code>, an d <code>&l t;font> </code> ar e used in place of | |||||
| 31 | <code> <strong ></code >, <code>& lt;em>< /code>, an d CSS styl es. | |||||
| 32 | </p> | |||||
| 33 | <p> | |||||
| 34 | To add a CKEdito r instance outputtin g legacy H TML 4.01 c ode, load the editor using a s tandard | |||||
| 35 | JavaSc ript call, and defin e CKEditor features to use the HTML comp liant elem ents and a ttributes. | |||||
| 36 | </p> | |||||
| 37 | <p> | |||||
| 38 | A snip pet of the configura tion code can be see n below; c heck the s ource of t his page f or | |||||
| 39 | full d efinition: | |||||
| 40 | </p> | |||||
| 41 | <pre class ="samples" > | |||||
| 42 | CKEDITOR.r eplace( '< em>textare a_id</em>' , { | |||||
| 43 | co reStyles_b old: { ele ment: 'b' }, | |||||
| 44 | co reStyles_i talic: { e lement: 'i ' }, | |||||
| 45 | ||||||
| 46 | fo ntSize_sty le: { | |||||
| 47 | elem ent: 'font ', | |||||
| 48 | attr ibutes: { 'size': '# (size)' } | |||||
| 49 | } | |||||
| 50 | ||||||
| 51 | .. . | |||||
| 52 | });</pre> | |||||
| 53 | </ div> | |||||
| 54 | <f orm action ="../../.. /samples/s ample_post eddata.php " method=" post"> | |||||
| 55 | <p> | |||||
| 56 | <label for="edit or1"> | |||||
| 57 | Editor 1 : | |||||
| 58 | </labe l> | |||||
| 59 | <texta rea cols=" 80" id="ed itor1" nam e="editor1 " rows="10 "><p> ;This is s ome <b& gt;sample text</b >. You are using <a href ="http://c keditor.co m/">CKE ditor</ a>.< /p></te xtarea> | |||||
| 60 | <scrip t> | |||||
| 61 | ||||||
| 62 | CKEDITOR .replace( 'editor1', { | |||||
| 63 | /* | |||||
| 64 | * Ensure that htmlw riter plug in, which is require d for this sample, i s loaded. | |||||
| 65 | */ | |||||
| 66 | extraPlugi ns: 'htmlw riter', | |||||
| 67 | ||||||
| 68 | /* | |||||
| 69 | * Style s heet for t he content s | |||||
| 70 | */ | |||||
| 71 | contentsCs s: 'body { color:#000 ; backgrou nd-color#: FFF;}', | |||||
| 72 | ||||||
| 73 | /* | |||||
| 74 | * Simple HTML5 doct ype | |||||
| 75 | */ | |||||
| 76 | docType: ' <!DOCTYPE HTML>', | |||||
| 77 | ||||||
| 78 | /* | |||||
| 79 | * Allowed content r ules which beside li miting all owed HTML | |||||
| 80 | * will al so take ca re of tran sforming s tyles to a ttributes | |||||
| 81 | * (curren tly only f or img - s ee transfo rmation ru les define d below). | |||||
| 82 | * | |||||
| 83 | * Read mo re: http:/ /docs.cked itor.com/# !/guide/de v_advanced _content_f ilter | |||||
| 84 | */ | |||||
| 85 | allowedCon tent: | |||||
| 86 | 'h 1 h2 h3 p pre[align] ; ' + | |||||
| 87 | 'b lockquote code kbd s amp var de l ins cite q b i u s trike ul o l li hr ta ble tbody tr td th c aption; ' + | |||||
| 88 | 'i mg[!src,al t,align,wi dth,height ]; font[!f ace]; font [!family]; font[!col or]; font[ !size]; fo nt{!backgr ound-color }; a[!href ]; a[!name ]', | |||||
| 89 | ||||||
| 90 | /* | |||||
| 91 | * Core st yles. | |||||
| 92 | */ | |||||
| 93 | coreStyles _bold: { e lement: 'b ' }, | |||||
| 94 | coreStyles _italic: { element: 'i' }, | |||||
| 95 | coreStyles _underline : { elemen t: 'u' }, | |||||
| 96 | coreStyles _strike: { element: 'strike' } , | |||||
| 97 | ||||||
| 98 | /* | |||||
| 99 | * Font fa ce. | |||||
| 100 | */ | |||||
| 101 | ||||||
| 102 | // Define the way fo nt element s will be applied to the docum ent. | |||||
| 103 | // The "fo nt" elemen t will be used. | |||||
| 104 | font_style : { | |||||
| 105 | el ement: 'fo nt', | |||||
| 106 | at tributes: { 'face': '#(family) ' } | |||||
| 107 | }, | |||||
| 108 | ||||||
| 109 | /* | |||||
| 110 | * Font si zes. | |||||
| 111 | */ | |||||
| 112 | fontSize_s izes: 'xx- small/1;x- small/2;sm all/3;medi um/4;large /5;x-large /6;xx-larg e/7', | |||||
| 113 | fontSize_s tyle: { | |||||
| 114 | el ement: 'fo nt', | |||||
| 115 | at tributes: { 'size': '#(size)' } | |||||
| 116 | }, | |||||
| 117 | ||||||
| 118 | /* | |||||
| 119 | * Font co lors. | |||||
| 120 | */ | |||||
| 121 | ||||||
| 122 | colorButto n_foreStyl e: { | |||||
| 123 | el ement: 'fo nt', | |||||
| 124 | at tributes: { 'color': '#(color) ' } | |||||
| 125 | }, | |||||
| 126 | ||||||
| 127 | colorButto n_backStyl e: { | |||||
| 128 | el ement: 'fo nt', | |||||
| 129 | st yles: { 'b ackground- color': '# (color)' } | |||||
| 130 | }, | |||||
| 131 | ||||||
| 132 | /* | |||||
| 133 | * Styles combo. | |||||
| 134 | */ | |||||
| 135 | stylesSet: [ | |||||
| 136 | { name: 'Com puter Code ', element : 'code' } , | |||||
| 137 | { name: 'Key board Phra se', eleme nt: 'kbd' }, | |||||
| 138 | { name: 'Sam ple Text', element: 'samp' }, | |||||
| 139 | { name: 'Var iable', el ement: 'va r' }, | |||||
| 140 | { name: 'Del eted Text' , element: 'del' }, | |||||
| 141 | { name: 'Ins erted Text ', element : 'ins' }, | |||||
| 142 | { name: 'Cit ed Work', element: ' cite' }, | |||||
| 143 | { name: 'Inl ine Quotat ion', elem ent: 'q' } | |||||
| 144 | ], | |||||
| 145 | ||||||
| 146 | on: { | |||||
| 147 | pl uginsLoade d: configu reTransfor mations, | |||||
| 148 | lo aded: conf igureHtmlW riter | |||||
| 149 | } | |||||
| 150 | }); | |||||
| 151 | ||||||
| 152 | /* | |||||
| 153 | * Add m issing con tent trans formations . | |||||
| 154 | */ | |||||
| 155 | function configure Transforma tions( evt ) { | |||||
| 156 | var editor = evt.edi tor; | |||||
| 157 | ||||||
| 158 | editor.dat aProcessor .htmlFilte r.addRules ( { | |||||
| 159 | at tributes: { | |||||
| 160 | styl e: functio n( value, element ) { | |||||
| 161 | // Ret urn #RGB f or backgro und and bo rder color s | |||||
| 162 | return CKEDITOR. tools.conv ertRgbToHe x( value ) ; | |||||
| 163 | } | |||||
| 164 | } | |||||
| 165 | } ); | |||||
| 166 | ||||||
| 167 | // Default automatic content t ransformat ions do no t yet take care of | |||||
| 168 | // align a ttributes on blocks, so we nee d to add o ur own tra nsformatio n rules. | |||||
| 169 | function a lignToAttr ibute( ele ment ) { | |||||
| 170 | if ( element .styles[ ' text-align ' ] ) { | |||||
| 171 | elem ent.attrib utes.align = element .styles[ ' text-align ' ]; | |||||
| 172 | dele te element .styles[ ' text-align ' ]; | |||||
| 173 | } | |||||
| 174 | } | |||||
| 175 | editor.fil ter.addTra nsformatio ns( [ | |||||
| 176 | [ { element: 'p', right: a lignToAttr ibute } ], | |||||
| 177 | [ { element: 'h1', right: a lignToAttr ibute } ], | |||||
| 178 | [ { element: 'h2', right: a lignToAttr ibute } ], | |||||
| 179 | [ { element: 'h3', right: a lignToAttr ibute } ], | |||||
| 180 | [ { element: 'pre', right: a lignToAttr ibute } ] | |||||
| 181 | ] ); | |||||
| 182 | } | |||||
| 183 | ||||||
| 184 | /* | |||||
| 185 | * Adjus t the beha vior of ht mlWriter t o make it output HTM L like FCK editor. | |||||
| 186 | */ | |||||
| 187 | function configure HtmlWriter ( evt ) { | |||||
| 188 | var editor = evt.edi tor, | |||||
| 189 | da taProcesso r = editor .dataProce ssor; | |||||
| 190 | ||||||
| 191 | // Out sel f closing tags the H TML4 way, like <br>. | |||||
| 192 | dataProces sor.writer .selfClosi ngEnd = '> '; | |||||
| 193 | ||||||
| 194 | // Make ou tput forma tting beha ve similar to FCKedi tor. | |||||
| 195 | var dtd = CKEDITOR.d td; | |||||
| 196 | for ( var e in CKEDI TOR.tools. extend( {} , dtd.$non BodyConten t, dtd.$bl ock, dtd.$ listItem, dtd.$table Content ) ) { | |||||
| 197 | da taProcesso r.writer.s etRules( e , { | |||||
| 198 | inde nt: true, | |||||
| 199 | brea kBeforeOpe n: true, | |||||
| 200 | brea kAfterOpen : false, | |||||
| 201 | brea kBeforeClo se: !dtd[ e ][ '#' ] , | |||||
| 202 | brea kAfterClos e: true | |||||
| 203 | }) ; | |||||
| 204 | } | |||||
| 205 | } | |||||
| 206 | ||||||
| 207 | </scri pt> | |||||
| 208 | </p> | |||||
| 209 | <p> | |||||
| 210 | <input type="sub mit" value ="Submit"> | |||||
| 211 | </p> | |||||
| 212 | </ form> | |||||
| 213 | <d iv id="foo ter"> | |||||
| 214 | <hr> | |||||
| 215 | <p> | |||||
| 216 | CKEdit or - The t ext editor for the I nternet - <a class=" samples" h ref="http: //ckeditor .com/">htt p://ckedit or.com</a> | |||||
| 217 | </p> | |||||
| 218 | <p i d="copy"> | |||||
| 219 | Copyri ght © 2003-2015 , <a class ="samples" href="htt p://cksour ce.com/">C KSource</a > - Freder ico | |||||
| 220 | Knabbe n. All rig hts reserv ed. | |||||
| 221 | </p> | |||||
| 222 | </ div> | |||||
| 223 | </body> | |||||
| 224 | </html> |
Araxis Merge (but not the data content of this report) is Copyright © 1993-2016 Araxis Ltd (www.araxis.com). All rights reserved.