Opened 3 years ago

Closed 3 years ago

#13414 closed Bug (fixed)

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

Reported by: sweta Owned by: Szymon Kupś
Priority: Normal Milestone: CKEditor 4.5.3
Component: UI : Widgets Version:
Keywords: Cc:

Description (last modified by Olek Nowodziński)

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

Attachments (1)

widget.png (72.0 KB) - added by sweta 3 years ago.

Download all attachments as: .zip

Change History (26)

comment:1 Changed 3 years ago by Piotrek Koszuliński

Status: newpending

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.

Last edited 3 years ago by Piotrek Koszuliński (previous) (diff)

comment:2 in reply to:  1 Changed 3 years ago by 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

comment:3 Changed 3 years ago by 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.

Changed 3 years ago by sweta

Attachment: widget.png added

comment:4 in reply to:  3 Changed 3 years ago by 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.

comment:5 Changed 3 years ago by kavall

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


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.

comment:6 Changed 3 years ago by 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 That's what makes this issue a little bit odd.

comment:7 Changed 3 years ago by 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.

comment:8 Changed 3 years ago by 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.

comment:9 Changed 3 years ago by 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.

comment:10 Changed 3 years ago by Piotrek Koszuliński

Keywords: editable contenteditable=true removed
Milestone: CKEditor 4.5.2
Status: pendingconfirmed
Version: 4.4.7

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.

comment:11 Changed 3 years ago by Szymon Kupś

Owner: set to Szymon Kupś
Status: confirmedassigned

comment:12 Changed 3 years ago by Szymon Kupś

Status: assignedreview

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.

comment:13 Changed 3 years ago by Olek Nowodziński

Description: modified (diff)

comment:14 Changed 3 years ago by Olek Nowodziński

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

comment:15 Changed 3 years ago by 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 ,



















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











<here I put my widget>

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










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

Last edited 3 years ago by sweta (previous) (diff)

comment:16 Changed 3 years ago by 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.

comment:17 Changed 3 years ago by 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.

Last edited 3 years ago by sweta (previous) (diff)

comment:18 Changed 3 years ago by 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.

comment:19 Changed 3 years ago by Piotrek Koszuliński

Milestone: CKEditor 4.5.2CKEditor 4.5.3

comment:20 Changed 3 years ago by 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).

comment:21 Changed 3 years ago by Piotrek Koszuliński

Status: reviewreview_failed

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

comment:22 Changed 3 years ago by Szymon Kupś

Status: review_failedassigned

comment:23 Changed 3 years ago by Szymon Kupś

Status: assignedreview

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

comment:24 Changed 3 years ago by Olek Nowodziński

Status: reviewreview_passed

comment:25 Changed 3 years ago by Olek Nowodziński

Resolution: fixed
Status: review_passedclosed

Merged git:e61966b into master.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy