Opened 6 years ago

Closed 4 years ago

#8377 closed Bug (fixed)

Editing textarea contents in WYSIWYG is broken

Reported by: Matti Järvinen Owned by:
Priority: Normal Milestone:
Component: General Version: 3.3
Keywords: Firefox Cc:

Description

If I edit form's textarea contents in WYSIWYG and then move to source and back to WYSIWYG textarea contents are missing.

By entering textarea content via dialog contents remain.

Entering by pressing enter inside textarea in WYSIWYG results in new empty paragraph at the beginning of editing area.

Tested with FF 6.0.1

Change History (9)

comment:1 Changed 6 years ago by Matti Järvinen

Actually changes are already discarded when moving to source view.

Last edited 6 years ago by Matti Järvinen (previous) (diff)

comment:2 Changed 6 years ago by Jakub Ś

TC rewritten:

  1. Create a form and inside it textarea
  2. Type something into textarea and switch to source and back

Result: text typed in textarea is missing

  1. When inside textarea press enter

Result: Empty paragraph will be added at the beginning of content area, provided that there are some elements with text above the form.

Issue reproducible in Firefox browsers from CKEditor 3.3.
Issue with enter inserted above content area has been reproducible from CKEditor 3.4.2

Last edited 6 years ago by Jakub Ś (previous) (diff)

comment:3 Changed 6 years ago by Jakub Ś

Keywords: Firefox added; FF removed
Status: newconfirmed
Version: 3.6.23.3

From CKEditor 3.6.2 there is new feature which allows textarea value to be inserted via dialog. This is the only valid way to insert contents into textarea (and in source mode).

Firefox contrary to other browsers is the only browser which allows to type text inside textarea (makes it editable) in WYSIWYG mode. This may confuse users and produces some unexpected errors (as described in previous comments).

The question is - can something be done to make textarea non-editable in Firefox.

Last edited 6 years ago by Jakub Ś (previous) (diff)

comment:4 Changed 6 years ago by Matti Järvinen

Editing contents in WYSIWYG was not and is not possible in FCKEditor 2.6.6 even with FF 6.

So there seems to be something that is related to changes made in CKEditor rewrite.

comment:5 Changed 6 years ago by Matti Järvinen

Old FCKEditor 2.6.6 probably uses onclick handling on these elements with gecko browsers.

_source\internals\fck_gecko.js lines 253-258

this.EditorDocument.addEventListener( 'click',
	function( ev )
	{
		if ( ev.srcElement.nodeName.IEquals( 'INPUT', 'TEXTAREA', 'SELECT' ) )
			ev.preventDefault()
	}, true ) ;

Although this doesn't work with select, radio & checkbox since FF 3, it seems to work for textarea though.

comment:6 Changed 6 years ago by Anna Tomanek

Pasting a further comment from Matti that Akismet blocked:

FF 6.0.1 gets onclick on textarea contained withing contenteditable div and oninput after pressing a key within textarea. Onfocus catches clicks to textarea so that cursor never gets in there except with arrow keys and then even onchange doesn't fire.

Quick test with textarea and other inputs & contenteditable="true"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div contenteditable="true">

Can click by default:<br/>
<textarea name="textarea1"></textarea><br />
<textarea name="textarea2" contenteditable="false"></textarea>ce false<br />
<br/>

Cannot get any events:<br />
<select name="select1">
    <option>1</option>
</select>
<br/>

Can get events if contenteditable="false"<br/>
<select name="select2" contenteditable="false">
    <option>1</option>
</select>
<br/>

The rest can't get events even if contenteditable="false"<br />
<input type="checkbox" name="checkbox1" /><br />
<input type="checkbox" name="checkbox2" contenteditable="false" />ce false<br />
<input type="radio" name="radio1" /><br />
<input type="radio" name="radio2" contenteditable="false" />ce false<br />

</div>

<script type="text/javascript">
handleElements('textarea');
handleElements('select');
handleElements('input');

function handleElements(tagName)
{
    var ar = document.getElementsByTagName(tagName);
    var len = ar.length;

    alert(tagName+':'+len);

    for(var i=0; i<len;i++)
    {
        ar[i].onclick = function(e){alert(tagName+': onclick'); return true;}
        ar[i].oninput = function(e){alert(tagName+': oninput'); }
        ar[i].onchange = function(e){alert(tagName+': onchange');}
        ar[i].onfocus = function(e){alert(tagName+': onfocus'); return true;}

        //ar[i].onmousedown = function(e){alert(tagName+': mousedown'); }
        //ar[i].onmouseup = function(e){alert(tagName+': mouseup'); }
    }
}
</script>

</body>
</html>

I also noticed that if contenteditable contained select element with contenteditable=false it will receive onclick & onfocus events although select elements with contenteditable=true did not.

Could this be used as workaround to #3069, #4564, #5804

comment:7 Changed 4 years ago by Piotrek Koszuliński

Status: confirmedpending

Could someone check if this issue is still valid? I don't understand what's the TC. As far as I see textarea's value can be edited only using dialog.

comment:8 Changed 4 years ago by Jakub Ś

Problem is no longer reproducible in CKEditor 4.x (contrary to 3.x).

comment:9 Changed 4 years ago by Jakub Ś

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