Opened 11 years ago
Last modified 11 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)
Change History (8)
Changed 11 years ago by
| Attachment: | patch_bodywrap.zip added |
|---|
Changed 11 years ago by
| Attachment: | bodywrap.patch added |
|---|
unified diff of _source/plugins/wysiwygarea/plugin.js (v3.6.2)
Changed 11 years ago by
| Attachment: | bodywrap2.patch added |
|---|
unified diff of /ckeditor.js (main combined minified file of v3.6.2)
comment:1 Changed 11 years ago by
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.
comment:2 Changed 11 years ago by
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 11 years ago by
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 11 years ago by
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-->",'');
}
includes: diffs, original and modified files, demo, screenshot