floating editor

Hi, I update my system from version 3 to 4 with inline editing. Everything works great, but I have a little issue. DIVs with class cke_wysiwyg_div does not floating. When I remove cke_wysiwyg_div and cke_contents from parent it floats, but it is not editable :-) I can't find CSS for this classes what could block editor floating. Is it possible?

Attachments:

floating div in page view

none floating editor in edit view

Sat, 04/19/2014 - 01:01

datalink

Joined: 18/10/2007

Posts: 149

Here is the cutted source of

Here is the cutted source of the images above.

floating div in page view:

<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>

none floating editor in edit view

<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>

Should I make a feature request or is it impossible?

Thu, 04/24/2014 - 14:32

datalink

Joined: 18/10/2007

Posts: 149

In my source the editor is

In my source the editor is inside a div with class cke_inner. In inlineall sample I saw the editor is outside of cke_inner div. So I played around with the plugin divarea. I changed

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

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

and

contentSpace.append( editingBlock );

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

Now my editor is outside of cke_inner, like in inlineall sample. Everything seems to work fine, not sure if it is the best way. But my editor now floats around the news block.