IE does not disable height and width on images when they are disabled through code. FF does. Any ideas?
Here is the code:
CKEDITOR.on("dialogDefinition", function(e)
{
// Get the name and definition of the dialog at hand
var DialogName = e.data.name;
var DialogDefinition = e.data.definition;
// Initialize variables used to refer to the tabs and elements in the dialog
var DialogTab;
var DialogElement;
// Customize the image dialog
if (DialogName == "image")
{
// Customize the info tab
DialogTab = DialogDefinition.getContents("info");
// Eliminate all styling of the image by removing the corresponding elements
// Styling is standardized using the css classes set in the configuration of the editor
DialogTab.remove("txtWidth");
DialogTab.remove("txtHeight");
DialogTab.remove("ratioLock");
DialogTab.remove("txtBorder");
DialogTab.remove("txtHSpace");
DialogTab.remove("txtVSpace");
etc. . . . . . .
Clarification
Here is what CKEditor produces in IE when I disable height and width ( as well as the other items listed above):
<p>Here is some text.</p>
<p><img alt="blo" height="114" src="http://localhost:41716/BookstoreImage1.jpg" width="129" /></p>
<p>And in between them is an image.</p>
Here is what FF produces:
<p>Here is some text.</p>
<p><img alt="blo" src="http://localhost:41716/BookstoreImage1.jpg" style="float: right;" /></p>
<p>And an image in between.</p>
As you can see, FF obeys the omission of height and does not put out style elements for it. IE produces them using the images original dimensions, though occasionally the dimensions are distorted.
Basically I want to control the width of any image a user submits using proprietary css. It works in FF. Have not tried with others.
Further Clarification
It works properly in every major browser (FF, Chrome, Opera, even Safari for PC) . . . but, of course, not in IE.
Further Clarification
Note that, in IE, the height and width are put out as separate attributes not as a component of the attribute style. If the two lines of code which remove the height and width from the dialog are removed, IE puts out the height and width as components of style, not as separate attributes.
I found this link which I may use to fix the issue (doing the suggested answer basically in reverse) unless someone directs me to something better.
http://stackoverflow.com/questions/2051896/ckeditor-prevent-adding-image-dimensions-as-a-css-style
Partial answer
I did this (put it into an instanceReady function), which works, but I have to click on "Source" and then again on "Source" for the external css to be applied for some reason. Putting two .fire("mode") commands in didn't fix that so I'll have to work on it.
e.editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
img : function( element )
{
if (element.attributes.height)
delete element.attributes.height;
if (element.attributes.width)
delete element.attributes.width;
}
}
});
more issues with this matter
When I try to use the editor.setMode("source") or ("wysiwyg") to solve the problem of the sizing of an image (it gets the width but distorts the height in IE until I toggle the mode twice, to source and back), I get the following error in IE:
line: 802
char: 342
Error: Unable to get value of the property '$': object is null or unidentified
code: 0
url: . . . ./ckeditor/ckeditor.js
I have no idea what to do here. The need for this really should not be.
By the way, I am using CKEditor 4.0.1. The IE at issue is IE9.
Just a short note - you can't
Just a short note - you can't do that (as I'm anticipating you do):
These methods are asynchronous therefore they accept callback as their second arguments. This is correct solution:
editor.setMode( 'source', function() { editor.setMode( 'wysiwyg' ); } ) ;Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Please advise on where to put this
Thanks. I should have figured that out. I wonder, now knowing the correct syntax, where to place this code so that the snippet is executed when and only when an image is added. I have a change detection routine. I placed it in there, and it fires with every detection event, so that the user sees a constant toggling of the edit area.
I looked for some sort of event and could find none.
This is just speculation: Is it possible that somehow, because I have removed the height and width from the dialog box and have also now removed the height and width attributes if they happen to be created, that, at least for awhile, IE or CKEditor when executing in IE is doing something with the heigth and width values of the original image, or maybe doing something with lockRatio, that I can interfere with?
Solved
I solved the issue of the height being screwed up in IE by adding this to my css:
height: auto;
The width was already specified.
So by specifying the width in pixels and the heigth as auto, EVEN INTERNET EXPLORER seems to know what to do.
Thank God.
And thank you reinmar for your attention to this problem.
Perhaps the kind folks at CKEditor can determine whether or not some sort of improvement is warranted when looking at this saga.