Ticket #8377 (closed Bug: fixed)

Opened 3 years ago

Last modified 10 months ago

Editing textarea contents in WYSIWYG is broken

Reported by: matti 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

comment:1 Changed 3 years ago by matti

Actually changes are already discarded when moving to source view.

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

comment:2 Changed 3 years ago by j.swiderski

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 3 years ago by j.swiderski (previous) (diff)

comment:3 Changed 3 years ago by j.swiderski

  • Status changed from new to confirmed
  • Keywords Firefox added; FF removed
  • Version changed from 3.6.2 to 3.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 3 years ago by j.swiderski (previous) (diff)

comment:4 Changed 3 years ago by matti

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 3 years ago by matti

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 3 years ago by Anna

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 10 months ago by Reinmar

  • Status changed from confirmed to pending

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 10 months ago by j.swiderski

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

comment:9 Changed 10 months ago by j.swiderski

  • Status changed from pending to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy