SolveItproblems

SolveITProblems is a project of QFormat.net intellectual club

SolveITProblems это проект интеллектуального клуба QFormat.net

среда, 23 ноября 2016 г.

How to totally disable the content filtering in CKEditor

Hi,

A lot of developers who used to implement CKEditor within their projects faced with a problem when CKEditor was formatting the entered HTML, purifying its structure and clearing "incorrect" tags. Many requests were opened on the issue tracker, forums and stackoverflow.com, asking them to add some parameter inside the configuration, which would turn off this mode, but "Gods" decided that the purifying is their main function and will not have a "toggle" to disable it (at least until the 5th version).

The below is the instructions on how to disable the formatting by own, making a little hack inside js files. For that purpose we need to download the complete source version of CKEditor.

1. Download and unpack the CKEditor files.
2. Open the directory \ckeditor\core and find the file named htmldataprocessor.js.
3. Open the file by a code editor you like and find the below lines (inside the object CKEDITOR.htmlDataProcessor.prototype):

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;
}
};

4. Comment the returns of the functions toHtml and toDataFormat and add the own return (like in the below modified block):

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();

// ---------------- THIS SECTION WAS MODIFIED ON 23.11.2016 IN ORDER TO DISABLE HTML FORMATTING ----------------------
return data; -- <-- This is our own return
/* 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();

// ---------------- THIS SECTION WAS MODIFIED ON 23.11.2016 IN ORDER TO DISABLE HTML FORMATTING -------------------------
return html;   -- <-- This is our own return
/*
  return this.editor.fire( 'toDataFormat', {
dataValue: html,
filter: filter || this.editor.filter,
context: context,
enterMode: enterMode || this.editor.enterMode
} ).dataValue; */
}
};

5. Enjoy!

Комментариев нет:

Отправить комментарий