Opened 6 years ago

Last modified 5 years ago

#9774 new New Feature

HasPatch adding a body wrapper (usefull for adding (invisible) css wrappers)

Reported by: ElMoonLite Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version: 3.6.2
Keywords: HasPatch body css wrapper Cc:

Description

This is a patch on ckeditor 3.6.2. (this is a new feature and not actually a bugfix, I call it a patch because it involves editing an existing pluging file)

This patch allows inserting html source into the wysiwyg iframe area, which you can NOT edit in the editor itself, is NOT saved in the real source, but WILL allow you to modify the appearance of the wysiwyg editor. It does this by inserting (both prepending and appending) html in the body tag of the wysiwyg editor. (Note: it only works for the NON-FULLPAGE version. luckily, you won't need it for the fullpage config.)

for example, you can add <div id="x" class="y">...</div> wrappers so included css files will work.

I use it to insert html blocks quite deep into a fairly complex website and it still works like a charm.

USAGE EXAMPLE:

site.css:

body#mybodyid.mybodyclass div#myIdcontainer  div.myclasscontainer1{float:right;}
body#mybodyid.mybodyclass div#myIdcontainer  div.myclasscontainer1 div.myclasscontainer2{color:#f00;font-weight:bold;}

html/js:

<script>
	var myckconfig = {
		contentsCss : 'site.css?1234',	
		bodyId      : 'mybodyid',
		bodyClass   : 'mybodyclass',
		bodyPrepend : '<div id="myIdcontainer"><div class="myclasscontainer1"><div class="myclasscontainer2">',
		bodyAppend  : '</div><br style="clear:both;" /></div></div>',
	};
	$('textarea.ckeditor1').ckeditor(myckconfig);
</script>
<textarea class="ckeditor1">this should show up bold and red!</textarea>

Attachments (4)

patch_bodywrap.zip (280.7 KB) - added by ElMoonLite 6 years ago.
includes: diffs, original and modified files, demo, screenshot
bodywrap.patch (1.2 KB) - added by ElMoonLite 6 years ago.
unified diff of _source/plugins/wysiwygarea/plugin.js (v3.6.2)
bodywrap2.patch (20.3 KB) - added by ElMoonLite 6 years ago.
unified diff of /ckeditor.js (main combined minified file of v3.6.2)
patchdemo_screenshot.png (22.2 KB) - added by ElMoonLite 6 years ago.
screenshot example

Download all attachments as: .zip

Change History (8)

Changed 6 years ago by ElMoonLite

Attachment: patch_bodywrap.zip added

includes: diffs, original and modified files, demo, screenshot

Changed 6 years ago by ElMoonLite

Attachment: bodywrap.patch added

unified diff of _source/plugins/wysiwygarea/plugin.js (v3.6.2)

Changed 6 years ago by ElMoonLite

Attachment: bodywrap2.patch added

unified diff of /ckeditor.js (main combined minified file of v3.6.2)

Changed 6 years ago by ElMoonLite

Attachment: patchdemo_screenshot.png added

screenshot example

comment:1 Changed 5 years ago by neo314

This is an important update along with adding html5 and css3 support in order to stay relevant. I wish I had thought of doing this a long time ago. Thanks ElMoonLite!

I did find that this code breaks when HTML Entity Encoding is on. The comment tags get screwed up and then the search to remove the prepended and appended portion fails.

Last edited 5 years ago by neo314 (previous) (diff)

comment:2 Changed 5 years ago by neo314

I am currently using this patch on 3.6.6.1. I can see that it should work on version 4, but I can't figure out how to get a copy of version 4 with a ckeditor.pack file for the same 4 version, and the files for a _source directory of the same version together to be able to test and pack it if it works.

I did find that template.js at the if statement on line 72 requires this modification as well in order to work:

if ( isInsert )
{
...
}
else
{
	// if statement added for bodyPrepend/bodyAppend modification
	if (config.bodyPrepend || config.bodyAppend) {
		editor.setData( html+editor.getData() );
	} else {
		editor.insertHtml( html );
	}
	dialog.hide();
}

Otherwise, templates does not work with unchecking replace contents.

comment:3 Changed 5 years ago by neo314

I have not been able to compile CKEditor 4 to try this. On CKEditor 3 I found this will also require changes to Block Quoted and Create Div Container and it will not save any value if the editor is originally empty. It adds any inserted content before the <!--BODYPREPENDEND--> comment tag.

comment:4 Changed 5 years ago by neo314

I am testing and so far find that that this code works better. It does not prevent the user from getting outside of the prepend/append code, but it solves the problem of an empty editor noted above and works with the template patch.

data =
  config.docType +
    '<html dir="' + config.contentsLangDirection + '"' +
    ' lang="' + ( config.contentsLanguage || editor.langCode ) + '">' +
    '<head>' +
    '<title>' + frameLabel + '</title>' +
    baseTag +
    headExtra +
    '</head>' +	
    '<body' + ( config.bodyId ? ' id="' + config.bodyId + '"' : '' ) +
    ( config.bodyClass ? ' class="' + config.bodyClass + '"' : '' ) +
    '>' +
    // MOD Modification for bodyPrepend/bodyAppend
    (config.bodyPrepend ? '<!--BODYPREPENDBEGIN-->' + config.bodyPrepend : '') + 
    data +
    // MOD Modification for bodyPrepend/bodyAppend
    (config.bodyAppend ? config.bodyAppend + '<!--BODYAPPENDEND-->' : '') + 
    '</html>';

and

// MOD Modification for bodyPrepend/bodyAppend
if( ! fullPage && config.bodyPrepend){
  data = data.replace("<!--BODYPREPENDBEGIN-->"+config.bodyPrepend,'');
} 
if( ! fullPage && config.bodyAppend){
  data = data.replace(config.bodyAppend+"<!--BODYAPPENDEND-->",'');
}
Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy