aboutsummaryrefslogtreecommitdiff
path: root/release/samples/old/htmlwriter
diff options
context:
space:
mode:
Diffstat (limited to 'release/samples/old/htmlwriter')
-rw-r--r--release/samples/old/htmlwriter/assets/outputforflash/outputforflash.flabin0 -> 85504 bytes
-rw-r--r--release/samples/old/htmlwriter/assets/outputforflash/outputforflash.swfbin0 -> 15571 bytes
-rw-r--r--release/samples/old/htmlwriter/assets/outputforflash/swfobject.js19
-rw-r--r--release/samples/old/htmlwriter/outputforflash.html283
-rw-r--r--release/samples/old/htmlwriter/outputhtml.html224
5 files changed, 526 insertions, 0 deletions
diff --git a/release/samples/old/htmlwriter/assets/outputforflash/outputforflash.fla b/release/samples/old/htmlwriter/assets/outputforflash/outputforflash.fla
new file mode 100644
index 00000000..27e68ccd
--- /dev/null
+++ b/release/samples/old/htmlwriter/assets/outputforflash/outputforflash.fla
Binary files differ
diff --git a/release/samples/old/htmlwriter/assets/outputforflash/outputforflash.swf b/release/samples/old/htmlwriter/assets/outputforflash/outputforflash.swf
new file mode 100644
index 00000000..dbe17b6b
--- /dev/null
+++ b/release/samples/old/htmlwriter/assets/outputforflash/outputforflash.swf
Binary files differ
diff --git a/release/samples/old/htmlwriter/assets/outputforflash/swfobject.js b/release/samples/old/htmlwriter/assets/outputforflash/swfobject.js
new file mode 100644
index 00000000..07009216
--- /dev/null
+++ b/release/samples/old/htmlwriter/assets/outputforflash/swfobject.js
@@ -0,0 +1,19 @@
1var swfobject=function(){function w(){if(!u){try{var a=d.getElementsByTagName("body")[0].appendChild(d.createElement("span"));a.parentNode.removeChild(a)}catch(b){return}u=!0;for(var a=z.length,c=0;c<a;c++)z[c]()}}function M(a){u?a():z[z.length]=a}function N(a){if("undefined"!=typeof n.addEventListener)n.addEventListener("load",a,!1);else if("undefined"!=typeof d.addEventListener)d.addEventListener("load",a,!1);else if("undefined"!=typeof n.attachEvent)U(n,"onload",a);else if("function"==typeof n.onload){var b=
2n.onload;n.onload=function(){b();a()}}else n.onload=a}function V(){var a=d.getElementsByTagName("body")[0],b=d.createElement("object");b.setAttribute("type","application/x-shockwave-flash");var c=a.appendChild(b);if(c){var f=0;(function(){if("undefined"!=typeof c.GetVariable){var g=c.GetVariable("$version");g&&(g=g.split(" ")[1].split(","),e.pv=[parseInt(g[0],10),parseInt(g[1],10),parseInt(g[2],10)])}else if(10>f){f++;setTimeout(arguments.callee,10);return}a.removeChild(b);c=null;E()})()}else E()}
3function E(){var a=r.length;if(0<a)for(var b=0;b<a;b++){var c=r[b].id,f=r[b].callbackFn,g={success:!1,id:c};if(0<e.pv[0]){var d=p(c);if(d)if(!A(r[b].swfVersion)||e.wk&&312>e.wk)if(r[b].expressInstall&&F()){g={};g.data=r[b].expressInstall;g.width=d.getAttribute("width")||"0";g.height=d.getAttribute("height")||"0";d.getAttribute("class")&&(g.styleclass=d.getAttribute("class"));d.getAttribute("align")&&(g.align=d.getAttribute("align"));for(var h={},d=d.getElementsByTagName("param"),k=d.length,l=0;l<
4k;l++)"movie"!=d[l].getAttribute("name").toLowerCase()&&(h[d[l].getAttribute("name")]=d[l].getAttribute("value"));G(g,h,c,f)}else W(d),f&&f(g);else v(c,!0),f&&(g.success=!0,g.ref=H(c),f(g))}else v(c,!0),f&&((c=H(c))&&"undefined"!=typeof c.SetVariable&&(g.success=!0,g.ref=c),f(g))}}function H(a){var b=null;(a=p(a))&&"OBJECT"==a.nodeName&&("undefined"!=typeof a.SetVariable?b=a:(a=a.getElementsByTagName("object")[0])&&(b=a));return b}function F(){return!B&&A("6.0.65")&&(e.win||e.mac)&&!(e.wk&&312>e.wk)}
5function G(a,b,c,f){B=!0;I=f||null;O={success:!1,id:c};var g=p(c);if(g){"OBJECT"==g.nodeName?(y=J(g),C=null):(y=g,C=c);a.id="SWFObjectExprInst";if("undefined"==typeof a.width||!/%$/.test(a.width)&&310>parseInt(a.width,10))a.width="310";if("undefined"==typeof a.height||!/%$/.test(a.height)&&137>parseInt(a.height,10))a.height="137";d.title=d.title.slice(0,47)+" - Flash Player Installation";f=e.ie&&e.win?"ActiveX":"PlugIn";f="MMredirectURL\x3d"+n.location.toString().replace(/&/g,"%26")+"\x26MMplayerType\x3d"+
6f+"\x26MMdoctitle\x3d"+d.title;b.flashvars="undefined"!=typeof b.flashvars?b.flashvars+("\x26"+f):f;e.ie&&e.win&&4!=g.readyState&&(f=d.createElement("div"),c+="SWFObjectNew",f.setAttribute("id",c),g.parentNode.insertBefore(f,g),g.style.display="none",function(){4==g.readyState?g.parentNode.removeChild(g):setTimeout(arguments.callee,10)}());K(a,b,c)}}function W(a){if(e.ie&&e.win&&4!=a.readyState){var b=d.createElement("div");a.parentNode.insertBefore(b,a);b.parentNode.replaceChild(J(a),b);a.style.display=
7"none";(function(){4==a.readyState?a.parentNode.removeChild(a):setTimeout(arguments.callee,10)})()}else a.parentNode.replaceChild(J(a),a)}function J(a){var b=d.createElement("div");if(e.win&&e.ie)b.innerHTML=a.innerHTML;else if(a=a.getElementsByTagName("object")[0])if(a=a.childNodes)for(var c=a.length,f=0;f<c;f++)1==a[f].nodeType&&"PARAM"==a[f].nodeName||8==a[f].nodeType||b.appendChild(a[f].cloneNode(!0));return b}function K(a,b,c){var f,g=p(c);if(e.wk&&312>e.wk)return f;if(g)if("undefined"==typeof a.id&&
8(a.id=c),e.ie&&e.win){var q="",h;for(h in a)a[h]!=Object.prototype[h]&&("data"==h.toLowerCase()?b.movie=a[h]:"styleclass"==h.toLowerCase()?q+=' class\x3d"'+a[h]+'"':"classid"!=h.toLowerCase()&&(q+=" "+h+'\x3d"'+a[h]+'"'));h="";for(var k in b)b[k]!=Object.prototype[k]&&(h+='\x3cparam name\x3d"'+k+'" value\x3d"'+b[k]+'" /\x3e');g.outerHTML='\x3cobject classid\x3d"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+q+"\x3e"+h+"\x3c/object\x3e";D[D.length]=a.id;f=p(a.id)}else{k=d.createElement("object");k.setAttribute("type",
9"application/x-shockwave-flash");for(var l in a)a[l]!=Object.prototype[l]&&("styleclass"==l.toLowerCase()?k.setAttribute("class",a[l]):"classid"!=l.toLowerCase()&&k.setAttribute(l,a[l]));for(q in b)b[q]!=Object.prototype[q]&&"movie"!=q.toLowerCase()&&(a=k,h=q,l=b[q],c=d.createElement("param"),c.setAttribute("name",h),c.setAttribute("value",l),a.appendChild(c));g.parentNode.replaceChild(k,g);f=k}return f}function P(a){var b=p(a);b&&"OBJECT"==b.nodeName&&(e.ie&&e.win?(b.style.display="none",function(){if(4==
10b.readyState){var c=p(a);if(c){for(var f in c)"function"==typeof c[f]&&(c[f]=null);c.parentNode.removeChild(c)}}else setTimeout(arguments.callee,10)}()):b.parentNode.removeChild(b))}function p(a){var b=null;try{b=d.getElementById(a)}catch(c){}return b}function U(a,b,c){a.attachEvent(b,c);x[x.length]=[a,b,c]}function A(a){var b=e.pv;a=a.split(".");a[0]=parseInt(a[0],10);a[1]=parseInt(a[1],10)||0;a[2]=parseInt(a[2],10)||0;return b[0]>a[0]||b[0]==a[0]&&b[1]>a[1]||b[0]==a[0]&&b[1]==a[1]&&b[2]>=a[2]?!0:
11!1}function Q(a,b,c,f){if(!e.ie||!e.mac){var g=d.getElementsByTagName("head")[0];g&&(c=c&&"string"==typeof c?c:"screen",f&&(L=m=null),m&&L==c||(f=d.createElement("style"),f.setAttribute("type","text/css"),f.setAttribute("media",c),m=g.appendChild(f),e.ie&&e.win&&"undefined"!=typeof d.styleSheets&&0<d.styleSheets.length&&(m=d.styleSheets[d.styleSheets.length-1]),L=c),e.ie&&e.win?m&&"object"==typeof m.addRule&&m.addRule(a,b):m&&"undefined"!=typeof d.createTextNode&&m.appendChild(d.createTextNode(a+
12" {"+b+"}")))}}function v(a,b){if(R){var c=b?"visible":"hidden";u&&p(a)?p(a).style.visibility=c:Q("#"+a,"visibility:"+c)}}function S(a){return null!=/[\\\"<>\.;]/.exec(a)&&"undefined"!=typeof encodeURIComponent?encodeURIComponent(a):a}var n=window,d=document,t=navigator,T=!1,z=[function(){T?V():E()}],r=[],D=[],x=[],y,C,I,O,u=!1,B=!1,m,L,R=!0,e=function(){var a="undefined"!=typeof d.getElementById&&"undefined"!=typeof d.getElementsByTagName&&"undefined"!=typeof d.createElement,b=t.userAgent.toLowerCase(),
13c=t.platform.toLowerCase(),f=c?/win/.test(c):/win/.test(b),c=c?/mac/.test(c):/mac/.test(b),b=/webkit/.test(b)?parseFloat(b.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):!1,g=!+"\v1",e=[0,0,0],h=null;if("undefined"!=typeof t.plugins&&"object"==typeof t.plugins["Shockwave Flash"])!(h=t.plugins["Shockwave Flash"].description)||"undefined"!=typeof t.mimeTypes&&t.mimeTypes["application/x-shockwave-flash"]&&!t.mimeTypes["application/x-shockwave-flash"].enabledPlugin||(T=!0,g=!1,h=h.replace(/^.*\s+(\S+\s+\S+$)/,
14"$1"),e[0]=parseInt(h.replace(/^(.*)\..*$/,"$1"),10),e[1]=parseInt(h.replace(/^.*\.(.*)\s.*$/,"$1"),10),e[2]=/[a-zA-Z]/.test(h)?parseInt(h.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0);else if("undefined"!=typeof n.ActiveXObject)try{var k=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");k&&(h=k.GetVariable("$version"))&&(g=!0,h=h.split(" ")[1].split(","),e=[parseInt(h[0],10),parseInt(h[1],10),parseInt(h[2],10)])}catch(l){}return{w3:a,pv:e,wk:b,ie:g,win:f,mac:c}}();(function(){e.w3&&(("undefined"!=typeof d.readyState&&
15"complete"==d.readyState||"undefined"==typeof d.readyState&&(d.getElementsByTagName("body")[0]||d.body))&&w(),u||("undefined"!=typeof d.addEventListener&&d.addEventListener("DOMContentLoaded",w,!1),e.ie&&e.win&&(d.attachEvent("onreadystatechange",function(){"complete"==d.readyState&&(d.detachEvent("onreadystatechange",arguments.callee),w())}),n==top&&function(){if(!u){try{d.documentElement.doScroll("left")}catch(a){setTimeout(arguments.callee,0);return}w()}}()),e.wk&&function(){u||(/loaded|complete/.test(d.readyState)?
16w():setTimeout(arguments.callee,0))}(),N(w)))})();(function(){e.ie&&e.win&&window.attachEvent("onunload",function(){for(var a=x.length,b=0;b<a;b++)x[b][0].detachEvent(x[b][1],x[b][2]);a=D.length;for(b=0;b<a;b++)P(D[b]);for(var c in e)e[c]=null;e=null;for(var f in swfobject)swfobject[f]=null;swfobject=null})})();return{registerObject:function(a,b,c,f){if(e.w3&&a&&b){var d={};d.id=a;d.swfVersion=b;d.expressInstall=c;d.callbackFn=f;r[r.length]=d;v(a,!1)}else f&&f({success:!1,id:a})},getObjectById:function(a){if(e.w3)return H(a)},
17embedSWF:function(a,b,c,d,g,q,h,k,l,n){var p={success:!1,id:b};e.w3&&!(e.wk&&312>e.wk)&&a&&b&&c&&d&&g?(v(b,!1),M(function(){c+="";d+="";var e={};if(l&&"object"===typeof l)for(var m in l)e[m]=l[m];e.data=a;e.width=c;e.height=d;m={};if(k&&"object"===typeof k)for(var r in k)m[r]=k[r];if(h&&"object"===typeof h)for(var t in h)m.flashvars="undefined"!=typeof m.flashvars?m.flashvars+("\x26"+t+"\x3d"+h[t]):t+"\x3d"+h[t];if(A(g))r=K(e,m,b),e.id==b&&v(b,!0),p.success=!0,p.ref=r;else{if(q&&F()){e.data=q;G(e,
18m,b,n);return}v(b,!0)}n&&n(p)})):n&&n(p)},switchOffAutoHideShow:function(){R=!1},ua:e,getFlashPlayerVersion:function(){return{major:e.pv[0],minor:e.pv[1],release:e.pv[2]}},hasFlashPlayerVersion:A,createSWF:function(a,b,c){if(e.w3)return K(a,b,c)},showExpressInstall:function(a,b,c,d){e.w3&&F()&&G(a,b,c,d)},removeSWF:function(a){e.w3&&P(a)},createCSS:function(a,b,c,d){e.w3&&Q(a,b,c,d)},addDomLoadEvent:M,addLoadEvent:N,getQueryParamValue:function(a){var b=d.location.search||d.location.hash;if(b){/\?/.test(b)&&
19(b=b.split("?")[1]);if(null==a)return S(b);for(var b=b.split("\x26"),c=0;c<b.length;c++)if(b[c].substring(0,b[c].indexOf("\x3d"))==a)return S(b[c].substring(b[c].indexOf("\x3d")+1))}return""},expressInstallCallback:function(){if(B){var a=p("SWFObjectExprInst");a&&y&&(a.parentNode.replaceChild(y,a),C&&(v(C,!0),e.ie&&e.win&&(y.style.display="block")),I&&I(O));B=!1}}}}(); \ No newline at end of file
diff --git a/release/samples/old/htmlwriter/outputforflash.html b/release/samples/old/htmlwriter/outputforflash.html
new file mode 100644
index 00000000..c6923df8
--- /dev/null
+++ b/release/samples/old/htmlwriter/outputforflash.html
@@ -0,0 +1,283 @@
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.md or http://ckeditor.com/license
5-->
6<html>
7<head>
8 <meta charset="utf-8">
9 <title>Output for Flash &mdash; CKEditor Sample</title>
10 <script src="../../../ckeditor.js"></script>
11 <script src="../../../samples/old/sample.js"></script>
12 <script src="assets/outputforflash/swfobject.js"></script>
13 <link href="../../../samples/old/sample.css" rel="stylesheet">
14 <meta name="ckeditor-sample-required-plugins" content="sourcearea">
15 <meta name="ckeditor-sample-name" content="Output for Flash">
16 <meta name="ckeditor-sample-group" content="Advanced Samples">
17 <meta name="ckeditor-sample-description" content="Configuring CKEditor to produce HTML code that can be used with Adobe Flash.">
18 <style>
19
20 .alert
21 {
22 background: #ffa84c;
23 padding: 10px 15px;
24 font-weight: bold;
25 display: block;
26 margin-bottom: 20px;
27 }
28
29 </style>
30</head>
31<body>
32 <h1 class="samples">
33 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Producing Flash Compliant HTML Output
34 </h1>
35 <div class="warning deprecated">
36 This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
37 </div>
38 <div class="description">
39 <p>
40 This sample shows how to configure CKEditor to output
41 HTML code that can be used with
42 <a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&amp;file=00000922.html">
43 Adobe Flash</a>.
44 The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
45 <code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
46 </p>
47 <p>
48 To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
49 JavaScript call, and define CKEditor features to use HTML elements and attributes.
50 </p>
51 <p>
52 For details on how to create this setup check the source code of this sample page.
53 </p>
54 </div>
55 <p>
56 To see how it works, create some content in the editing area of CKEditor on the left
57 and send it to the Flash object on the right side of the page by using the
58 <strong>Send to Flash</strong> button.
59 </p>
60 <table style="width: 100%; border-spacing: 0; border-collapse:collapse;">
61 <tr>
62 <td style="width: 100%">
63 <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;&lt;b&gt;&lt;font size=&quot;18&quot; style=&quot;font-size:18px;&quot;&gt;Flash and HTML&lt;/font&gt;&lt;/b&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;It is possible to have &lt;a href=&quot;http://ckeditor.com&quot;&gt;CKEditor&lt;/a&gt; creating content that will be later loaded inside &lt;b&gt;Flash&lt;/b&gt; objects and animations.&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;Flash has a few limitations when dealing with HTML:&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;It has limited support on tags.&lt;/li&gt;&lt;li&gt;There is no margin between block elements, like paragraphs.&lt;/li&gt;&lt;/ul&gt;</textarea>
64 <script>
65
66 if ( document.location.protocol == 'file:' )
67 alert( 'Warning: This samples does not work when loaded from local filesystem' +
68 'due to security restrictions implemented in Flash.' +
69 '\n\nPlease load the sample from a web server instead.' );
70
71 var editor = CKEDITOR.replace( 'editor1', {
72 /*
73 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
74 */
75 extraPlugins: 'htmlwriter',
76
77 height: 290,
78 width: '100%',
79 toolbar: [
80 [ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],
81 [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
82 '/',
83 [ 'Font', 'FontSize' ],
84 [ 'TextColor', '-', 'About' ]
85 ],
86
87 /*
88 * Style sheet for the contents
89 */
90 contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
91
92 /*
93 * Quirks doctype
94 */
95 docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
96
97 /*
98 * Core styles.
99 */
100 coreStyles_bold: { element: 'b' },
101 coreStyles_italic: { element: 'i' },
102 coreStyles_underline: { element: 'u' },
103
104 /*
105 * Font face.
106 */
107
108 // Define the way font elements will be applied to the document. The "font"
109 // element will be used.
110 font_style: {
111 element: 'font',
112 attributes: { 'face': '#(family)' }
113 },
114
115 /*
116 * Font sizes.
117 */
118
119 // The CSS part of the font sizes isn't used by Flash, it is there to get the
120 // font rendered correctly in CKEditor.
121 fontSize_sizes: '8px/8;9px/9;10px/10;11px/11;12px/12;14px/14;16px/16;18px/18;20px/20;22px/22;24px/24;26px/26;28px/28;36px/36;48px/48;72px/72',
122 fontSize_style: {
123 element: 'font',
124 attributes: { 'size': '#(size)' },
125 styles: { 'font-size': '#(size)px' }
126 } ,
127
128 /*
129 * Font colors.
130 */
131 colorButton_enableMore: true,
132
133 colorButton_foreStyle: {
134 element: 'font',
135 attributes: { 'color': '#(color)' }
136 },
137
138 colorButton_backStyle: {
139 element: 'font',
140 styles: { 'background-color': '#(color)' }
141 },
142
143 on: { 'instanceReady': configureFlashOutput }
144 });
145
146 /*
147 * Adjust the behavior of the dataProcessor to match the
148 * requirements of Flash
149 */
150 function configureFlashOutput( ev ) {
151 var editor = ev.editor,
152 dataProcessor = editor.dataProcessor,
153 htmlFilter = dataProcessor && dataProcessor.htmlFilter;
154
155 // Out self closing tags the HTML4 way, like <br>.
156 dataProcessor.writer.selfClosingEnd = '>';
157
158 // Make output formatting match Flash expectations
159 var dtd = CKEDITOR.dtd;
160 for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
161 dataProcessor.writer.setRules( e, {
162 indent: false,
163 breakBeforeOpen: false,
164 breakAfterOpen: false,
165 breakBeforeClose: false,
166 breakAfterClose: false
167 });
168 }
169 dataProcessor.writer.setRules( 'br', {
170 indent: false,
171 breakBeforeOpen: false,
172 breakAfterOpen: false,
173 breakBeforeClose: false,
174 breakAfterClose: false
175 });
176
177 // Output properties as attributes, not styles.
178 htmlFilter.addRules( {
179 elements: {
180 $: function( element ) {
181 var style, match, width, height, align;
182
183 // Output dimensions of images as width and height
184 if ( element.name == 'img' ) {
185 style = element.attributes.style;
186
187 if ( style ) {
188 // Get the width from the style.
189 match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style );
190 width = match && match[1];
191
192 // Get the height from the style.
193 match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );
194 height = match && match[1];
195
196 if ( width ) {
197 element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
198 element.attributes.width = width;
199 }
200
201 if ( height ) {
202 element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
203 element.attributes.height = height;
204 }
205 }
206 }
207
208 // Output alignment of paragraphs using align
209 if ( element.name == 'p' ) {
210 style = element.attributes.style;
211
212 if ( style ) {
213 // Get the align from the style.
214 match = ( /(?:^|\s)text-align\s*:\s*(\w*);?/i ).exec( style );
215 align = match && match[1];
216
217 if ( align ) {
218 element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
219 element.attributes.align = align;
220 }
221 }
222 }
223
224 if ( element.attributes.style === '' )
225 delete element.attributes.style;
226
227 return element;
228 }
229 }
230 });
231 }
232
233 function sendToFlash() {
234 var html = CKEDITOR.instances.editor1.getData() ;
235
236 // Quick fix for link color.
237 html = html.replace( /<a /g, '<font color="#0000FF"><u><a ' )
238 html = html.replace( /<\/a>/g, '</a></u></font>' )
239
240 var flash = document.getElementById( 'ckFlashContainer' ) ;
241 flash.setData( html ) ;
242 }
243
244 CKEDITOR.domReady( function() {
245 if ( !swfobject.hasFlashPlayerVersion( '8' ) ) {
246 CKEDITOR.dom.element.createFromHtml( '<span class="alert">' +
247 'At least Adobe Flash Player 8 is required to run this sample. ' +
248 'You can download it from <a href="http://get.adobe.com/flashplayer">Adobe\'s website</a>.' +
249 '</span>' ).insertBefore( editor.element );
250 }
251
252 swfobject.embedSWF(
253 'assets/outputforflash/outputforflash.swf',
254 'ckFlashContainer',
255 '550',
256 '400',
257 '8',
258 { wmode: 'transparent' }
259 );
260 });
261
262 </script>
263 <p>
264 <input type="button" value="Send to Flash" onclick="sendToFlash();">
265 </p>
266 </td>
267 <td style="vertical-align: top; padding-left: 20px">
268 <div id="ckFlashContainer"></div>
269 </td>
270 </tr>
271 </table>
272 <div id="footer">
273 <hr>
274 <p>
275 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
276 </p>
277 <p id="copy">
278 Copyright &copy; 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
279 Knabben. All rights reserved.
280 </p>
281 </div>
282</body>
283</html>
diff --git a/release/samples/old/htmlwriter/outputhtml.html b/release/samples/old/htmlwriter/outputhtml.html
new file mode 100644
index 00000000..3c584558
--- /dev/null
+++ b/release/samples/old/htmlwriter/outputhtml.html
@@ -0,0 +1,224 @@
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.md or http://ckeditor.com/license
5-->
6<html>
7<head>
8 <meta charset="utf-8">
9 <title>HTML Compliant Output &mdash; CKEditor Sample</title>
10 <script src="../../../ckeditor.js"></script>
11 <script src="../../../samples/old/sample.js"></script>
12 <link href="../../../samples/old/sample.css" rel="stylesheet">
13 <meta name="ckeditor-sample-required-plugins" content="sourcearea">
14 <meta name="ckeditor-sample-name" content="Output HTML">
15 <meta name="ckeditor-sample-group" content="Advanced Samples">
16 <meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">
17</head>
18<body>
19 <h1 class="samples">
20 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Producing HTML Compliant Output
21 </h1>
22 <div class="warning deprecated">
23 This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
24 </div>
25 <div class="description">
26 <p>
27 This sample shows how to configure CKEditor to output valid
28 <a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
29 Traditional HTML elements like <code>&lt;b&gt;</code>,
30 <code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
31 <code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.
32 </p>
33 <p>
34 To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
35 JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
36 </p>
37 <p>
38 A snippet of the configuration code can be seen below; check the source of this page for
39 full definition:
40 </p>
41<pre class="samples">
42CKEDITOR.replace( '<em>textarea_id</em>', {
43 coreStyles_bold: { element: 'b' },
44 coreStyles_italic: { element: 'i' },
45
46 fontSize_style: {
47 element: 'font',
48 attributes: { 'size': '#(size)' }
49 }
50
51 ...
52});</pre>
53 </div>
54 <form action="../../../samples/sample_posteddata.php" method="post">
55 <p>
56 <label for="editor1">
57 Editor 1:
58 </label>
59 <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;b&gt;sample text&lt;/b&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
60 <script>
61
62 CKEDITOR.replace( 'editor1', {
63 /*
64 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
65 */
66 extraPlugins: 'htmlwriter',
67
68 /*
69 * Style sheet for the contents
70 */
71 contentsCss: 'body {color:#000; background-color#:FFF;}',
72
73 /*
74 * Simple HTML5 doctype
75 */
76 docType: '<!DOCTYPE HTML>',
77
78 /*
79 * Allowed content rules which beside limiting allowed HTML
80 * will also take care of transforming styles to attributes
81 * (currently only for img - see transformation rules defined below).
82 *
83 * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
84 */
85 allowedContent:
86 'h1 h2 h3 p pre[align]; ' +
87 'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
88 'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',
89
90 /*
91 * Core styles.
92 */
93 coreStyles_bold: { element: 'b' },
94 coreStyles_italic: { element: 'i' },
95 coreStyles_underline: { element: 'u' },
96 coreStyles_strike: { element: 'strike' },
97
98 /*
99 * Font face.
100 */
101
102 // Define the way font elements will be applied to the document.
103 // The "font" element will be used.
104 font_style: {
105 element: 'font',
106 attributes: { 'face': '#(family)' }
107 },
108
109 /*
110 * Font sizes.
111 */
112 fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
113 fontSize_style: {
114 element: 'font',
115 attributes: { 'size': '#(size)' }
116 },
117
118 /*
119 * Font colors.
120 */
121
122 colorButton_foreStyle: {
123 element: 'font',
124 attributes: { 'color': '#(color)' }
125 },
126
127 colorButton_backStyle: {
128 element: 'font',
129 styles: { 'background-color': '#(color)' }
130 },
131
132 /*
133 * Styles combo.
134 */
135 stylesSet: [
136 { name: 'Computer Code', element: 'code' },
137 { name: 'Keyboard Phrase', element: 'kbd' },
138 { name: 'Sample Text', element: 'samp' },
139 { name: 'Variable', element: 'var' },
140 { name: 'Deleted Text', element: 'del' },
141 { name: 'Inserted Text', element: 'ins' },
142 { name: 'Cited Work', element: 'cite' },
143 { name: 'Inline Quotation', element: 'q' }
144 ],
145
146 on: {
147 pluginsLoaded: configureTransformations,
148 loaded: configureHtmlWriter
149 }
150 });
151
152 /*
153 * Add missing content transformations.
154 */
155 function configureTransformations( evt ) {
156 var editor = evt.editor;
157
158 editor.dataProcessor.htmlFilter.addRules( {
159 attributes: {
160 style: function( value, element ) {
161 // Return #RGB for background and border colors
162 return CKEDITOR.tools.convertRgbToHex( value );
163 }
164 }
165 } );
166
167 // Default automatic content transformations do not yet take care of
168 // align attributes on blocks, so we need to add our own transformation rules.
169 function alignToAttribute( element ) {
170 if ( element.styles[ 'text-align' ] ) {
171 element.attributes.align = element.styles[ 'text-align' ];
172 delete element.styles[ 'text-align' ];
173 }
174 }
175 editor.filter.addTransformations( [
176 [ { element: 'p', right: alignToAttribute } ],
177 [ { element: 'h1', right: alignToAttribute } ],
178 [ { element: 'h2', right: alignToAttribute } ],
179 [ { element: 'h3', right: alignToAttribute } ],
180 [ { element: 'pre', right: alignToAttribute } ]
181 ] );
182 }
183
184 /*
185 * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
186 */
187 function configureHtmlWriter( evt ) {
188 var editor = evt.editor,
189 dataProcessor = editor.dataProcessor;
190
191 // Out self closing tags the HTML4 way, like <br>.
192 dataProcessor.writer.selfClosingEnd = '>';
193
194 // Make output formatting behave similar to FCKeditor.
195 var dtd = CKEDITOR.dtd;
196 for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
197 dataProcessor.writer.setRules( e, {
198 indent: true,
199 breakBeforeOpen: true,
200 breakAfterOpen: false,
201 breakBeforeClose: !dtd[ e ][ '#' ],
202 breakAfterClose: true
203 });
204 }
205 }
206
207 </script>
208 </p>
209 <p>
210 <input type="submit" value="Submit">
211 </p>
212 </form>
213 <div id="footer">
214 <hr>
215 <p>
216 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
217 </p>
218 <p id="copy">
219 Copyright &copy; 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
220 Knabben. All rights reserved.
221 </p>
222 </div>
223</body>
224</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 06:00:18 +0000