Wavyzz/dolibarr-fork
2
0
Fork 0
forked from Wavyzz/dolibarr
Code Pull Requests Activity

New: Update ckeditor to version 4 (part 1)

Browse Source
This commit is contained in:
Laurent Destailleur
2014-03-08 12:11:01 +01:00
parent 32c81588b0
commit c65d681d87
4418 changed files with 147049 additions and 127332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

678
htdocs/includes/ckeditor/_source/plugins/htmlwriter/plugin.js
View File

@@ -1,319 +1,359 @@
/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.plugins.add( 'htmlwriter' );
/**
* Class used to write HTML data.
* @constructor
* @example
* var writer = new CKEDITOR.htmlWriter();
* writer.openTag( 'p' );
* writer.attribute( 'class', 'MyClass' );
* writer.openTagClose( 'p' );
* writer.text( 'Hello' );
* writer.closeTag( 'p' );
* alert( writer.getHtml() ); "<p class="MyClass">Hello</p>"
*/
CKEDITOR.htmlWriter = CKEDITOR.tools.createClass(
{
base : CKEDITOR.htmlParser.basicWriter,
$ : function()
{
// Call the base contructor.
this.base();
/**
* The characters to be used for each identation step.
* @type String
* @default "\t" (tab)
* @example
* // Use two spaces for indentation.
* editorInstance.dataProcessor.writer.indentationChars = ' ';
*/
this.indentationChars = '\t';
/**
* The characters to be used to close "self-closing" elements, like "br" or
* "img".
* @type String
* @default " />"
* @example
* // Use HTML4 notation for self-closing elements.
* editorInstance.dataProcessor.writer.selfClosingEnd = '>';
*/
this.selfClosingEnd = ' />';
/**
* The characters to be used for line breaks.
* @type String
* @default "\n" (LF)
* @example
* // Use CRLF for line breaks.
* editorInstance.dataProcessor.writer.lineBreakChars = '\r\n';
*/
this.lineBreakChars = '\n';
this.forceSimpleAmpersand = 0;
this.sortAttributes = 1;
this._.indent = 0;
this._.indentation = '';
// Indicate preformatted block context status. (#5789)
this._.inPre = 0;
this._.rules = {};
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
{
this.setRules( e,
{
indent : 1,
breakBeforeOpen : 1,
breakAfterOpen : 1,
breakBeforeClose : !dtd[ e ][ '#' ],
breakAfterClose : 1
});
}
this.setRules( 'br',
{
breakAfterOpen : 1
});
this.setRules( 'title',
{
indent : 0,
breakAfterOpen : 0
});
this.setRules( 'style',
{
indent : 0,
breakBeforeClose : 1
});
// Disable indentation on <pre>.
this.setRules( 'pre',
{
indent : 0
});
},
proto :
{
/**
* Writes the tag opening part for a opener tag.
* @param {String} tagName The element name for this tag.
* @param {Object} attributes The attributes defined for this tag. The
* attributes could be used to inspect the tag.
* @example
* // Writes "&lt;p".
* writer.openTag( 'p', { class : 'MyClass', id : 'MyId' } );
*/
openTag : function( tagName, attributes )
{
var rules = this._.rules[ tagName ];
if ( this._.indent )
this.indentation();
// Do not break if indenting.
else if ( rules && rules.breakBeforeOpen )
{
this.lineBreak();
this.indentation();
}
this._.output.push( '<', tagName );
},
/**
* Writes the tag closing part for a opener tag.
* @param {String} tagName The element name for this tag.
* @param {Boolean} isSelfClose Indicates that this is a self-closing tag,
* like "br" or "img".
* @example
* // Writes "&gt;".
* writer.openTagClose( 'p', false );
* @example
* // Writes " /&gt;".
* writer.openTagClose( 'br', true );
*/
openTagClose : function( tagName, isSelfClose )
{
var rules = this._.rules[ tagName ];
if ( isSelfClose )
this._.output.push( this.selfClosingEnd );
else
{
this._.output.push( '>' );
if ( rules && rules.indent )
this._.indentation += this.indentationChars;
}
if ( rules && rules.breakAfterOpen )
this.lineBreak();
tagName == 'pre' && ( this._.inPre = 1 );
},
/**
* Writes an attribute. This function should be called after opening the
* tag with {@link #openTagClose}.
* @param {String} attName The attribute name.
* @param {String} attValue The attribute value.
* @example
* // Writes ' class="MyClass"'.
* writer.attribute( 'class', 'MyClass' );
*/
attribute : function( attName, attValue )
{
if ( typeof attValue == 'string' )
{
this.forceSimpleAmpersand && ( attValue = attValue.replace( /&amp;/g, '&' ) );
// Browsers don't always escape special character in attribute values. (#4683, #4719).
attValue = CKEDITOR.tools.htmlEncodeAttr( attValue );
}
this._.output.push( ' ', attName, '="', attValue, '"' );
},
/**
* Writes a closer tag.
* @param {String} tagName The element name for this tag.
* @example
* // Writes "&lt;/p&gt;".
* writer.closeTag( 'p' );
*/
closeTag : function( tagName )
{
var rules = this._.rules[ tagName ];
if ( rules && rules.indent )
this._.indentation = this._.indentation.substr( this.indentationChars.length );
if ( this._.indent )
this.indentation();
// Do not break if indenting.
else if ( rules && rules.breakBeforeClose )
{
this.lineBreak();
this.indentation();
}
this._.output.push( '</', tagName, '>' );
tagName == 'pre' && ( this._.inPre = 0 );
if ( rules && rules.breakAfterClose )
this.lineBreak();
},
/**
* Writes text.
* @param {String} text The text value
* @example
* // Writes "Hello Word".
* writer.text( 'Hello Word' );
*/
text : function( text )
{
if ( this._.indent )
{
this.indentation();
!this._.inPre && ( text = CKEDITOR.tools.ltrim( text ) );
}
this._.output.push( text );
},
/**
* Writes a comment.
* @param {String} comment The comment text.
* @example
* // Writes "&lt;!-- My comment --&gt;".
* writer.comment( ' My comment ' );
*/
comment : function( comment )
{
if ( this._.indent )
this.indentation();
this._.output.push( '<!--', comment, '-->' );
},
/**
* Writes a line break. It uses the {@link #lineBreakChars} property for it.
* @example
* // Writes "\n" (e.g.).
* writer.lineBreak();
*/
lineBreak : function()
{
if ( !this._.inPre && this._.output.length > 0 )
this._.output.push( this.lineBreakChars );
this._.indent = 1;
},
/**
* Writes the current indentation chars. It uses the
* {@link #indentationChars} property, repeating it for the current
* indentation steps.
* @example
* // Writes "\t" (e.g.).
* writer.indentation();
*/
indentation : function()
{
if( !this._.inPre )
this._.output.push( this._.indentation );
this._.indent = 0;
},
/**
* Sets formatting rules for a give element. The possible rules are:
* <ul>
* <li><b>indent</b>: indent the element contents.</li>
* <li><b>breakBeforeOpen</b>: break line before the opener tag for this element.</li>
* <li><b>breakAfterOpen</b>: break line after the opener tag for this element.</li>
* <li><b>breakBeforeClose</b>: break line before the closer tag for this element.</li>
* <li><b>breakAfterClose</b>: break line after the closer tag for this element.</li>
* </ul>
*
* All rules default to "false". Each call to the function overrides
* already present rules, leaving the undefined untouched.
*
* By default, all elements available in the {@link CKEDITOR.dtd.$block),
* {@link CKEDITOR.dtd.$listItem} and {@link CKEDITOR.dtd.$tableContent}
* lists have all the above rules set to "true". Additionaly, the "br"
* element has the "breakAfterOpen" set to "true".
* @param {String} tagName The element name to which set the rules.
* @param {Object} rules An object containing the element rules.
* @example
* // Break line before and after "img" tags.
* writer.setRules( 'img',
* {
* breakBeforeOpen : true
* breakAfterOpen : true
* });
* @example
* // Reset the rules for the "h1" tag.
* writer.setRules( 'h1', {} );
*/
setRules : function( tagName, rules )
{
var currentRules = this._.rules[ tagName ];
if ( currentRules )
CKEDITOR.tools.extend( currentRules, rules, true );
else
this._.rules[ tagName ] = rules;
}
}
});
/**
* @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.plugins.add( 'htmlwriter', {
init: function( editor ) {
var writer = new CKEDITOR.htmlWriter();
writer.forceSimpleAmpersand = editor.config.forceSimpleAmpersand;
writer.indentationChars = editor.config.dataIndentationChars || '\t';
// Overwrite default basicWriter initialized in hmtlDataProcessor constructor.
editor.dataProcessor.writer = writer;
}
} );
/**
* Class used to write HTML data.
*
* var writer = new CKEDITOR.htmlWriter();
* writer.openTag( 'p' );
* writer.attribute( 'class', 'MyClass' );
* writer.openTagClose( 'p' );
* writer.text( 'Hello' );
* writer.closeTag( 'p' );
* alert( writer.getHtml() ); // '<p class="MyClass">Hello</p>'
*
* @class
* @extends CKEDITOR.htmlParser.basicWriter
*/
CKEDITOR.htmlWriter = CKEDITOR.tools.createClass( {
base: CKEDITOR.htmlParser.basicWriter,
/**
* Creates a htmlWriter class instance.
*
* @constructor
*/
$: function() {
// Call the base contructor.
this.base();
/**
* The characters to be used for each identation step.
*
* // Use tab for indentation.
* editorInstance.dataProcessor.writer.indentationChars = '\t';
*/
this.indentationChars = '\t';
/**
* The characters to be used to close "self-closing" elements, like `<br>` or `<img>`.
*
* // Use HTML4 notation for self-closing elements.
* editorInstance.dataProcessor.writer.selfClosingEnd = '>';
*/
this.selfClosingEnd = ' />';
/**
* The characters to be used for line breaks.
*
* // Use CRLF for line breaks.
* editorInstance.dataProcessor.writer.lineBreakChars = '\r\n';
*/
this.lineBreakChars = '\n';
this.sortAttributes = 1;
this._.indent = 0;
this._.indentation = '';
// Indicate preformatted block context status. (#5789)
this._.inPre = 0;
this._.rules = {};
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
this.setRules( e, {
indent: !dtd[ e ][ '#' ],
breakBeforeOpen: 1,
breakBeforeClose: !dtd[ e ][ '#' ],
breakAfterClose: 1,
needsSpace: ( e in dtd.$block ) && !( e in { li: 1, dt: 1, dd: 1 } )
} );
}
this.setRules( 'br', { breakAfterOpen: 1 } );
this.setRules( 'title', {
indent: 0,
breakAfterOpen: 0
} );
this.setRules( 'style', {
indent: 0,
breakBeforeClose: 1
} );
this.setRules( 'pre', {
breakAfterOpen: 1, // Keep line break after the opening tag
indent: 0 // Disable indentation on <pre>.
} );
},
proto: {
/**
* Writes the tag opening part for a opener tag.
*
* // Writes '<p'.
* writer.openTag( 'p', { class : 'MyClass', id : 'MyId' } );
*
* @param {String} tagName The element name for this tag.
* @param {Object} attributes The attributes defined for this tag. The
* attributes could be used to inspect the tag.
*/
openTag: function( tagName, attributes ) {
var rules = this._.rules[ tagName ];
if ( this._.afterCloser && rules && rules.needsSpace && this._.needsSpace )
this._.output.push( '\n' );
if ( this._.indent )
this.indentation();
// Do not break if indenting.
else if ( rules && rules.breakBeforeOpen ) {
this.lineBreak();
this.indentation();
}
this._.output.push( '<', tagName );
this._.afterCloser = 0;
},
/**
* Writes the tag closing part for a opener tag.
*
* // Writes '>'.
* writer.openTagClose( 'p', false );
*
* // Writes ' />'.
* writer.openTagClose( 'br', true );
*
* @param {String} tagName The element name for this tag.
* @param {Boolean} isSelfClose Indicates that this is a self-closing tag,
* like `<br>` or `<img>`.
*/
openTagClose: function( tagName, isSelfClose ) {
var rules = this._.rules[ tagName ];
if ( isSelfClose ) {
this._.output.push( this.selfClosingEnd );
if ( rules && rules.breakAfterClose )
this._.needsSpace = rules.needsSpace;
} else {
this._.output.push( '>' );
if ( rules && rules.indent )
this._.indentation += this.indentationChars;
}
if ( rules && rules.breakAfterOpen )
this.lineBreak();
tagName == 'pre' && ( this._.inPre = 1 );
},
/**
* Writes an attribute. This function should be called after opening the
* tag with {@link #openTagClose}.
*
* // Writes ' class="MyClass"'.
* writer.attribute( 'class', 'MyClass' );
*
* @param {String} attName The attribute name.
* @param {String} attValue The attribute value.
*/
attribute: function( attName, attValue ) {
if ( typeof attValue == 'string' ) {
this.forceSimpleAmpersand && ( attValue = attValue.replace( /&amp;/g, '&' ) );
// Browsers don't always escape special character in attribute values. (#4683, #4719).
attValue = CKEDITOR.tools.htmlEncodeAttr( attValue );
}
this._.output.push( ' ', attName, '="', attValue, '"' );
},
/**
* Writes a closer tag.
*
* // Writes '</p>'.
* writer.closeTag( 'p' );
*
* @param {String} tagName The element name for this tag.
*/
closeTag: function( tagName ) {
var rules = this._.rules[ tagName ];
if ( rules && rules.indent )
this._.indentation = this._.indentation.substr( this.indentationChars.length );
if ( this._.indent )
this.indentation();
// Do not break if indenting.
else if ( rules && rules.breakBeforeClose ) {
this.lineBreak();
this.indentation();
}
this._.output.push( '</', tagName, '>' );
tagName == 'pre' && ( this._.inPre = 0 );
if ( rules && rules.breakAfterClose ) {
this.lineBreak();
this._.needsSpace = rules.needsSpace;
}
this._.afterCloser = 1;
},
/**
* Writes text.
*
* // Writes 'Hello Word'.
* writer.text( 'Hello Word' );
*
* @param {String} text The text value
*/
text: function( text ) {
if ( this._.indent ) {
this.indentation();
!this._.inPre && ( text = CKEDITOR.tools.ltrim( text ) );
}
this._.output.push( text );
},
/**
* Writes a comment.
*
* // Writes "<!-- My comment -->".
* writer.comment( ' My comment ' );
*
* @param {String} comment The comment text.
*/
comment: function( comment ) {
if ( this._.indent )
this.indentation();
this._.output.push( '<!--', comment, '-->' );
},
/**
* Writes a line break. It uses the {@link #lineBreakChars} property for it.
*
* // Writes '\n' (e.g.).
* writer.lineBreak();
*/
lineBreak: function() {
if ( !this._.inPre && this._.output.length > 0 )
this._.output.push( this.lineBreakChars );
this._.indent = 1;
},
/**
* Writes the current indentation chars. It uses the {@link #indentationChars}
* property, repeating it for the current indentation steps.
*
* // Writes '\t' (e.g.).
* writer.indentation();
*/
indentation: function() {
if ( !this._.inPre && this._.indentation )
this._.output.push( this._.indentation );
this._.indent = 0;
},
/**
* Empties the current output buffer. It also brings back the default
* values of the writer flags.
*
* writer.reset();
*/
reset: function() {
this._.output = [];
this._.indent = 0;
this._.indentation = '';
this._.afterCloser = 0;
this._.inPre = 0;
},
/**
* Sets formatting rules for a give element. The possible rules are:
*
* * `indent`: indent the element contents.
* * `breakBeforeOpen`: break line before the opener tag for this element.
* * `breakAfterOpen`: break line after the opener tag for this element.
* * `breakBeforeClose`: break line before the closer tag for this element.
* * `breakAfterClose`: break line after the closer tag for this element.
*
* All rules default to `false`. Each call to the function overrides
* already present rules, leaving the undefined untouched.
*
* By default, all elements available in the {@link CKEDITOR.dtd#$block},
* {@link CKEDITOR.dtd#$listItem} and {@link CKEDITOR.dtd#$tableContent}
* lists have all the above rules set to `true`. Additionaly, the `<br>`
* element has the `breakAfterOpen` set to `true`.
*
* // Break line before and after "img" tags.
* writer.setRules( 'img', {
* breakBeforeOpen: true
* breakAfterOpen: true
* } );
*
* // Reset the rules for the "h1" tag.
* writer.setRules( 'h1', {} );
*
* @param {String} tagName The element name to which set the rules.
* @param {Object} rules An object containing the element rules.
*/
setRules: function( tagName, rules ) {
var currentRules = this._.rules[ tagName ];
if ( currentRules )
CKEDITOR.tools.extend( currentRules, rules, true );
else
this._.rules[ tagName ] = rules;
}
}
} );
/**
* Whether to force using `'&'` instead of `'&amp;'` in elements attributes
* values, it's not recommended to change this setting for compliance with the
* W3C XHTML 1.0 standards ([C.12, XHTML 1.0](http://www.w3.org/TR/xhtml1/#C_12)).
*
* // Use `'&'` instead of `'&amp;'`
* CKEDITOR.config.forceSimpleAmpersand = true;
*
* @cfg {Boolean} [forceSimpleAmpersand=false]
* @member CKEDITOR.config
*/
/**
* The characters to be used for indenting the HTML produced by the editor.
* Using characters different than `' '` (space) and `'\t'` (tab) is definitely
* a bad idea as it'll mess the code.
*
* // No indentation.
* CKEDITOR.config.dataIndentationChars = '';
*
* // Use two spaces for indentation.
* CKEDITOR.config.dataIndentationChars = ' ';
*
* @cfg {String} [dataIndentationChars='\t']
* @member CKEDITOR.config
*/

