ckeditor 4.0.7 → 4.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +16 -2
- data/app/assets/javascripts/ckeditor/application.js +1 -0
- data/app/assets/javascripts/ckeditor/filebrowser/javascripts/application.js.erb +10 -0
- data/app/assets/javascripts/ckeditor/filebrowser/javascripts/jquery.endless-scroll.js +300 -0
- data/app/assets/javascripts/ckeditor/filebrowser/stylesheets/uploader.css.erb +4 -0
- data/app/controllers/ckeditor/attachment_files_controller.rb +3 -1
- data/app/controllers/ckeditor/pictures_controller.rb +3 -1
- data/app/views/ckeditor/attachment_files/index.html.erb +11 -5
- data/app/views/ckeditor/pictures/index.html.erb +12 -6
- data/app/views/ckeditor/shared/_asset.html.erb +1 -1
- data/app/views/ckeditor/shared/_asset_tmpl.html.erb +1 -1
- data/config/locales/cs.ckeditor.yml +1 -0
- data/config/locales/de.ckeditor.yml +1 -0
- data/config/locales/el-GR.cdkeditor.yml +2 -1
- data/config/locales/en.ckeditor.yml +1 -0
- data/config/locales/es.ckeditor.yml +1 -0
- data/config/locales/fr.ckeditor.yml +1 -0
- data/config/locales/hu.ckeditor.yml +1 -0
- data/config/locales/it.ckeditor.yml +1 -0
- data/config/locales/nl.ckeditor.yml +2 -1
- data/config/locales/pl.ckeditor.yml +1 -0
- data/config/locales/pt-BR.ckeditor.yml +2 -1
- data/config/locales/pt-PT.ckeditor.yml +1 -0
- data/config/locales/ru.ckeditor.yml +1 -0
- data/config/locales/sv-SE.ckeditor.yml +1 -0
- data/config/locales/uk.ckeditor.yml +1 -0
- data/config/locales/zh-CN.ckeditor.yml +1 -0
- data/lib/ckeditor.rb +11 -0
- data/lib/ckeditor/helpers/controllers.rb +1 -1
- data/lib/ckeditor/paginatable.rb +56 -0
- data/lib/ckeditor/utils.rb +41 -18
- data/lib/ckeditor/version.rb +2 -2
- data/lib/generators/ckeditor/templates/ckeditor.rb +3 -0
- data/test/dummy/public/uploads/tmp/20140108-1222-52217-3986/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1222-52217-6261/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1222-52217-6421/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-3058/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-3058/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-3058/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-3990/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-3990/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-3990/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-8126/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-8126/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1223-52217-8126/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-0400/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-0400/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-0400/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-1537/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-1537/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-1537/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-4718/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-4820/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-8057/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-8057/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-8057/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52513-9147/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-3606/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-4369/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-4369/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-4369/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-4698/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-7541/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-9146/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-9146/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-9146/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-9782/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-9782/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1228-52590-9782/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-3256/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-3256/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-3256/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-3565/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-3565/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-3565/thumb_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-4292/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-4514/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-7430/rails.tar.gz +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-9145/content_rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-9145/rails.png +0 -0
- data/test/dummy/public/uploads/tmp/20140108-1230-52768-9145/thumb_rails.png +0 -0
- data/vendor/assets/javascripts/ckeditor/CHANGES.md +36 -0
- data/vendor/assets/javascripts/ckeditor/ckeditor.js +465 -463
- data/vendor/assets/javascripts/ckeditor/config.js +1 -1
- data/vendor/assets/javascripts/ckeditor/contents.css +17 -0
- data/vendor/assets/javascripts/ckeditor/lang/ca.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/cs.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/cy.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/de.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/el.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/en-au.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/en-ca.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/en-gb.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/es.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/fi.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/it.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/ja.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/km.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/nb.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/nl.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/no.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/pt-br.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/ru.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/sv.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/tr.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/zh-cn.js +1 -1
- data/vendor/assets/javascripts/ckeditor/lang/zh.js +1 -1
- data/vendor/assets/javascripts/ckeditor/plugins/a11yhelp/dialogs/lang/cy.js +3 -3
- data/vendor/assets/javascripts/ckeditor/plugins/a11yhelp/dialogs/lang/fi.js +2 -2
- data/vendor/assets/javascripts/ckeditor/plugins/a11yhelp/dialogs/lang/zh-cn.js +1 -1
- data/vendor/assets/javascripts/ckeditor/plugins/a11yhelp/dialogs/lang/zh.js +7 -0
- data/vendor/assets/javascripts/ckeditor/plugins/scayt/dialogs/options.js +16 -16
- data/vendor/assets/javascripts/ckeditor/plugins/specialchar/dialogs/lang/zh.js +12 -0
- data/vendor/assets/javascripts/ckeditor/plugins/templates/templates/default.js +1 -1
- data/vendor/assets/javascripts/ckeditor/plugins/wsc/dialogs/wsc.js +31 -31
- data/vendor/assets/javascripts/ckeditor/samples/ajax.html +82 -0
- data/vendor/assets/javascripts/ckeditor/samples/api.html +207 -0
- data/vendor/assets/javascripts/ckeditor/samples/appendto.html +57 -0
- data/vendor/assets/javascripts/ckeditor/samples/assets/inlineall/logo.png +0 -0
- data/vendor/assets/javascripts/ckeditor/samples/assets/outputxhtml/outputxhtml.css +204 -0
- data/vendor/assets/javascripts/ckeditor/samples/assets/posteddata.php +59 -0
- data/vendor/assets/javascripts/ckeditor/samples/assets/sample.css +3 -0
- data/vendor/assets/javascripts/ckeditor/samples/assets/sample.jpg +0 -0
- data/vendor/assets/javascripts/ckeditor/samples/assets/uilanguages/languages.js +7 -0
- data/vendor/assets/javascripts/ckeditor/samples/datafiltering.html +401 -0
- data/vendor/assets/javascripts/ckeditor/samples/divreplace.html +141 -0
- data/vendor/assets/javascripts/ckeditor/samples/index.html +128 -0
- data/vendor/assets/javascripts/ckeditor/samples/inlineall.html +311 -0
- data/vendor/assets/javascripts/ckeditor/samples/inlinebycode.html +121 -0
- data/vendor/assets/javascripts/ckeditor/samples/inlinetextarea.html +110 -0
- data/vendor/assets/javascripts/ckeditor/samples/jquery.html +97 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/dialog/assets/my_dialog.js +48 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/dialog/dialog.html +187 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/enterkey/enterkey.html +103 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.fla +0 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/htmlwriter/assets/outputforflash/outputforflash.swf +0 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/htmlwriter/assets/outputforflash/swfobject.js +18 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/htmlwriter/outputforflash.html +280 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/htmlwriter/outputhtml.html +221 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/magicline/magicline.html +206 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/toolbar/toolbar.html +232 -0
- data/vendor/assets/javascripts/ckeditor/samples/plugins/wysiwygarea/fullpage.html +77 -0
- data/vendor/assets/javascripts/ckeditor/samples/readonly.html +73 -0
- data/vendor/assets/javascripts/ckeditor/samples/replacebyclass.html +57 -0
- data/vendor/assets/javascripts/ckeditor/samples/replacebycode.html +56 -0
- data/vendor/assets/javascripts/ckeditor/samples/sample.css +356 -0
- data/vendor/assets/javascripts/ckeditor/samples/sample.js +50 -0
- data/vendor/assets/javascripts/ckeditor/samples/sample_posteddata.php +16 -0
- data/vendor/assets/javascripts/ckeditor/samples/tabindex.html +75 -0
- data/vendor/assets/javascripts/ckeditor/samples/uicolor.html +69 -0
- data/vendor/assets/javascripts/ckeditor/samples/uilanguages.html +119 -0
- data/vendor/assets/javascripts/ckeditor/samples/xhtmlstyle.html +231 -0
- metadata +139 -16
- data/test/dummy/db/test.sqlite3 +0 -0
- data/test/dummy/log/test.log +0 -1425
- data/test/tmp/app/models/ckeditor/asset.rb +0 -5
- data/test/tmp/app/models/ckeditor/attachment_file.rb +0 -12
- data/test/tmp/app/models/ckeditor/picture.rb +0 -13
- data/test/tmp/config/initializers/ckeditor.rb +0 -19
- data/test/tmp/config/routes.rb +0 -6
@@ -0,0 +1,103 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<!--
|
3
|
+
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
4
|
+
For licensing, see LICENSE.md or http://ckeditor.com/license
|
5
|
+
-->
|
6
|
+
<html>
|
7
|
+
<head>
|
8
|
+
<title>ENTER Key Configuration — CKEditor Sample</title>
|
9
|
+
<meta charset="utf-8">
|
10
|
+
<script src="../../../ckeditor.js"></script>
|
11
|
+
<link href="../../../samples/sample.css" rel="stylesheet">
|
12
|
+
<meta name="ckeditor-sample-name" content="Using the "Enter" key in CKEditor">
|
13
|
+
<meta name="ckeditor-sample-group" content="Advanced Samples">
|
14
|
+
<meta name="ckeditor-sample-description" content="Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.">
|
15
|
+
<script>
|
16
|
+
|
17
|
+
var editor;
|
18
|
+
|
19
|
+
function changeEnter() {
|
20
|
+
// If we already have an editor, let's destroy it first.
|
21
|
+
if ( editor )
|
22
|
+
editor.destroy( true );
|
23
|
+
|
24
|
+
// Create the editor again, with the appropriate settings.
|
25
|
+
editor = CKEDITOR.replace( 'editor1', {
|
26
|
+
extraPlugins: 'enterkey',
|
27
|
+
enterMode: Number( document.getElementById( 'xEnter' ).value ),
|
28
|
+
shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )
|
29
|
+
});
|
30
|
+
}
|
31
|
+
|
32
|
+
window.onload = changeEnter;
|
33
|
+
|
34
|
+
</script>
|
35
|
+
</head>
|
36
|
+
<body>
|
37
|
+
<h1 class="samples">
|
38
|
+
<a href="../../../samples/index.html">CKEditor Samples</a> » ENTER Key Configuration
|
39
|
+
</h1>
|
40
|
+
<div class="description">
|
41
|
+
<p>
|
42
|
+
This sample shows how to configure the <em>Enter</em> and <em>Shift+Enter</em> keys
|
43
|
+
to perform actions specified in the
|
44
|
+
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-enterMode"><code>enterMode</code></a>
|
45
|
+
and <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-shiftEnterMode"><code>shiftEnterMode</code></a>
|
46
|
+
parameters, respectively.
|
47
|
+
You can choose from the following options:
|
48
|
+
</p>
|
49
|
+
<ul class="samples">
|
50
|
+
<li><strong><code>ENTER_P</code></strong> – new <code><p></code> paragraphs are created;</li>
|
51
|
+
<li><strong><code>ENTER_BR</code></strong> – lines are broken with <code><br></code> elements;</li>
|
52
|
+
<li><strong><code>ENTER_DIV</code></strong> – new <code><div></code> blocks are created.</li>
|
53
|
+
</ul>
|
54
|
+
<p>
|
55
|
+
The sample code below shows how to configure CKEditor to create a <code><div></code> block when <em>Enter</em> key is pressed.
|
56
|
+
</p>
|
57
|
+
<pre class="samples">
|
58
|
+
CKEDITOR.replace( '<em>textarea_id</em>', {
|
59
|
+
<strong>enterMode: CKEDITOR.ENTER_DIV</strong>
|
60
|
+
});</pre>
|
61
|
+
<p>
|
62
|
+
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
63
|
+
the <code><textarea></code> element to be replaced.
|
64
|
+
</p>
|
65
|
+
</div>
|
66
|
+
<div style="float: left; margin-right: 20px">
|
67
|
+
When <em>Enter</em> is pressed:<br>
|
68
|
+
<select id="xEnter" onchange="changeEnter();">
|
69
|
+
<option selected="selected" value="1">Create a new <P> (recommended)</option>
|
70
|
+
<option value="3">Create a new <DIV></option>
|
71
|
+
<option value="2">Break the line with a <BR></option>
|
72
|
+
</select>
|
73
|
+
</div>
|
74
|
+
<div style="float: left">
|
75
|
+
When <em>Shift+Enter</em> is pressed:<br>
|
76
|
+
<select id="xShiftEnter" onchange="changeEnter();">
|
77
|
+
<option value="1">Create a new <P></option>
|
78
|
+
<option value="3">Create a new <DIV></option>
|
79
|
+
<option selected="selected" value="2">Break the line with a <BR> (recommended)</option>
|
80
|
+
</select>
|
81
|
+
</div>
|
82
|
+
<br style="clear: both">
|
83
|
+
<form action="../../../samples/sample_posteddata.php" method="post">
|
84
|
+
<p>
|
85
|
+
<br>
|
86
|
+
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</textarea>
|
87
|
+
</p>
|
88
|
+
<p>
|
89
|
+
<input type="submit" value="Submit">
|
90
|
+
</p>
|
91
|
+
</form>
|
92
|
+
<div id="footer">
|
93
|
+
<hr>
|
94
|
+
<p>
|
95
|
+
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
96
|
+
</p>
|
97
|
+
<p id="copy">
|
98
|
+
Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
99
|
+
Knabben. All rights reserved.
|
100
|
+
</p>
|
101
|
+
</div>
|
102
|
+
</body>
|
103
|
+
</html>
|
Binary file
|
Binary file
|
@@ -0,0 +1,18 @@
|
|
1
|
+
var swfobject=function(){function u(){if(!s){try{var a=d.getElementsByTagName("body")[0].appendChild(d.createElement("span"));a.parentNode.removeChild(a)}catch(b){return}s=!0;for(var a=x.length,c=0;c<a;c++)x[c]()}}function L(a){s?a():x[x.length]=a}function M(a){if(typeof m.addEventListener!=i)m.addEventListener("load",a,!1);else if(typeof d.addEventListener!=i)d.addEventListener("load",a,!1);else if(typeof m.attachEvent!=i)U(m,"onload",a);else if("function"==typeof m.onload){var b=m.onload;m.onload=
|
2
|
+
function(){b();a()}}else m.onload=a}function V(){var a=d.getElementsByTagName("body")[0],b=d.createElement(r);b.setAttribute("type",y);var c=a.appendChild(b);if(c){var f=0;(function(){if(typeof c.GetVariable!=i){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;D()})()}else D()}function D(){var a=p.length;if(0<a)for(var b=0;b<a;b++){var c=p[b].id,
|
3
|
+
f=p[b].callbackFn,g={success:!1,id:c};if(0<e.pv[0]){var d=n(c);if(d)if(z(p[b].swfVersion)&&!(e.wk&&312>e.wk))t(c,!0),f&&(g.success=!0,g.ref=E(c),f(g));else if(p[b].expressInstall&&F()){g={};g.data=p[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"),j=d.length,k=0;k<j;k++)"movie"!=d[k].getAttribute("name").toLowerCase()&&
|
4
|
+
(h[d[k].getAttribute("name")]=d[k].getAttribute("value"));G(g,h,c,f)}else W(d),f&&f(g)}else if(t(c,!0),f){if((c=E(c))&&typeof c.SetVariable!=i)g.success=!0,g.ref=c;f(g)}}}function E(a){var b=null;if((a=n(a))&&"OBJECT"==a.nodeName)typeof a.SetVariable!=i?b=a:(a=a.getElementsByTagName(r)[0])&&(b=a);return b}function F(){return!A&&z("6.0.65")&&(e.win||e.mac)&&!(e.wk&&312>e.wk)}function G(a,b,c,f){A=!0;H=f||null;N={success:!1,id:c};var g=n(c);if(g){"OBJECT"==g.nodeName?(w=I(g),B=null):(w=g,B=c);a.id=
|
5
|
+
O;if(typeof a.width==i||!/%$/.test(a.width)&&310>parseInt(a.width,10))a.width="310";if(typeof a.height==i||!/%$/.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="+m.location.toString().replace(/&/g,"%26")+"&MMplayerType="+f+"&MMdoctitle="+d.title;b.flashvars=typeof b.flashvars!=i?b.flashvars+("&"+f):f;e.ie&&(e.win&&4!=g.readyState)&&(f=d.createElement("div"),c+="SWFObjectNew",f.setAttribute("id",
|
6
|
+
c),g.parentNode.insertBefore(f,g),g.style.display="none",function(){g.readyState==4?g.parentNode.removeChild(g):setTimeout(arguments.callee,10)}());J(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(I(a),b);a.style.display="none";(function(){4==a.readyState?a.parentNode.removeChild(a):setTimeout(arguments.callee,10)})()}else a.parentNode.replaceChild(I(a),a)}function I(a){var b=d.createElement("div");if(e.win&&
|
7
|
+
e.ie)b.innerHTML=a.innerHTML;else if(a=a.getElementsByTagName(r)[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 J(a,b,c){var f,g=n(c);if(e.wk&&312>e.wk)return f;if(g)if(typeof a.id==i&&(a.id=c),e.ie&&e.win){var o="",h;for(h in a)a[h]!=Object.prototype[h]&&("data"==h.toLowerCase()?b.movie=a[h]:"styleclass"==h.toLowerCase()?o+=' class="'+a[h]+'"':"classid"!=h.toLowerCase()&&(o+=" "+
|
8
|
+
h+'="'+a[h]+'"'));h="";for(var j in b)b[j]!=Object.prototype[j]&&(h+='<param name="'+j+'" value="'+b[j]+'" />');g.outerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+o+">"+h+"</object>";C[C.length]=a.id;f=n(a.id)}else{j=d.createElement(r);j.setAttribute("type",y);for(var k in a)a[k]!=Object.prototype[k]&&("styleclass"==k.toLowerCase()?j.setAttribute("class",a[k]):"classid"!=k.toLowerCase()&&j.setAttribute(k,a[k]));for(o in b)b[o]!=Object.prototype[o]&&"movie"!=o.toLowerCase()&&
|
9
|
+
(a=j,h=o,k=b[o],c=d.createElement("param"),c.setAttribute("name",h),c.setAttribute("value",k),a.appendChild(c));g.parentNode.replaceChild(j,g);f=j}return f}function P(a){var b=n(a);b&&"OBJECT"==b.nodeName&&(e.ie&&e.win?(b.style.display="none",function(){if(4==b.readyState){var c=n(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 n(a){var b=null;try{b=d.getElementById(a)}catch(c){}return b}
|
10
|
+
function U(a,b,c){a.attachEvent(b,c);v[v.length]=[a,b,c]}function z(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:!1}function Q(a,b,c,f){if(!e.ie||!e.mac){var g=d.getElementsByTagName("head")[0];if(g){c=c&&"string"==typeof c?c:"screen";f&&(K=l=null);if(!l||K!=c)f=d.createElement("style"),f.setAttribute("type","text/css"),f.setAttribute("media",c),l=g.appendChild(f),
|
11
|
+
e.ie&&(e.win&&typeof d.styleSheets!=i&&0<d.styleSheets.length)&&(l=d.styleSheets[d.styleSheets.length-1]),K=c;e.ie&&e.win?l&&typeof l.addRule==r&&l.addRule(a,b):l&&typeof d.createTextNode!=i&&l.appendChild(d.createTextNode(a+" {"+b+"}"))}}}function t(a,b){if(R){var c=b?"visible":"hidden";s&&n(a)?n(a).style.visibility=c:Q("#"+a,"visibility:"+c)}}function S(a){return null!=/[\\\"<>\.;]/.exec(a)&&typeof encodeURIComponent!=i?encodeURIComponent(a):a}var i="undefined",r="object",y="application/x-shockwave-flash",
|
12
|
+
O="SWFObjectExprInst",m=window,d=document,q=navigator,T=!1,x=[function(){T?V():D()}],p=[],C=[],v=[],w,B,H,N,s=!1,A=!1,l,K,R=!0,e=function(){var a=typeof d.getElementById!=i&&typeof d.getElementsByTagName!=i&&typeof d.createElement!=i,b=q.userAgent.toLowerCase(),c=q.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(typeof q.plugins!=i&&typeof q.plugins["Shockwave Flash"]==
|
13
|
+
r){if((h=q.plugins["Shockwave Flash"].description)&&!(typeof q.mimeTypes!=i&&q.mimeTypes[y]&&!q.mimeTypes[y].enabledPlugin))T=!0,g=!1,h=h.replace(/^.*\s+(\S+\s+\S+$)/,"$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(typeof m.ActiveXObject!=i)try{var j=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");if(j&&(h=j.GetVariable("$version")))g=!0,h=h.split(" ")[1].split(","),
|
14
|
+
e=[parseInt(h[0],10),parseInt(h[1],10),parseInt(h[2],10)]}catch(k){}return{w3:a,pv:e,wk:b,ie:g,win:f,mac:c}}();(function(){e.w3&&((typeof d.readyState!=i&&"complete"==d.readyState||typeof d.readyState==i&&(d.getElementsByTagName("body")[0]||d.body))&&u(),s||(typeof d.addEventListener!=i&&d.addEventListener("DOMContentLoaded",u,!1),e.ie&&e.win&&(d.attachEvent("onreadystatechange",function(){"complete"==d.readyState&&(d.detachEvent("onreadystatechange",arguments.callee),u())}),m==top&&function(){if(!s){try{d.documentElement.doScroll("left")}catch(a){setTimeout(arguments.callee,
|
15
|
+
0);return}u()}}()),e.wk&&function(){s||(/loaded|complete/.test(d.readyState)?u():setTimeout(arguments.callee,0))}(),M(u)))})();(function(){e.ie&&e.win&&window.attachEvent("onunload",function(){for(var a=v.length,b=0;b<a;b++)v[b][0].detachEvent(v[b][1],v[b][2]);a=C.length;for(b=0;b<a;b++)P(C[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=
|
16
|
+
f;p[p.length]=d;t(a,!1)}else f&&f({success:!1,id:a})},getObjectById:function(a){if(e.w3)return E(a)},embedSWF:function(a,b,c,d,g,o,h,j,k,m){var n={success:!1,id:b};e.w3&&!(e.wk&&312>e.wk)&&a&&b&&c&&d&&g?(t(b,!1),L(function(){c+="";d+="";var e={};if(k&&typeof k===r)for(var l in k)e[l]=k[l];e.data=a;e.width=c;e.height=d;l={};if(j&&typeof j===r)for(var p in j)l[p]=j[p];if(h&&typeof h===r)for(var q in h)l.flashvars=typeof l.flashvars!=i?l.flashvars+("&"+q+"="+h[q]):q+"="+h[q];if(z(g))p=J(e,l,b),e.id==
|
17
|
+
b&&t(b,!0),n.success=!0,n.ref=p;else{if(o&&F()){e.data=o;G(e,l,b,m);return}t(b,!0)}m&&m(n)})):m&&m(n)},switchOffAutoHideShow:function(){R=!1},ua:e,getFlashPlayerVersion:function(){return{major:e.pv[0],minor:e.pv[1],release:e.pv[2]}},hasFlashPlayerVersion:z,createSWF:function(a,b,c){if(e.w3)return J(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:L,addLoadEvent:M,getQueryParamValue:function(a){var b=
|
18
|
+
d.location.search||d.location.hash;if(b){/\?/.test(b)&&(b=b.split("?")[1]);if(null==a)return S(b);for(var b=b.split("&"),c=0;c<b.length;c++)if(b[c].substring(0,b[c].indexOf("="))==a)return S(b[c].substring(b[c].indexOf("=")+1))}return""},expressInstallCallback:function(){if(A){var a=n(O);a&&w&&(a.parentNode.replaceChild(w,a),B&&(t(B,!0),e.ie&&e.win&&(w.style.display="block")),H&&H(N));A=!1}}}}();
|
@@ -0,0 +1,280 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<!--
|
3
|
+
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
4
|
+
For licensing, see LICENSE.md or http://ckeditor.com/license
|
5
|
+
-->
|
6
|
+
<html>
|
7
|
+
<head>
|
8
|
+
<title>Output for Flash — CKEditor Sample</title>
|
9
|
+
<meta charset="utf-8">
|
10
|
+
<script src="../../../ckeditor.js"></script>
|
11
|
+
<script src="../../../samples/sample.js"></script>
|
12
|
+
<script src="assets/outputforflash/swfobject.js"></script>
|
13
|
+
<link href="../../../samples/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/index.html">CKEditor Samples</a> » Producing Flash Compliant HTML Output
|
34
|
+
</h1>
|
35
|
+
<div class="description">
|
36
|
+
<p>
|
37
|
+
This sample shows how to configure CKEditor to output
|
38
|
+
HTML code that can be used with
|
39
|
+
<a class="samples" href="http://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000922.html">
|
40
|
+
Adobe Flash</a>.
|
41
|
+
The code will contain a subset of standard HTML elements like <code><b></code>,
|
42
|
+
<code><i></code>, and <code><p></code> as well as HTML attributes.
|
43
|
+
</p>
|
44
|
+
<p>
|
45
|
+
To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
|
46
|
+
JavaScript call, and define CKEditor features to use HTML elements and attributes.
|
47
|
+
</p>
|
48
|
+
<p>
|
49
|
+
For details on how to create this setup check the source code of this sample page.
|
50
|
+
</p>
|
51
|
+
</div>
|
52
|
+
<p>
|
53
|
+
To see how it works, create some content in the editing area of CKEditor on the left
|
54
|
+
and send it to the Flash object on the right side of the page by using the
|
55
|
+
<strong>Send to Flash</strong> button.
|
56
|
+
</p>
|
57
|
+
<table style="width: 100%; border-spacing: 0; border-collapse:collapse;">
|
58
|
+
<tr>
|
59
|
+
<td style="width: 100%">
|
60
|
+
<textarea cols="80" id="editor1" name="editor1" rows="10"><p><b><font size="18" style="font-size:18px;">Flash and HTML</font></b></p><p>&nbsp;</p><p>It is possible to have <a href="http://ckeditor.com">CKEditor</a> creating content that will be later loaded inside <b>Flash</b> objects and animations.</p><p>&nbsp;</p><p>Flash has a few limitations when dealing with HTML:</p><p>&nbsp;</p><ul><li>It has limited support on tags.</li><li>There is no margin between block elements, like paragraphs.</li></ul></textarea>
|
61
|
+
<script>
|
62
|
+
|
63
|
+
if ( document.location.protocol == 'file:' )
|
64
|
+
alert( 'Warning: This samples does not work when loaded from local filesystem' +
|
65
|
+
'due to security restrictions implemented in Flash.' +
|
66
|
+
'\n\nPlease load the sample from a web server instead.' );
|
67
|
+
|
68
|
+
var editor = CKEDITOR.replace( 'editor1', {
|
69
|
+
/*
|
70
|
+
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
|
71
|
+
*/
|
72
|
+
extraPlugins: 'htmlwriter',
|
73
|
+
|
74
|
+
height: 290,
|
75
|
+
width: '100%',
|
76
|
+
toolbar: [
|
77
|
+
[ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],
|
78
|
+
[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
|
79
|
+
'/',
|
80
|
+
[ 'Font', 'FontSize' ],
|
81
|
+
[ 'TextColor', '-', 'About' ]
|
82
|
+
],
|
83
|
+
|
84
|
+
/*
|
85
|
+
* Style sheet for the contents
|
86
|
+
*/
|
87
|
+
contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
|
88
|
+
|
89
|
+
/*
|
90
|
+
* Quirks doctype
|
91
|
+
*/
|
92
|
+
docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
|
93
|
+
|
94
|
+
/*
|
95
|
+
* Core styles.
|
96
|
+
*/
|
97
|
+
coreStyles_bold: { element: 'b' },
|
98
|
+
coreStyles_italic: { element: 'i' },
|
99
|
+
coreStyles_underline: { element: 'u' },
|
100
|
+
|
101
|
+
/*
|
102
|
+
* Font face.
|
103
|
+
*/
|
104
|
+
|
105
|
+
// Define the way font elements will be applied to the document. The "font"
|
106
|
+
// element will be used.
|
107
|
+
font_style: {
|
108
|
+
element: 'font',
|
109
|
+
attributes: { 'face': '#(family)' }
|
110
|
+
},
|
111
|
+
|
112
|
+
/*
|
113
|
+
* Font sizes.
|
114
|
+
*/
|
115
|
+
|
116
|
+
// The CSS part of the font sizes isn't used by Flash, it is there to get the
|
117
|
+
// font rendered correctly in CKEditor.
|
118
|
+
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',
|
119
|
+
fontSize_style: {
|
120
|
+
element: 'font',
|
121
|
+
attributes: { 'size': '#(size)' },
|
122
|
+
styles: { 'font-size': '#(size)px' }
|
123
|
+
} ,
|
124
|
+
|
125
|
+
/*
|
126
|
+
* Font colors.
|
127
|
+
*/
|
128
|
+
colorButton_enableMore: true,
|
129
|
+
|
130
|
+
colorButton_foreStyle: {
|
131
|
+
element: 'font',
|
132
|
+
attributes: { 'color': '#(color)' }
|
133
|
+
},
|
134
|
+
|
135
|
+
colorButton_backStyle: {
|
136
|
+
element: 'font',
|
137
|
+
styles: { 'background-color': '#(color)' }
|
138
|
+
},
|
139
|
+
|
140
|
+
on: { 'instanceReady': configureFlashOutput }
|
141
|
+
});
|
142
|
+
|
143
|
+
/*
|
144
|
+
* Adjust the behavior of the dataProcessor to match the
|
145
|
+
* requirements of Flash
|
146
|
+
*/
|
147
|
+
function configureFlashOutput( ev ) {
|
148
|
+
var editor = ev.editor,
|
149
|
+
dataProcessor = editor.dataProcessor,
|
150
|
+
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
|
151
|
+
|
152
|
+
// Out self closing tags the HTML4 way, like <br>.
|
153
|
+
dataProcessor.writer.selfClosingEnd = '>';
|
154
|
+
|
155
|
+
// Make output formatting match Flash expectations
|
156
|
+
var dtd = CKEDITOR.dtd;
|
157
|
+
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
|
158
|
+
dataProcessor.writer.setRules( e, {
|
159
|
+
indent: false,
|
160
|
+
breakBeforeOpen: false,
|
161
|
+
breakAfterOpen: false,
|
162
|
+
breakBeforeClose: false,
|
163
|
+
breakAfterClose: false
|
164
|
+
});
|
165
|
+
}
|
166
|
+
dataProcessor.writer.setRules( 'br', {
|
167
|
+
indent: false,
|
168
|
+
breakBeforeOpen: false,
|
169
|
+
breakAfterOpen: false,
|
170
|
+
breakBeforeClose: false,
|
171
|
+
breakAfterClose: false
|
172
|
+
});
|
173
|
+
|
174
|
+
// Output properties as attributes, not styles.
|
175
|
+
htmlFilter.addRules( {
|
176
|
+
elements: {
|
177
|
+
$: function( element ) {
|
178
|
+
var style, match, width, height, align;
|
179
|
+
|
180
|
+
// Output dimensions of images as width and height
|
181
|
+
if ( element.name == 'img' ) {
|
182
|
+
style = element.attributes.style;
|
183
|
+
|
184
|
+
if ( style ) {
|
185
|
+
// Get the width from the style.
|
186
|
+
match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style );
|
187
|
+
width = match && match[1];
|
188
|
+
|
189
|
+
// Get the height from the style.
|
190
|
+
match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );
|
191
|
+
height = match && match[1];
|
192
|
+
|
193
|
+
if ( width ) {
|
194
|
+
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
|
195
|
+
element.attributes.width = width;
|
196
|
+
}
|
197
|
+
|
198
|
+
if ( height ) {
|
199
|
+
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
|
200
|
+
element.attributes.height = height;
|
201
|
+
}
|
202
|
+
}
|
203
|
+
}
|
204
|
+
|
205
|
+
// Output alignment of paragraphs using align
|
206
|
+
if ( element.name == 'p' ) {
|
207
|
+
style = element.attributes.style;
|
208
|
+
|
209
|
+
if ( style ) {
|
210
|
+
// Get the align from the style.
|
211
|
+
match = ( /(?:^|\s)text-align\s*:\s*(\w*);?/i ).exec( style );
|
212
|
+
align = match && match[1];
|
213
|
+
|
214
|
+
if ( align ) {
|
215
|
+
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
|
216
|
+
element.attributes.align = align;
|
217
|
+
}
|
218
|
+
}
|
219
|
+
}
|
220
|
+
|
221
|
+
if ( element.attributes.style === '' )
|
222
|
+
delete element.attributes.style;
|
223
|
+
|
224
|
+
return element;
|
225
|
+
}
|
226
|
+
}
|
227
|
+
});
|
228
|
+
}
|
229
|
+
|
230
|
+
function sendToFlash() {
|
231
|
+
var html = CKEDITOR.instances.editor1.getData() ;
|
232
|
+
|
233
|
+
// Quick fix for link color.
|
234
|
+
html = html.replace( /<a /g, '<font color="#0000FF"><u><a ' )
|
235
|
+
html = html.replace( /<\/a>/g, '</a></u></font>' )
|
236
|
+
|
237
|
+
var flash = document.getElementById( 'ckFlashContainer' ) ;
|
238
|
+
flash.setData( html ) ;
|
239
|
+
}
|
240
|
+
|
241
|
+
CKEDITOR.domReady( function() {
|
242
|
+
if ( !swfobject.hasFlashPlayerVersion( '8' ) ) {
|
243
|
+
CKEDITOR.dom.element.createFromHtml( '<span class="alert">' +
|
244
|
+
'At least Adobe Flash Player 8 is required to run this sample. ' +
|
245
|
+
'You can download it from <a href="http://get.adobe.com/flashplayer">Adobe\'s website</a>.' +
|
246
|
+
'</span>' ).insertBefore( editor.element );
|
247
|
+
}
|
248
|
+
|
249
|
+
swfobject.embedSWF(
|
250
|
+
'assets/outputforflash/outputforflash.swf',
|
251
|
+
'ckFlashContainer',
|
252
|
+
'550',
|
253
|
+
'400',
|
254
|
+
'8',
|
255
|
+
{ wmode: 'transparent' }
|
256
|
+
);
|
257
|
+
});
|
258
|
+
|
259
|
+
</script>
|
260
|
+
<p>
|
261
|
+
<input type="button" value="Send to Flash" onclick="sendToFlash();">
|
262
|
+
</p>
|
263
|
+
</td>
|
264
|
+
<td style="vertical-align: top; padding-left: 20px">
|
265
|
+
<div id="ckFlashContainer"></div>
|
266
|
+
</td>
|
267
|
+
</tr>
|
268
|
+
</table>
|
269
|
+
<div id="footer">
|
270
|
+
<hr>
|
271
|
+
<p>
|
272
|
+
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
273
|
+
</p>
|
274
|
+
<p id="copy">
|
275
|
+
Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
276
|
+
Knabben. All rights reserved.
|
277
|
+
</p>
|
278
|
+
</div>
|
279
|
+
</body>
|
280
|
+
</html>
|
@@ -0,0 +1,221 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<!--
|
3
|
+
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
4
|
+
For licensing, see LICENSE.md or http://ckeditor.com/license
|
5
|
+
-->
|
6
|
+
<html>
|
7
|
+
<head>
|
8
|
+
<title>HTML Compliant Output — CKEditor Sample</title>
|
9
|
+
<meta charset="utf-8">
|
10
|
+
<script src="../../../ckeditor.js"></script>
|
11
|
+
<script src="../../../samples/sample.js"></script>
|
12
|
+
<link href="../../../samples/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/index.html">CKEditor Samples</a> » Producing HTML Compliant Output
|
21
|
+
</h1>
|
22
|
+
<div class="description">
|
23
|
+
<p>
|
24
|
+
This sample shows how to configure CKEditor to output valid
|
25
|
+
<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
|
26
|
+
Traditional HTML elements like <code><b></code>,
|
27
|
+
<code><i></code>, and <code><font></code> are used in place of
|
28
|
+
<code><strong></code>, <code><em></code>, and CSS styles.
|
29
|
+
</p>
|
30
|
+
<p>
|
31
|
+
To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
|
32
|
+
JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
|
33
|
+
</p>
|
34
|
+
<p>
|
35
|
+
A snippet of the configuration code can be seen below; check the source of this page for
|
36
|
+
full definition:
|
37
|
+
</p>
|
38
|
+
<pre class="samples">
|
39
|
+
CKEDITOR.replace( '<em>textarea_id</em>', {
|
40
|
+
coreStyles_bold: { element: 'b' },
|
41
|
+
coreStyles_italic: { element: 'i' },
|
42
|
+
|
43
|
+
fontSize_style: {
|
44
|
+
element: 'font',
|
45
|
+
attributes: { 'size': '#(size)' }
|
46
|
+
}
|
47
|
+
|
48
|
+
...
|
49
|
+
});</pre>
|
50
|
+
</div>
|
51
|
+
<form action="../../../samples/sample_posteddata.php" method="post">
|
52
|
+
<p>
|
53
|
+
<label for="editor1">
|
54
|
+
Editor 1:
|
55
|
+
</label>
|
56
|
+
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
57
|
+
<script>
|
58
|
+
|
59
|
+
CKEDITOR.replace( 'editor1', {
|
60
|
+
/*
|
61
|
+
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
|
62
|
+
*/
|
63
|
+
extraPlugins: 'htmlwriter',
|
64
|
+
|
65
|
+
/*
|
66
|
+
* Style sheet for the contents
|
67
|
+
*/
|
68
|
+
contentsCss: 'body {color:#000; background-color#:FFF;}',
|
69
|
+
|
70
|
+
/*
|
71
|
+
* Simple HTML5 doctype
|
72
|
+
*/
|
73
|
+
docType: '<!DOCTYPE HTML>',
|
74
|
+
|
75
|
+
/*
|
76
|
+
* Allowed content rules which beside limiting allowed HTML
|
77
|
+
* will also take care of transforming styles to attributes
|
78
|
+
* (currently only for img - see transformation rules defined below).
|
79
|
+
*
|
80
|
+
* Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
|
81
|
+
*/
|
82
|
+
allowedContent:
|
83
|
+
'h1 h2 h3 p pre[align]; ' +
|
84
|
+
'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
|
85
|
+
'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',
|
86
|
+
|
87
|
+
/*
|
88
|
+
* Core styles.
|
89
|
+
*/
|
90
|
+
coreStyles_bold: { element: 'b' },
|
91
|
+
coreStyles_italic: { element: 'i' },
|
92
|
+
coreStyles_underline: { element: 'u' },
|
93
|
+
coreStyles_strike: { element: 'strike' },
|
94
|
+
|
95
|
+
/*
|
96
|
+
* Font face.
|
97
|
+
*/
|
98
|
+
|
99
|
+
// Define the way font elements will be applied to the document.
|
100
|
+
// The "font" element will be used.
|
101
|
+
font_style: {
|
102
|
+
element: 'font',
|
103
|
+
attributes: { 'face': '#(family)' }
|
104
|
+
},
|
105
|
+
|
106
|
+
/*
|
107
|
+
* Font sizes.
|
108
|
+
*/
|
109
|
+
fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
|
110
|
+
fontSize_style: {
|
111
|
+
element: 'font',
|
112
|
+
attributes: { 'size': '#(size)' }
|
113
|
+
},
|
114
|
+
|
115
|
+
/*
|
116
|
+
* Font colors.
|
117
|
+
*/
|
118
|
+
|
119
|
+
colorButton_foreStyle: {
|
120
|
+
element: 'font',
|
121
|
+
attributes: { 'color': '#(color)' }
|
122
|
+
},
|
123
|
+
|
124
|
+
colorButton_backStyle: {
|
125
|
+
element: 'font',
|
126
|
+
styles: { 'background-color': '#(color)' }
|
127
|
+
},
|
128
|
+
|
129
|
+
/*
|
130
|
+
* Styles combo.
|
131
|
+
*/
|
132
|
+
stylesSet: [
|
133
|
+
{ name: 'Computer Code', element: 'code' },
|
134
|
+
{ name: 'Keyboard Phrase', element: 'kbd' },
|
135
|
+
{ name: 'Sample Text', element: 'samp' },
|
136
|
+
{ name: 'Variable', element: 'var' },
|
137
|
+
{ name: 'Deleted Text', element: 'del' },
|
138
|
+
{ name: 'Inserted Text', element: 'ins' },
|
139
|
+
{ name: 'Cited Work', element: 'cite' },
|
140
|
+
{ name: 'Inline Quotation', element: 'q' }
|
141
|
+
],
|
142
|
+
|
143
|
+
on: {
|
144
|
+
pluginsLoaded: configureTransformations,
|
145
|
+
loaded: configureHtmlWriter
|
146
|
+
}
|
147
|
+
});
|
148
|
+
|
149
|
+
/*
|
150
|
+
* Add missing content transformations.
|
151
|
+
*/
|
152
|
+
function configureTransformations( evt ) {
|
153
|
+
var editor = evt.editor;
|
154
|
+
|
155
|
+
editor.dataProcessor.htmlFilter.addRules( {
|
156
|
+
attributes: {
|
157
|
+
style: function( value, element ) {
|
158
|
+
// Return #RGB for background and border colors
|
159
|
+
return CKEDITOR.tools.convertRgbToHex( value );
|
160
|
+
}
|
161
|
+
}
|
162
|
+
} );
|
163
|
+
|
164
|
+
// Default automatic content transformations do not yet take care of
|
165
|
+
// align attributes on blocks, so we need to add our own transformation rules.
|
166
|
+
function alignToAttribute( element ) {
|
167
|
+
if ( element.styles[ 'text-align' ] ) {
|
168
|
+
element.attributes.align = element.styles[ 'text-align' ];
|
169
|
+
delete element.styles[ 'text-align' ];
|
170
|
+
}
|
171
|
+
}
|
172
|
+
editor.filter.addTransformations( [
|
173
|
+
[ { element: 'p', right: alignToAttribute } ],
|
174
|
+
[ { element: 'h1', right: alignToAttribute } ],
|
175
|
+
[ { element: 'h2', right: alignToAttribute } ],
|
176
|
+
[ { element: 'h3', right: alignToAttribute } ],
|
177
|
+
[ { element: 'pre', right: alignToAttribute } ]
|
178
|
+
] );
|
179
|
+
}
|
180
|
+
|
181
|
+
/*
|
182
|
+
* Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
|
183
|
+
*/
|
184
|
+
function configureHtmlWriter( evt ) {
|
185
|
+
var editor = evt.editor,
|
186
|
+
dataProcessor = editor.dataProcessor;
|
187
|
+
|
188
|
+
// Out self closing tags the HTML4 way, like <br>.
|
189
|
+
dataProcessor.writer.selfClosingEnd = '>';
|
190
|
+
|
191
|
+
// Make output formatting behave similar to FCKeditor.
|
192
|
+
var dtd = CKEDITOR.dtd;
|
193
|
+
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
|
194
|
+
dataProcessor.writer.setRules( e, {
|
195
|
+
indent: true,
|
196
|
+
breakBeforeOpen: true,
|
197
|
+
breakAfterOpen: false,
|
198
|
+
breakBeforeClose: !dtd[ e ][ '#' ],
|
199
|
+
breakAfterClose: true
|
200
|
+
});
|
201
|
+
}
|
202
|
+
}
|
203
|
+
|
204
|
+
</script>
|
205
|
+
</p>
|
206
|
+
<p>
|
207
|
+
<input type="submit" value="Submit">
|
208
|
+
</p>
|
209
|
+
</form>
|
210
|
+
<div id="footer">
|
211
|
+
<hr>
|
212
|
+
<p>
|
213
|
+
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
214
|
+
</p>
|
215
|
+
<p id="copy">
|
216
|
+
Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
217
|
+
Knabben. All rights reserved.
|
218
|
+
</p>
|
219
|
+
</div>
|
220
|
+
</body>
|
221
|
+
</html>
|