float inline editor

[datalink]

This source sets a news block right site and floated content left:

<div style="width: 200px; float: right">
	<h2>News</h2>
	<div class="news">
		<h3>Lorem ipsum dolor 11.04.2014</h3>
		<div>Lorem ipsum dolor...</div>
	</div>
	<div class="news">
		<h3>Vulputate velit... 04.04.2014</h3>
		<div>Duis autem vel eum...</div>
	</div>
</div>
<div class="content">
	<h1>Lorem Ipsum...</h1>
	<p>Lorem ipsum dolor...</p>
	<p>Ut wisi enim ad minim...</p>
	<p>Ut wisi enim ad minim...</p>
</div>

When I open the content in an inline editor, the editor doesn't float around the news. Source with editor:

<div style="width: 200px; float: right">
	<h2>News</h2>
	<div class="news">
		<h3>Lorem ipsum dolor 11.04.2014</h3>
		<div>Lorem ipsum dolor...</div>
	</div>
	<div class="news">
		<h3>Vulputate velit... 04.04.2014</h3>
		<div>Duis autem vel eum...</div>
	</div>
</div>
<div class="content">
	<textarea name="content_1" id="content_1" style="visibility: hidden; display: none;">
		&lt;h1&gt;Lorem Ipsum...&lt;/h1&gt;
		&lt;p&gt;Lorem ipsum dolor...&lt;/p&gt;
		&lt;p&gt;Ut wisi enim ad minim...&lt;/p&gt;
		&lt;p&gt;Ut wisi enim ad minim...&lt;/p&gt;
	</textarea>
	<div id="cke_content_1" class="cke_2 cke cke_reset cke_chrome cke_editor_content_1 cke_ltr cke_browser_gecko" dir="ltr" role="application" aria-labelledby="cke_content_1_arialbl" lang="de">
		<span id="cke_content_1_arialbl" class="cke_voice_label">WYSIWYG-Editor, content_1</span>
		<div class="cke_inner cke_reset" role="presentation">
			<div style="height: auto;" id="cke_2_contents" class="cke_contents cke_reset" role="presentation">
				<div aria-describedby="cke_486" title="WYSIWYG-Editor, content_1" aria-label="WYSIWYG-Editor, content_1" role="textbox" style="position: relative;" spellcheck="false" tabindex="0" class="cke_wysiwyg_div cke_reset cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" hidefocus="true" contenteditable="true">
					<h1>Lorem Ipsum...</h1>
					<p>Lorem ipsum dolor...</p>
					<p>Ut wisi enim ad minim...</p>
					<p>Ut wisi enim ad minim...</p>
				</div>
				<span id="cke_486" class="cke_voice_label">Drücken Sie ALT 0 für Hilfe</span>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	/* <![CDATA[ */
		CKEDITOR.replace( 'content_1', {
			customConfig : 'myconfig.js',
			language : 'de',
			fullPage : false,
			startupFocus : true,
			extraPlugins : 'autogrow,divarea,sharedspace,docprops,magicline,showprotected,iframe,sourcedialog',
			removePlugins : 'maximize,resize,elementspath',
			toolbar : 'EditContent',
			autoGrow_minHeight : 30,
			autoGrow_bottomSpace : 10,
			autoGrow_onStartup : true,
			sharedSpaces : {
				top : 'MyToolbar'
			}
		});
	/* ]]> */
	</script>
</div>

I attach 2 screenshots.

[datalink]

screen page view

[datalink]

screen editor view

[Piotrek Koszuliński]

It does not float around your news because you haven't initialized it on them. You only initialized it on textarea. Read more about initializing inline editor in ​http://docs.ckeditor.com/#!/guide/dev_inline.

[datalink]

In divarea plugin I changed

var editingBlock = CKEDITOR.dom.element.createFromHtml( '<div class="cke_wysiwyg_div cke_reset" hidefocus="true"></div>' );

to

var editingBlock = CKEDITOR.dom.element.createFromHtml( '<div class="cke_textarea_inline cke_reset" hidefocus="true"></div>' );

and

contentSpace.append( editingBlock );

to

editingBlock.insertAfter( contentSpace );
contentSpace.hide();

I'm not sure if it is the best way, but it seems to work.