BIN
htdocs/includes/ckeditor/_source/plugins/htmlwriter/samples/assets/outputforflash/outputforflash.fla Normal file
View File

Binary file not shown.

BIN
htdocs/includes/ckeditor/_source/plugins/htmlwriter/samples/assets/outputforflash/outputforflash.swf Normal file
View File

Binary file not shown.

5
htdocs/includes/ckeditor/_source/plugins/htmlwriter/samples/assets/outputforflash/swfobject.js Normal file
View File

File diff suppressed because one or more lines are too long

280
htdocs/includes/ckeditor/_source/plugins/htmlwriter/samples/outputforflash.html Normal file
View File

@@ -0,0 +1,280 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Output for Flash &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<script src="../../../samples/sample.js"></script>
<script src="assets/outputforflash/swfobject.js"></script>
<link href="../../../samples/sample.css" rel="stylesheet">
<meta name="ckeditor-sample-required-plugins" content="sourcearea">
<meta name="ckeditor-sample-name" content="Output for Flash">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce HTML code that can be used with Adobe Flash.">
<style>
.alert
{
background: #ffa84c;
padding: 10px 15px;
font-weight: bold;
display: block;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Producing Flash Compliant HTML Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output
HTML code that can be used with
<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">
Adobe Flash</a>.
The code will contain a subset of standard HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;p&gt;</code> as well as HTML attributes.
</p>
<p>
To add a CKEditor instance outputting Flash compliant HTML code, load the editor using a standard
JavaScript call, and define CKEditor features to use HTML elements and attributes.
</p>
<p>
For details on how to create this setup check the source code of this sample page.
</p>
</div>
<p>
To see how it works, create some content in the editing area of CKEditor on the left
and send it to the Flash object on the right side of the page by using the
<strong>Send to Flash</strong> button.
</p>
<table style="width: 100%; border-spacing: 0; border-collapse:collapse;">
<tr>
<td style="width: 100%">
<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>
<script>
if ( document.location.protocol == 'file:' )
alert( 'Warning: This samples does not work when loaded from local filesystem' +
'due to security restrictions implemented in Flash.' +
'\n\nPlease load the sample from a web server instead.' );
var editor = CKEDITOR.replace( 'editor1', {
/*
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
*/
extraPlugins: 'htmlwriter',
height: 290,
width: '100%',
toolbar: [
[ 'Source', '-', 'Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
'/',
[ 'Font', 'FontSize' ],
[ 'TextColor', '-', 'About' ]
],
/*
* Style sheet for the contents
*/
contentsCss: 'body {color:#000; background-color#FFF; font-family: Arial; font-size:80%;} p, ol, ul {margin-top: 0px; margin-bottom: 0px;}',
/*
* Quirks doctype
*/
docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">',
/*
* Core styles.
*/
coreStyles_bold: { element: 'b' },
coreStyles_italic: { element: 'i' },
coreStyles_underline: { element: 'u' },
/*
* Font face.
*/
// Define the way font elements will be applied to the document. The "font"
// element will be used.
font_style: {
element: 'font',
attributes: { 'face': '#(family)' }
},
/*
* Font sizes.
*/
// The CSS part of the font sizes isn't used by Flash, it is there to get the
// font rendered correctly in CKEditor.
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',
fontSize_style: {
element: 'font',
attributes: { 'size': '#(size)' },
styles: { 'font-size': '#(size)px' }
} ,
/*
* Font colors.
*/
colorButton_enableMore: true,
colorButton_foreStyle: {
element: 'font',
attributes: { 'color': '#(color)' }
},
colorButton_backStyle: {
element: 'font',
styles: { 'background-color': '#(color)' }
},
on: { 'instanceReady': configureFlashOutput }
});
/*
* Adjust the behavior of the dataProcessor to match the
* requirements of Flash
*/
function configureFlashOutput( ev ) {
var editor = ev.editor,
dataProcessor = editor.dataProcessor,
htmlFilter = dataProcessor && dataProcessor.htmlFilter;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting match Flash expectations
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
dataProcessor.writer.setRules( e, {
indent: false,
breakBeforeOpen: false,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: false
});
}
dataProcessor.writer.setRules( 'br', {
indent: false,
breakBeforeOpen: false,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: false
});
// Output properties as attributes, not styles.
htmlFilter.addRules( {
elements: {
$: function( element ) {
var style, match, width, height, align;
// Output dimensions of images as width and height
if ( element.name == 'img' ) {
style = element.attributes.style;
if ( style ) {
// Get the width from the style.
match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style );
width = match && match[1];
// Get the height from the style.
match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );
height = match && match[1];
if ( width ) {
element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
element.attributes.width = width;
}
if ( height ) {
element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
element.attributes.height = height;
}
}
}
// Output alignment of paragraphs using align
if ( element.name == 'p' ) {
style = element.attributes.style;
if ( style ) {
// Get the align from the style.
match = ( /(?:^|\s)text-align\s*:\s*(\w*);?/i ).exec( style );
align = match && match[1];
if ( align ) {
element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
element.attributes.align = align;
}
}
}
if ( element.attributes.style === '' )
delete element.attributes.style;
return element;
}
}
});
}
function sendToFlash() {
var html = CKEDITOR.instances.editor1.getData() ;
// Quick fix for link color.
html = html.replace( /<a /g, '<font color="#0000FF"><u><a ' )
html = html.replace( /<\/a>/g, '</a></u></font>' )
var flash = document.getElementById( 'ckFlashContainer' ) ;
flash.setData( html ) ;
}
CKEDITOR.domReady( function() {
if ( !swfobject.hasFlashPlayerVersion( '8' ) ) {
CKEDITOR.dom.element.createFromHtml( '<span class="alert">' +
'At least Adobe Flash Player 8 is required to run this sample. ' +
'You can download it from <a href="http://get.adobe.com/flashplayer">Adobe\'s website</a>.' +
'</span>' ).insertBefore( editor.element );
}
swfobject.embedSWF(
'assets/outputforflash/outputforflash.swf',
'ckFlashContainer',
'550',
'400',
'8',
{ wmode: 'transparent' }
);
});
</script>
<p>
<input type="button" value="Send to Flash" onclick="sendToFlash();">
</p>
</td>
<td style="vertical-align: top; padding-left: 20px">
<div id="ckFlashContainer"></div>
</td>
</tr>
</table>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>

