divearea form

[datalink]

I use the divarea plugin. Divarea removes <form>-tags from source in all browsers.

Place a form, with or without input fields, to divarea sample, open the sample and switch to source mode, form is removed.

[Jakub Ś]

Problem can be reproduced from CKEditor 4.0 beta in every browser.

[datalink]

Workaround:

onLoad: function() {
	CKEDITOR.addCss( '.cke_editable [data-cke-form="ckeform"]' +
		'{' +
			'border: 1px dotted #FF0000;' +
			'padding: 2px;' +
			'margin: 0px 2px;' +
			'display: block;' +
		'}\n' );
},
beforeInit: function( editor ) {
	var dataProcessor = editor.dataProcessor,
		dataFilter = dataProcessor && dataProcessor.dataFilter;
	
	dataFilter.addRules({
		elements: {
			form: function( element ) {
				if(!element.attributes['data-cke-form']) {
					element.attributes['data-cke-form'] = 'ckeform';
				}
				
				element.name = 'cke:form';
				
				return element;
			}
		}
	});
},

works for me in inline mode and in iframe mode

[Jakub Ś]

Yes adding that code to divarea plugin seems to do the trick.

One small issue is when you click on cke:form in elements path, the element path gets expanded. For example: You have form and input field inside it. In elements path you currently have body cke:form and you click on cke:form. In result elements path gets expanded to {{{body cke:form p input}}}.

[datalink]

Another issue is, the context menu doesn't work for both (form and cke:form). So I insert cke:form to forms/dialogs/form.js

line 16: form = path.contains( 'cke:form', 1 );
line 30: element = editor.document.createElement( 'cke:form' );

[Jakub Ś]

#13918 was marked as duplicate

[Tomasz Jakut]

The problem is not caused by divarea plugin alone, but the fact that such editor is placed inside form.

Replacing form with bogus element between switching editor's modes and then restoring it after data insertion seems to do the trick. Pushed ​branch:t/12508.

[Marek Lewandowski]

This is a very rare case, and we don't want to bloat core code with this case.

It's easily fixable with the code proposed by @t.jakut, like following:

editor.on( 'instanceReady', function() {
	var dataProcessor = editor.dataProcessor,
		dataFilter = dataProcessor && dataProcessor.dataFilter;

	if ( !editor.editable().isInline() || !editor.editable().getAscendant( 'form' ) ) {
		return;
	}

	if ( dataFilter ) {
		dataFilter.addRules( {
			elements: {
				form: function( element ) {
					element.name = 'cke-form';
				}
			}
		}, { applyToAll: true } );

		editor.on( 'afterSetData', function() {
			var elemsToUpdate = editor.editable().find( 'cke-form' );

			for ( var i = 0; i < elemsToUpdate.count(); ++i ) {
				var element = elemsToUpdate.getItem( i ),
					form = new CKEDITOR.dom.element( 'form' );

				element.copyAttributes( form );
				element.moveChildren( form );

				form.replace( element );
			}
		}, null, null, 999 );
	}

	// IE8 has problems with unknown elements without that line.
	if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
		editor.document.$.createElement( 'cke-form' );
	}
} );

So you can use it as a workaround to fix your case.