/** * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */ ( function() { /** * Represents an HTML data processor, which is responsible for translating and * transforming the editor data on input and output. * * @class * @extends CKEDITOR.dataProcessor * @constructor Creates an htmlDataProcessor class instance. * @param {CKEDITOR.editor} editor */ CKEDITOR.htmlDataProcessor = function( editor ) { var dataFilter, htmlFilter, that = this; this.editor = editor; /** * Data filter used when processing input by {@link #toHtml}. * * @property {CKEDITOR.htmlParser.filter} */ this.dataFilter = dataFilter = new CKEDITOR.htmlParser.filter(); /** * HTML filter used when processing output by {@link #toDataFormat}. * * @property {CKEDITOR.htmlParser.filter} */ this.htmlFilter = htmlFilter = new CKEDITOR.htmlParser.filter(); /** * The HTML writer used by this data processor to format the output. * * @property {CKEDITOR.htmlParser.basicWriter} */ this.writer = new CKEDITOR.htmlParser.basicWriter(); dataFilter.addRules( defaultDataFilterRulesEditableOnly ); dataFilter.addRules( defaultDataFilterRulesForAll, { applyToAll: true } ); dataFilter.addRules( createBogusAndFillerRules( editor, 'data' ), { applyToAll: true } ); htmlFilter.addRules( defaultHtmlFilterRulesEditableOnly ); htmlFilter.addRules( defaultHtmlFilterRulesForAll, { applyToAll: true } ); htmlFilter.addRules( createBogusAndFillerRules( editor, 'html' ), { applyToAll: true } ); editor.on( 'toHtml', function( evt ) { var evtData = evt.data, data = evtData.dataValue, fixBodyTag; // The source data is already HTML, but we need to clean // it up and apply the filter. data = protectSource( data, editor ); // Protect content of textareas. (#9995) // Do this before protecting attributes to avoid breaking: // data = protectElements( data, protectTextareaRegex ); // Before anything, we must protect the URL attributes as the // browser may changing them when setting the innerHTML later in // the code. data = protectAttributes( data ); // Protect elements than can't be set inside a DIV. E.g. IE removes // style tags from innerHTML. (#3710) data = protectElements( data, protectElementsRegex ); // Certain elements has problem to go through DOM operation, protect // them by prefixing 'cke' namespace. (#3591) data = protectElementsNames( data ); // All none-IE browsers ignore self-closed custom elements, // protecting them into open-close. (#3591) data = protectSelfClosingElements( data ); // Compensate one leading line break after
open as browsers
// eat it up. (#5789)
data = protectPreFormatted( data );
// There are attributes which may execute JavaScript code inside fixBin.
// Encode them greedily. They will be unprotected right after getting HTML from fixBin. (#10)
data = protectInsecureAttributes( data );
var fixBin = evtData.context || editor.editable().getName(),
isPre;
// Old IEs loose formats when load html into .
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 && fixBin == 'pre' ) {
fixBin = 'div';
data = '' + data + '
';
isPre = 1;
}
// Call the browser to help us fixing a possibly invalid HTML
// structure.
var el = editor.document.createElement( fixBin );
// Add fake character to workaround IE comments bug. (#3801)
el.setHtml( 'a' + data );
data = el.getHtml().substr( 1 );
// Restore shortly protected attribute names.
data = data.replace( new RegExp( 'data-cke-' + CKEDITOR.rnd + '-', 'ig' ), '' );
isPre && ( data = data.replace( /^|<\/pre>$/gi, '' ) );
// Unprotect "some" of the protected elements at this point.
data = unprotectElementNames( data );
data = unprotectElements( data );
// Restore the comments that have been protected, in this way they
// can be properly filtered.
data = unprotectRealComments( data );
if ( evtData.fixForBody === false ) {
fixBodyTag = false;
} else {
fixBodyTag = getFixBodyTag( evtData.enterMode, editor.config.autoParagraph );
}
// Now use our parser to make further fixes to the structure, as
// well as apply the filter.
data = CKEDITOR.htmlParser.fragment.fromHtml( data, evtData.context, fixBodyTag );
// The empty root element needs to be fixed by adding 'p' or 'div' into it.
// This avoids the need to create that element on the first focus (#12630).
if ( fixBodyTag ) {
fixEmptyRoot( data, fixBodyTag );
}
evtData.dataValue = data;
}, null, null, 5 );
// Filter incoming "data".
// Add element filter before htmlDataProcessor.dataFilter when purifying input data to correct html.
editor.on( 'toHtml', function( evt ) {
if ( evt.data.filter.applyTo( evt.data.dataValue, true, evt.data.dontFilter, evt.data.enterMode ) )
editor.fire( 'dataFiltered' );
}, null, null, 6 );
editor.on( 'toHtml', function( evt ) {
evt.data.dataValue.filterChildren( that.dataFilter, true );
}, null, null, 10 );
editor.on( 'toHtml', function( evt ) {
var evtData = evt.data,
data = evtData.dataValue,
writer = new CKEDITOR.htmlParser.basicWriter();
data.writeChildrenHtml( writer );
data = writer.getHtml( true );
// Protect the real comments again.
evtData.dataValue = protectRealComments( data );
}, null, null, 15 );
editor.on( 'toDataFormat', function( evt ) {
var data = evt.data.dataValue;
// #10854 - we need to strip leading blockless
which FF adds
// automatically when editable contains only non-editable content.
// We do that for every browser (so it's a constant behavior) and
// not in BR mode, in which chance of valid leading blockless
is higher.
if ( evt.data.enterMode != CKEDITOR.ENTER_BR )
data = data.replace( /^
/i, '' );
evt.data.dataValue = CKEDITOR.htmlParser.fragment.fromHtml(
data, evt.data.context, getFixBodyTag( evt.data.enterMode, editor.config.autoParagraph ) );
}, null, null, 5 );
editor.on( 'toDataFormat', function( evt ) {
evt.data.dataValue.filterChildren( that.htmlFilter, true );
}, null, null, 10 );
// Transform outcoming "data".
// Add element filter after htmlDataProcessor.htmlFilter when preparing output data HTML.
editor.on( 'toDataFormat', function( evt ) {
evt.data.filter.applyTo( evt.data.dataValue, false, true );
}, null, null, 11 );
editor.on( 'toDataFormat', function( evt ) {
var data = evt.data.dataValue,
writer = that.writer;
writer.reset();
data.writeChildrenHtml( writer );
data = writer.getHtml( true );
// Restore those non-HTML protected source. (#4475,#4880)
data = unprotectRealComments( data );
data = unprotectSource( data, editor );
evt.data.dataValue = data;
}, null, null, 15 );
};
CKEDITOR.htmlDataProcessor.prototype = {
/**
* Processes the (potentially malformed) input HTML to a purified form which
* is suitable for using in the WYSIWYG editable.
*
* This method fires the {@link CKEDITOR.editor#toHtml} event which makes it possible
* to hook into the process at various stages.
*
* **Note:** Since CKEditor 4.3 the signature of this method changed and all options
* are now grouped in one `options` object. Previously `context`, `fixForBody` and `dontFilter`
* were passed separately.
*
* @param {String} data The raw data.
* @param {Object} [options] The options object.
* @param {String} [options.context] The tag name of a context element within which
* the input is to be processed, defaults to the editable element.
* If `null` is passed, then data will be parsed without context (as children of {@link CKEDITOR.htmlParser.fragment}).
* See {@link CKEDITOR.htmlParser.fragment#fromHtml} for more details.
* @param {Boolean} [options.fixForBody=true] Whether to trigger the auto paragraph for non-block content.
* @param {CKEDITOR.filter} [options.filter] When specified, instead of using the {@link CKEDITOR.editor#filter main filter},
* the passed instance will be used to filter the content.
* @param {Boolean} [options.dontFilter] Do not filter data with {@link CKEDITOR.filter} (note: transformations
* will still be applied).
* @param {Number} [options.enterMode] When specified, it will be used instead of the {@link CKEDITOR.editor#enterMode main enterMode}.
* @param {Boolean} [options.protectedWhitespaces] Indicates that content was wrapped with `` elements to preserve
* leading and trailing whitespaces. Option used by the {@link CKEDITOR.editor#method-insertHtml} method.
* @returns {String}
*/
toHtml: function( data, options, fixForBody, dontFilter ) {
var editor = this.editor,
context, filter, enterMode, protectedWhitespaces;
// Typeof null == 'object', so check truthiness of options too.
if ( options && typeof options == 'object' ) {
context = options.context;
fixForBody = options.fixForBody;
dontFilter = options.dontFilter;
filter = options.filter;
enterMode = options.enterMode;
protectedWhitespaces = options.protectedWhitespaces;
}
// Backward compatibility. Since CKEDITOR 4.3 every option was a separate argument.
else {
context = options;
}
// Fall back to the editable as context if not specified.
if ( !context && context !== null )
context = editor.editable().getName();
return editor.fire( 'toHtml', {
dataValue: data,
context: context,
fixForBody: fixForBody,
dontFilter: dontFilter,
filter: filter || editor.filter,
enterMode: enterMode || editor.enterMode,
protectedWhitespaces: protectedWhitespaces
} ).dataValue;
},
/**
* See {@link CKEDITOR.dataProcessor#toDataFormat}.
*
* This method fires the {@link CKEDITOR.editor#toDataFormat} event which makes it possible
* to hook into the process at various stages.
*
* @param {String} html
* @param {Object} [options] The options object.
* @param {String} [options.context] The tag name of the context element within which
* the input is to be processed, defaults to the editable element.
* @param {CKEDITOR.filter} [options.filter] When specified, instead of using the {@link CKEDITOR.editor#filter main filter},
* the passed instance will be used to apply content transformations to the content.
* @param {Number} [options.enterMode] When specified, it will be used instead of the {@link CKEDITOR.editor#enterMode main enterMode}.
* @returns {String}
*/
toDataFormat: function( html, options ) {
var context, filter, enterMode;
// Do not shorten this to `options && options.xxx`, because
// falsy `options` will be passed instead of undefined.
if ( options ) {
context = options.context;
filter = options.filter;
enterMode = options.enterMode;
}
// Fall back to the editable as context if not specified.
if ( !context && context !== null )
context = this.editor.editable().getName();
return this.editor.fire( 'toDataFormat', {
dataValue: html,
filter: filter || this.editor.filter,
context: context,
enterMode: enterMode || this.editor.enterMode
} ).dataValue;
}
};
// Produce a set of filtering rules that handles bogus and filler node at the
// end of block/pseudo block, in the following consequence:
// 1. elements: - this filter removes any bogus node, then check
// if it's an empty block that requires a filler.
// 2. elements:
- After cleaned with bogus, this filter checks the real
// line-break BR to compensate a filler after it.
//
// Terms definitions:
// filler: An element that's either
or &NBSP; at the end of block that established line height.
// bogus: Whenever a filler is proceeded with inline content, it becomes a bogus which is subjected to be removed.
//
// Various forms of the filler:
// In output HTML: Filler should be consistently &NBSP;
at the end of block is always considered as bogus.
// In Wysiwyg HTML: Browser dependent - see env.needsBrFiller. Either BR for when needsBrFiller is true, or &NBSP; otherwise.
//
is NEVER considered as bogus when needsBrFiller is true.
function createBogusAndFillerRules( editor, type ) {
function createFiller( isOutput ) {
return isOutput || CKEDITOR.env.needsNbspFiller ?
new CKEDITOR.htmlParser.text( '\xa0' ) :
new CKEDITOR.htmlParser.element( 'br', { 'data-cke-bogus': 1 } );
}
// This text block filter, remove any bogus and create the filler on demand.
function blockFilter( isOutput, fillEmptyBlock ) {
return function( block ) {
// DO NOT apply the filler if it's a fragment node.
if ( block.type == CKEDITOR.NODE_DOCUMENT_FRAGMENT )
return;
cleanBogus( block );
// Add fillers to input (always) and to output (if fillEmptyBlock is ok with that).
var shouldFillBlock = !isOutput ||
( typeof fillEmptyBlock == 'function' ? fillEmptyBlock( block ) : fillEmptyBlock ) !== false;
if ( shouldFillBlock && isEmptyBlockNeedFiller( block ) ) {
block.add( createFiller( isOutput ) );
}
};
}
// Append a filler right after the last line-break BR, found at the end of block.
function brFilter( isOutput ) {
return function( br ) {
// DO NOT apply the filer if parent's a fragment node.
if ( br.parent.type == CKEDITOR.NODE_DOCUMENT_FRAGMENT )
return;
var attrs = br.attributes;
// Dismiss BRs that are either bogus or eol marker.
if ( 'data-cke-bogus' in attrs || 'data-cke-eol' in attrs ) {
delete attrs [ 'data-cke-bogus' ];
return;
}
// Judge the tail line-break BR, and to insert bogus after it.
var next = getNext( br ), previous = getPrevious( br );
if ( !next && isBlockBoundary( br.parent ) )
append( br.parent, createFiller( isOutput ) );
else if ( isBlockBoundary( next ) && previous && !isBlockBoundary( previous ) )
createFiller( isOutput ).insertBefore( next );
};
}
// Determinate whether this node is potentially a bogus node.
function maybeBogus( node, atBlockEnd ) {
// BR that's not from IE<11 DOM, except for a EOL marker.
if ( !( isOutput && !CKEDITOR.env.needsBrFiller ) &&
node.type == CKEDITOR.NODE_ELEMENT && node.name == 'br' &&
!node.attributes[ 'data-cke-eol' ] ) {
return true;
}
var match;
// NBSP, possibly.
if ( node.type == CKEDITOR.NODE_TEXT && ( match = node.value.match( tailNbspRegex ) ) ) {
// We need to separate tail NBSP out of a text node, for later removal.
if ( match.index ) {
( new CKEDITOR.htmlParser.text( node.value.substring( 0, match.index ) ) ).insertBefore( node );
node.value = match[ 0 ];
}
// From IE<11 DOM, at the end of a text block, or before block boundary.
if ( !CKEDITOR.env.needsBrFiller && isOutput && ( !atBlockEnd || node.parent.name in textBlockTags ) )
return true;
// From the output.
if ( !isOutput ) {
var previous = node.previous;
// Following a line-break at the end of block.
if ( previous && previous.name == 'br' )
return true;
// Or a single NBSP between two blocks.
if ( !previous || isBlockBoundary( previous ) )
return true;
}
}
return false;
}
// Removes all bogus inside of this block, and to convert fillers into the proper form.
function cleanBogus( block ) {
var bogus = [];
var last = getLast( block ), node, previous;
if ( last ) {
// Check for bogus at the end of this block.
// e.g. foo
maybeBogus( last, 1 ) && bogus.push( last );
while ( last ) {
// Check for bogus at the end of any pseudo block contained.
if ( isBlockBoundary( last ) && ( node = getPrevious( last ) ) && maybeBogus( node ) ) {
// Bogus must have inline proceeding, instead single BR between two blocks,
// is considered as filler, e.g.
if ( ( previous = getPrevious( node ) ) && !isBlockBoundary( previous ) )
bogus.push( node );
// Convert the filler into appropriate form.
else {
createFiller( isOutput ).insertAfter( node );
node.remove();
}
}
last = last.previous;
}
}
// Now remove all bogus collected from above.
for ( var i = 0 ; i < bogus.length ; i++ )
bogus[ i ].remove();
}
// Judge whether it's an empty block that requires a filler node.
function isEmptyBlockNeedFiller( block ) {
// DO NOT fill empty editable in IE<11.
if ( !isOutput && !CKEDITOR.env.needsBrFiller && block.type == CKEDITOR.NODE_DOCUMENT_FRAGMENT )
return false;
// 1. For IE version >=8, empty blocks are displayed correctly themself in wysiwiyg;
// 2. For the rest, at least table cell and list item need no filler space. (#6248)
if ( !isOutput && !CKEDITOR.env.needsBrFiller &&
( document.documentMode > 7 ||
block.name in CKEDITOR.dtd.tr ||
block.name in CKEDITOR.dtd.$listItem ) ) {
return false;
}
var last = getLast( block );
return !last || block.name == 'form' && last.name == 'input' ;
}
var rules = { elements: {} },
isOutput = type == 'html',
textBlockTags = CKEDITOR.tools.extend( {}, blockLikeTags );
// Build the list of text blocks.
for ( var i in textBlockTags ) {
if ( !( '#' in dtd[ i ] ) )
delete textBlockTags[ i ];
}
for ( i in textBlockTags )
rules.elements[ i ] = blockFilter( isOutput, editor.config.fillEmptyBlocks );
// Editable element has to be checked separately.
rules.root = blockFilter( isOutput, false );
rules.elements.br = brFilter( isOutput );
return rules;
}
function getFixBodyTag( enterMode, autoParagraph ) {
return ( enterMode != CKEDITOR.ENTER_BR && autoParagraph !== false ) ? enterMode == CKEDITOR.ENTER_DIV ? 'div' : 'p' : false;
}
// Regex to scan for at the end of blocks, which are actually placeholders.
// Safari transforms the to \xa0. (#4172)
var tailNbspRegex = /(?: |\xa0)$/;
var protectedSourceMarker = '{cke_protected}';
function getLast( node ) {
var last = node.children[ node.children.length - 1 ];
while ( last && isEmpty( last ) )
last = last.previous;
return last;
}
function getNext( node ) {
var next = node.next;
while ( next && isEmpty( next ) )
next = next.next;
return next;
}
function getPrevious( node ) {
var previous = node.previous;
while ( previous && isEmpty( previous ) )
previous = previous.previous;
return previous;
}
// Judge whether the node is an ghost node to be ignored, when traversing.
function isEmpty( node ) {
return node.type == CKEDITOR.NODE_TEXT &&
!CKEDITOR.tools.trim( node.value ) ||
node.type == CKEDITOR.NODE_ELEMENT &&
node.attributes[ 'data-cke-bookmark' ];
}
// Judge whether the node is a block-like element.
function isBlockBoundary( node ) {
return node &&
( node.type == CKEDITOR.NODE_ELEMENT && node.name in blockLikeTags ||
node.type == CKEDITOR.NODE_DOCUMENT_FRAGMENT );
}
function append( parent, node ) {
var last = parent.children[ parent.children.length - 1 ];
parent.children.push( node );
node.parent = parent;
if ( last ) {
last.next = node;
node.previous = last;
}
}
function getNodeIndex( node ) {
return node.parent ? node.getIndex() : -1;
}
var dtd = CKEDITOR.dtd,
// Define orders of table elements.
tableOrder = [ 'caption', 'colgroup', 'col', 'thead', 'tfoot', 'tbody' ],
// List of all block elements.
blockLikeTags = CKEDITOR.tools.extend( {}, dtd.$blockLimit, dtd.$block );
//
// DATA filter rules ------------------------------------------------------
//
var defaultDataFilterRulesEditableOnly = {
elements: {
input: protectReadOnly,
textarea: protectReadOnly
}
};
// These rules will also be applied to non-editable content.
var defaultDataFilterRulesForAll = {
attributeNames: [
// Event attributes (onXYZ) must not be directly set. They can become
// active in the editing area (IE|WebKit).
[ ( /^on/ ), 'data-cke-pa-on' ],
// Don't let some old expando enter editor. Concerns only IE8,
// but for consistency remove on all browsers.
[ ( /^data-cke-expando$/ ), '' ]
]
};
// Disable form elements editing mode provided by some browsers. (#5746)
function protectReadOnly( element ) {
var attrs = element.attributes;
// We should flag that the element was locked by our code so
// it'll be editable by the editor functions (#6046).
if ( attrs.contenteditable != 'false' )
attrs[ 'data-cke-editable' ] = attrs.contenteditable ? 'true' : 1;
attrs.contenteditable = 'false';
}
//
// HTML filter rules ------------------------------------------------------
//
var defaultHtmlFilterRulesEditableOnly = {
elements: {
embed: function( element ) {
var parent = element.parent;
// If the