fakeElement - isResizable limitations

[vosmanz]

Hi,

I am making a custom plugin, and want to use a fake element. However, I have two problems with the resizable option. I want to use the fake element for an item that can only have a variable width. I see that's not possible, but that's not really a problem because I thought I can bypass that by setting isResizable to false and set the dimensions using scripting from the dialog.

The problems I face are:

1. When I set isResizable to false, the fake element ignores the real elements dimensions. As each element can have a different height, I can't set the dimensions using CSS. When I set isResizable to true, the dimensions work fine.
2. When I set isResizable to false, the object is still resizable in latest stable version of IE10 and Firefox. In Chrome it is not resizable.

To make the element, I use both these methods:

// to add the element
var newFakeImage = editor.createFakeElement( element, 'cke_customPlugin', 'customPlugin', false );

// in the dataFilter:
return editor.createFakeParserElement( element, 'cke_customPlugin', 'customPlugin', false );

[Jakub Ś]

1. Could you please provide reduced sample code for your plugin so that we could see the problem? But before you do that ...Have you perhaps tried setting e.g. initial size in init method and then size you want in afterinit method?
2. This part is a duplicate of #9317.

[vosmanz]

add this in plugins/customPlugin folder

[vosmanz]

Add this in samples folder

[vosmanz]

Hi,

Thanks for your reply.

I created a very basic sample. It can be used in the 4.2.1 standard source package i just downloaded.

First, in the config.js add:

config.extraPlugins = 'customPlugin';
config.allowedContent = true;

Then create the folder 'plugins/customPlugin' and add the file plugin.js in that folder.

Last, add customPlugin.html to the folder 'samples' and open it.

---

You now should see two squares. The one with the blue line has isResizable:true, the red line is isResizable:false.

The blue one should be 80x80, the red one 100x100. The blue one is correct. However, the red one is 50x50 (the min-width/height as set in plugin.js)

I see this in all browsers: latest versions of IE10, Chrome, Firefox and Opera.

---

This example also shows that both divs are resizable, even when it is disabled for the red block.

You can see this in IE(10) and Firefox. In Chrome and Opera, both divs are NOT resizable. So also the blue div that should be resizable, is not.

---

Also note that when I resize the blue block and then toggle code-view and back, the dimensions are stored correct in the element. When I resize the red block and toggle to code-view, the initial dimensions are showed in code. When I go back to wysiwyg-view, the block is again 50x50.

How exactly can i set the size in the afterInit method?

Is this example sufficient?

[Jakub Ś]

You can see this in IE(10) and Firefox. In Chrome and Opera, both divs are NOT resizable. So also the blue div that should be resizable, is not.

Only FF and IE provide this feature and they provide it turned on by default. What editor can do is trying to disable this behaviour but due to #9317 this isn't possible.

About isResizable true/false
If element is set to be resizable then size of the real element is used. Name isResizable may be a little bit misleading as it only decides whether real element width and height should be used or not.

Proper solution is setting option isResizable to true to get real elements dimensions. Problem is that you don't want to but are still able to use native resize handles and this is #9317.

I'm closing this ticket as duplicate of #9317.
@vosmanz please note that #9317 conatains some workarounds for CKE 3.x and 4.x. You could try using them to get desired result.