Don't wrap wiget editable div content in 'P' Block.

[sweta]

I have created custom plugin for ckeditor widget "MyWiget" This plugin definition is given below.

CKEDITOR.plugins.add( 'MyWidget', {
	requires: 'widget',
	icons: 'MyWidget',
	init: function( editor ) {		
		editor.widgets.add( 'MyWidget', {			
			allowedContent: 'div(!My_Div);table(!My_tbl);td(!My_td);tr(!My_tr);',
			requiredContent: 'table(My_tbl)',	
		
			editables: {
				content: {
					selector: '.My_Div',
					allowedContent: 'span a strong sub sup u em s br ul ol li h1 h2 h3 h4 h5 h6 hr; a[!href,name,id,style]; span[!style]{color};  '
				}
			},	
		
			template:'<table mode="0" class="My_tbl ckw_contentTextWidget" border="0" cellpadding="0" cellspacing="0" align="center"><tbody><tr class="My_tr"><td class="My_td" valign="top" bgcolor="#FFFFFF" style="text-align : center"><div class="My_Div" style="text-align : left;">Enter your text here...<br>&nbsp;<br>&nbsp;</div></td></tr><tbody></table>',	

			button: 'Text',

			upcast: function( element ) {
				return element.name == 'table' && element.hasClass( 'My_tbl' );
			},

			data: function(){	
			}	
		} );
	}
} );

currently I am using ckeditor 4.4.7. and I have configured config file as below.

config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
config.autoParagraph = false;

Now when I click in the editable div "My_Div" the content [Enter your text here...<br>&nbsp;<br>&nbsp;] is wrapped in enclosing p tag. [<p>Enter your text rest here...<br>&nbsp;<br><br></p>]. So I don't want to wrap content of div in p block. Any help will be appreciated.

[Piotrek Koszuliński]

Could you check what widget.editables.content.enterMode (where widget is some widget instance taken e.g. from editor.widgets.instances) returns? With the allowed content that you set it should equal CKEDITOR.ENTER_BR, but perhaps it isn't.

[sweta]

Thanks Reinmar for your quick reply.

But I am not getting your answer properly. So will you please explain me in depth? FYI, When I enter and shift+enter in editable div that time I get <br/> added at cursor position But when first time I click in editable div that time div's content wrapped with Block of p tag.

I have tried lots of thing to remove p tag for that in ckeditor.js line no 326 when I customized this line d.checkEndOfBlock()){b=p.fixBlock(true,b.activeEnterMode==CKEDITOR.ENTER_DIV?"div":"p"); to d.checkEndOfBlock()){b=p.fixBlock(true,b.activeEnterMode==CKEDITOR.ENTER_DIV?"div":"");

It don't wrap the content in p tag which is my solution but it gives me error below in firebug InvalidCharacterError: String contains an invalid character

...ion(a,f){typeof a=="string"&&(a=(f?f.$:document).createElement(a));CKEDITOR.dom.... at line no 71 in ckeditor.js

[Piotrek Koszuliński]

I perfectly know what code is responsible for so called auto paragraphing. But it should not be applied when editable's enterMode == CKEDITOR.ENTER_BR. That's why I asked you what is the enter mode in your widget's editable. According to what I see it should be ENTER_BR, because you don't allow paragraphs.

[sweta]

Replying to Reinmar:

I have checked for widget.editables.content.enterMode which is 2 means CKEDITOR.ENTER_BR. You can see in widget.png which I have attached here. Enter mode and shift enter mode both to 2 means 'br' . I have checked all configuration to restrict auto paragraph and remove p tag. This issue is quite annoying for me so help me to get out of this.

[kavall]

For me problem occurs in 4.5.0 beta. Checked editable's enter mode

CKEDITOR.instances['myInstanceId'].widgets.instances[myWidgetId].editables['myEditableId'].enterMode

Above results 2 which is CKEDITOR.ENTER_BR. Editable's allowed content is set to " ". With these configurations CKEditor keeps wrapping content inside p when editable is focused. However p tag is removed when getData() is called for instance which holds this editable of widget.

Hope this is fixed. I think there's no possibility to make content which is not wrapped inside p in widget's editable.

[Piotrek Koszuliński]

Thanks for the details. We'll investigate this.

Hope this is fixed. I think there's no possibility to make content which is not wrapped inside p in widget's editable.

It is - one of the examples is ​http://sdk.ckeditor.com/samples/captionedimage.html. That's what makes this issue a little bit odd.

[sweta]

This problems was not occurred in earlier version with 4.3.2. When I used old version 4.3.2 that time its working fine. without wrapping content in p tag when you click inside editable div. But When I replace ckeditor's old version [4.3.2] to new version [4.4.7]. This problem arise. I think this problem arise due to autoParagraph is deprecated in new version may be. So Please help me to get out of this. This problem is driving me crazy now. Thanks.

[Piotrek Koszuliński]

We fixed auto paragraphing few versions back. It didn't work in nested editables before that and it should work when it's enabled. And it's enabled by default when enter mode is P and when config.autoParagraph is not false. When e.g. enter mode is BR, it is disabled. And enter mode of an editable depends on the allowed content of it.

One thing got deprecated here - config.autoParagraph. We do not recommend setting it to false, because in general auto paragraphing is extremely important for proper editability. It only can be disabled when block elements are not allowed in some editable, because this changes the enter mode to BR. Otherwise it is a mistake to change either enter mode or config.autoParagraph. It must be all consistent.

[sweta]

In editable div "My_Div" I don't want to allow block elements. and That div works perfect when we generate widget in ckeditor. That format is as it is as we defined in plugin. but creates a problem with adding extra 'p' tag when we click in that particular div. Then what's happen when we click in that particular div, so that that div's content get enclosed with extra 'p' tag.

Guys, please help me to get out of this as its urgent for me.

[Piotrek Koszuliński]

It is highly recommended to not mix non-block content with block content like tables and block widgets.

So if you want any block content (or in other words – non-inline content) then you must allow autoparagraphing the inline content. Otherwise, you create ambiguous situations that the editor cannot solve. Therefore the ​config.autoParagraph option is deprecated. We realised at some point that enter mode BR can be handled only if it's purely inline content. Hence, autoParagraph must be true as well. Hence, in your case, when you want to allow lists inside that nested editable, you should also allow auto paragraphing.

That said, there's still a bug. I checked that with nested editable allowing only inline content, autoparagraphing is still performed by the editor and should not be.

I'm assigning this ticket to 4.5.2 to not forget about it, but we will work on it later, perhaps in 4.5.3.

[Szymon Kupś]

Pushed ​branch:t/13414

There was an issue with condition in shouldAutoParagraph function in editable.js.
Added test that checks if auto paragraphing is not performed when editable's enterMode is ENTER_BR.