docType: '<!DOCTYPE HTML>',\r
\r
/*\r
+ * Allowed content rules which beside limiting allowed HTML\r
+ * will also take care of transforming styles to attributes\r
+ * (currently only for img - see transformation rules defined below).\r
+ *\r
+ * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter\r
+ */\r
+ allowedContent:\r
+ 'h1 h2 h3 p pre[align]; ' +\r
+ 'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +\r
+ 'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',\r
+\r
+ /*\r
* Core styles.\r
*/\r
coreStyles_bold: { element: 'b' },\r
fontSize_style: {\r
element: 'font',\r
attributes: { 'size': '#(size)' }\r
- } ,\r
+ },\r
\r
/*\r
* Font colors.\r
*/\r
- colorButton_enableMore: true,\r
\r
colorButton_foreStyle: {\r
element: 'font',\r
{ name: 'Inline Quotation', element: 'q' }\r
],\r
\r
- on: { 'instanceReady': configureHtmlOutput }\r
+ on: {\r
+ pluginsLoaded: configureTransformations,\r
+ loaded: configureHtmlWriter\r
+ }\r
});\r
\r
/*\r
- * Adjust the behavior of the dataProcessor to avoid styles\r
- * and make it look like FCKeditor HTML output.\r
+ * Add missing content transformations.\r
*/\r
- function configureHtmlOutput( ev ) {\r
- var editor = ev.editor,\r
- dataProcessor = editor.dataProcessor,\r
- htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
+ function configureTransformations( evt ) {\r
+ var editor = evt.editor;\r
+\r
+ editor.dataProcessor.htmlFilter.addRules( {\r
+ attributes: {\r
+ style: function( value, element ) {\r
+ // Return #RGB for background and border colors\r
+ return CKEDITOR.tools.convertRgbToHex( value );\r
+ }\r
+ }\r
+ } );\r
+\r
+ // Default automatic content transformations do not yet take care of\r
+ // align attributes on blocks, so we need to add our own transformation rules.\r
+ function alignToAttribute( element ) {\r
+ if ( element.styles[ 'text-align' ] ) {\r
+ element.attributes.align = element.styles[ 'text-align' ];\r
+ delete element.styles[ 'text-align' ];\r
+ }\r
+ }\r
+ editor.filter.addTransformations( [\r
+ [ { element: 'p', right: alignToAttribute } ],\r
+ [ { element: 'h1', right: alignToAttribute } ],\r
+ [ { element: 'h2', right: alignToAttribute } ],\r
+ [ { element: 'h3', right: alignToAttribute } ],\r
+ [ { element: 'pre', right: alignToAttribute } ]\r
+ ] );\r
+ }\r
+\r
+ /*\r
+ * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.\r
+ */\r
+ function configureHtmlWriter( evt ) {\r
+ var editor = evt.editor,\r
+ dataProcessor = editor.dataProcessor;\r
\r
// Out self closing tags the HTML4 way, like <br>.\r
dataProcessor.writer.selfClosingEnd = '>';\r
\r
- // Make output formatting behave similar to FCKeditor\r
+ // Make output formatting behave similar to FCKeditor.\r
var dtd = CKEDITOR.dtd;\r
for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {\r
dataProcessor.writer.setRules( e, {\r
breakAfterClose: true\r
});\r
}\r
-\r
- // Output properties as attributes, not styles.\r
- htmlFilter.addRules( {\r
- elements: {\r
- $: function( element ) {\r
- // Output dimensions of images as width and height\r
- if ( element.name == 'img' ) {\r
- var style = element.attributes.style;\r
-\r
- if ( style ) {\r
- // Get the width from the style.\r
- var match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style ),\r
- width = match && match[ 1 ];\r
-\r
- // Get the height from the style.\r
- match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );\r
- var height = match && match[ 1 ];\r
-\r
- if ( width ) {\r
- element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );\r
- element.attributes.width = width;\r
- }\r
-\r
- if ( height ) {\r
- element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );\r
- element.attributes.height = height;\r
- }\r
- }\r
- }\r
-\r
- // Output alignment of paragraphs using align\r
- if ( element.name == 'p' ) {\r
- style = element.attributes.style;\r
-\r
- if ( style ) {\r
- // Get the align from the style.\r
- match = ( /(?:^|\s)text-align\s*:\s*(\w*);/i ).exec( style );\r
- var align = match && match[ 1 ];\r
-\r
- if ( align ) {\r
- element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );\r
- element.attributes.align = align;\r
- }\r
- }\r
- }\r
-\r
- if ( !element.attributes.style )\r
- delete element.attributes.style;\r
-\r
- return element;\r
- }\r
- },\r
-\r
- attributes: {\r
- style: function( value, element ) {\r
- // Return #RGB for background and border colors\r
- return CKEDITOR.tools.convertRgbToHex( value );\r
- }\r
- }\r
- });\r
}\r
\r
</script>\r
Got questions, comments, patches, etc.? Contact Jason Woofenden