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 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.

[Olek Nowodziński]

I pushed some code–style fix and additional tests to ​branch:t/13414b but it needs review.

[sweta]

Hi Thank you very much for your reply,

But issue is still there, When I change in my ckeditor.js as per your answer i got new issue with this change.

I can see extra br in my widget editable div and when I put my widget at runtime on click image it includes extra p tag at last in parent td which holds ck widget.

before I add widget my template is like ,

<table>

<tbody>

<tr>

<td>---->first

<br>

</td>

<td>---->second

<br>

</td>

<td>---->third

<br>

</td>

<td>---->fourth

<br>

</td>

</tr>

</tbody>

</table>

after I add widget with selecting third td, it looks like

<table>

<tbody>

<tr>

<td>---->first

<br>

</td>

<td>---->second

<br>

</td>

<td>---->third

<here I put my widget>

<p> extra p tag included when I put my widget here

<br>

</p>

</td>

<td>---->fourth

<br>

</td>

</tr>

</tbody>

</table>

Here, is the bug I also do not require extra p tag in parent td.

[Piotrek Koszuliński]

Are you sure you're testing ​branch:t/13414b?

On the other hand, if you have a block content inside <td> (your widget) then it's absolutely ok if a paragraph is created by editor to hold the rest of the content. That's what I said before – never mix inline and block content together. So what you described here seems to be ok.

[sweta]

Hey Reinmar, Yes I am testing with ​branch:t/13414b, But the problem is in this behaviour i don't want <p> to add in my widget and in my template so what should I do for that either its block content or inline element? If there is a way then guide me.

[Piotrek Koszuliński]

Trying force CKEditor to produce exactly the HTML that your template needs is an incorrect approach that I highly not recommend. CKEditor must follow some sane rules (like - never mix block and inline contents) and of course you can modify its source code to change some of them, but that will be a huge work. I rather recommend looking at produced HTML as on some semantic data which you can later (outside the editor) transform to the output that you need. It's a more valid, WYSIWYM (what you see is what you mean) approach where the content inside the editor does not need to be super equal to the content that's later generated for a target website.

[Piotrek Koszuliński]

Some comment about:

this.editorBot.setData( '<div data-widget="autoparagraphtest" id="w1"><div id="foo"></div></div>', function() {

1. Do not set data where widget is the only content of editor, because this trigger some nasty browser bugs which may break that test. E.g. Firefox magically adds some <br> to the editable element.
2. It's safer to test with a non-empty block editables (and blocks in general). Otherwise they must be filled (see what editor produces for empty paragraphs), so that data that you loaded is basically incorrect (editor would not produce such data).

[Piotrek Koszuliński]

I pushed changes to ​branch:t/13414b. Everything is fine, but we shouldn't forget about a manual test.

[Szymon Kupś]

Pushed ​branch:t/13414
Added manual test to verify the fix. Branch includes changes made in ​branch:t/13414b.

[Olek Nowodziński]

Merged ​git:e61966b into master.