221
htdocs/includes/ckeditor/_source/plugins/htmlwriter/samples/outputhtml.html Normal file
View File

@@ -0,0 +1,221 @@
<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>HTML Compliant Output &mdash; CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<script src="../../../samples/sample.js"></script>
<link href="../../../samples/sample.css" rel="stylesheet">
<meta name="ckeditor-sample-required-plugins" content="sourcearea">
<meta name="ckeditor-sample-name" content="Output HTML">
<meta name="ckeditor-sample-group" content="Advanced Samples">
<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">
</head>
<body>
<h1 class="samples">
<a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Producing HTML Compliant Output
</h1>
<div class="description">
<p>
This sample shows how to configure CKEditor to output valid
<a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
Traditional HTML elements like <code>&lt;b&gt;</code>,
<code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.
</p>
<p>
To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
</p>
<p>
A snippet of the configuration code can be seen below; check the source of this page for
full definition:
</p>
<pre class="samples">
CKEDITOR.replace( '<em>textarea_id</em>', {
coreStyles_bold: { element: 'b' },
coreStyles_italic: { element: 'i' },
fontSize_style: {
element: 'font',
attributes: { 'size': '#(size)' }
}
...
});</pre>
</div>
<form action="../../../samples/sample_posteddata.php" method="post">
<p>
<label for="editor1">
Editor 1:
</label>
<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>
<script>
CKEDITOR.replace( 'editor1', {
/*
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
*/
extraPlugins: 'htmlwriter',
/*
* Style sheet for the contents
*/
contentsCss: 'body {color:#000; background-color#:FFF;}',
/*
* Simple HTML5 doctype
*/
docType: '<!DOCTYPE HTML>',
/*
* Allowed content rules which beside limiting allowed HTML
* will also take care of transforming styles to attributes
* (currently only for img - see transformation rules defined below).
*
* Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
*/
allowedContent:
'h1 h2 h3 p pre[align]; ' +
'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',
/*
* Core styles.
*/
coreStyles_bold: { element: 'b' },
coreStyles_italic: { element: 'i' },
coreStyles_underline: { element: 'u' },
coreStyles_strike: { element: 'strike' },
/*
* Font face.
*/
// Define the way font elements will be applied to the document.
// The "font" element will be used.
font_style: {
element: 'font',
attributes: { 'face': '#(family)' }
},
/*
* Font sizes.
*/
fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
fontSize_style: {
element: 'font',
attributes: { 'size': '#(size)' }
},
/*
* Font colors.
*/
colorButton_foreStyle: {
element: 'font',
attributes: { 'color': '#(color)' }
},
colorButton_backStyle: {
element: 'font',
styles: { 'background-color': '#(color)' }
},
/*
* Styles combo.
*/
stylesSet: [
{ name: 'Computer Code', element: 'code' },
{ name: 'Keyboard Phrase', element: 'kbd' },
{ name: 'Sample Text', element: 'samp' },
{ name: 'Variable', element: 'var' },
{ name: 'Deleted Text', element: 'del' },
{ name: 'Inserted Text', element: 'ins' },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' }
],
on: {
pluginsLoaded: configureTransformations,
loaded: configureHtmlWriter
}
});
/*
* Add missing content transformations.
*/
function configureTransformations( evt ) {
var editor = evt.editor;
editor.dataProcessor.htmlFilter.addRules( {
attributes: {
style: function( value, element ) {
// Return #RGB for background and border colors
return CKEDITOR.tools.convertRgbToHex( value );
}
}
} );
// Default automatic content transformations do not yet take care of
// align attributes on blocks, so we need to add our own transformation rules.
function alignToAttribute( element ) {
if ( element.styles[ 'text-align' ] ) {
element.attributes.align = element.styles[ 'text-align' ];
delete element.styles[ 'text-align' ];
}
}
editor.filter.addTransformations( [
[ { element: 'p', right: alignToAttribute } ],
[ { element: 'h1', right: alignToAttribute } ],
[ { element: 'h2', right: alignToAttribute } ],
[ { element: 'h3', right: alignToAttribute } ],
[ { element: 'pre', right: alignToAttribute } ]
] );
}
/*
* Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
*/
function configureHtmlWriter( evt ) {
var editor = evt.editor,
dataProcessor = editor.dataProcessor;
// Out self closing tags the HTML4 way, like <br>.
dataProcessor.writer.selfClosingEnd = '>';
// Make output formatting behave similar to FCKeditor.
var dtd = CKEDITOR.dtd;
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
dataProcessor.writer.setRules( e, {
indent: true,
breakBeforeOpen: true,
breakAfterOpen: false,
breakBeforeClose: !dtd[ e ][ '#' ],
breakAfterClose: true
});
}
}
</script>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
Knabben. All rights reserved.
</p>
</div>
</body>
</html>