The forum operates in read-only mode. Please head to StackOverflow for support.

Last post

Fri, 10/11/2013 - 21:34

erik

Joined: 20/05/2010

Posts: 40

Inline editor - working with divs

I'm trying to do two things in the inline editor.

Trying to add an H1 element within a custom div. I start by selecting a custom-div from the Styles dropdown, and begin typing or copy and paste some text. Then I select an H1 element from the styles dropdown and see that the H1 will break the div I've set up. How do I keep the H1 tag contained within the div? It is worth saying that if I create the div with the actualy DIV button, all is well and seems to work. However the div does have a paragraph tag automatically placed inside of it, yet I can't delete it. I HAVE to start typing inside the <p> tag.
How do I exit the div and continue entering content outside of it?

All of the items in #1 can be clearly seem if you select the "Show Blocks" button.

Tue, 10/15/2013 - 15:52

erik

Joined: 20/05/2010

Posts: 40

One bump. cross fingers

One bump. *cross fingers*

Tue, 10/15/2013 - 16:42

sebstefanov

Joined: 03/02/2012

Posts: 1329

I'm trying to visualize what you are saying but I guess I'm too dense... On our demo it retains the div and h1 tags when you mix both. Can you enumerate a step-by-step thingy of how to reproduce it on our demo page?

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Tue, 10/15/2013 - 17:02

erik

Joined: 20/05/2010

Posts: 40

Sure!

Ok this is a little different, but you can definately see the point I'm making (I hope).

Go to the "Inline Editor" demo page.
Click on the first right-hand column that starts with "Lorem ipsum dolor".
Go to the "styles" menu and click "special container".
Put your cursor at the end of the first sentence and press enter to create a line break.
Highlight the first sentence.
Go to "Format" dropdown and select "Heading 1".

The heading causes the div to stretch beyond it's original state. I would expect it to be confined within the "special container" div's width.

Also, let's go back to step 5.
First sentence being highlighted, go to the "Styles" dropdown and select "Subtitle". As far as I know, there isn't an easy, intuitive way to add a div within a div. It switches the current div to the newly-selected one. Makes sense I guess, but how would you go about adding a div within a div in the demo?

Thanks for any help!

Wed, 10/16/2013 - 15:30

j.swiderski

Joined: 10/05/2011

Posts: 174

This is how it works

Hi,

This is how CKEditor works - One block element replaces another despite the selection (well... if you have e.g. 3 sibling divs selected and you change them to h1 you will get 3 h1 but if you just keep in line and select h1 whole line will be changed).
I recommend - create div, type text for header, change it to h1
Press enter and set div once more, type text for div content.
Of course you don't have to set div all the time using Format dropdown. You can set enter mode to div - http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-enterMode
If you want to have all inside main div use div container which by default inserts div->p (and set enter mode to div). That way you insert container, type in p, change it to H1, press enter which inserts next div and then you type the rest.
Basically you need to remember that inline styles work on selection while block styles or format replace whole block element.

Mon, 10/21/2013 - 21:39

erik

Joined: 20/05/2010

Posts: 40

I'm having an issue with what

I'm having an issue with what you described in #2.

I have a div set up. I enter some text, highlight it with my mouse, and then go to the Styles dropdown and select my custom H1 "title" tag. If I click "Show Blocks", I can clearly see that the H1 tag is rendered outside of the div element I had it typed in.

This happens whether the text is first, in the middle of other text within the div, etc. Always breaks out of the div container.
Am I doing something wrong? Seems like it should be contained within the div if I have it highlighted as you and I described.

I took a screenshot. You can see how the H1 tag causes the div to break into two divs while the H1 tag is rendered seperately in between rather than simply contained within the text in the div.

Attachments:

Attachment	Size
Screen Shot 2013-10-21 at 3.38.16 PM.png	75.01 KB

Tue, 10/22/2013 - 15:09

erik

Joined: 20/05/2010

Posts: 40

I think I found why it's

I think I found why it's possibly doing this, but not sure how to proceed.
I found that when I go to the demo page here, I click on "Full Sized Editor" so I can add div's and "Show Blocks". I found that the demo will add <p> tags, which can then be changed to another block-element from the styles dropdown, Italic Title for example, which stays contained within the main div 'container'.

In my page, I do not use <p> tags within the divs. I simply have plain text with line breaks. Do I have to alter my markup and css to adhere to how CKEditor handles this stuff?