Hi,

I have been experimented a bit with the Richtext editor and the use of the WYCIWYG editor in front-end. I have added this to FORM mode CREATE and EDIT and also with INLINE_EDIT in view mode.

Everything works fine in FORM mode CREATE and EDIT, but when im adding this to view mode with INLINE_EDIT something happens.

First im not getting the full toolbar even when i added this to editable and in tag (missing table etc), and also the inline_edit area will show OVER the saved text from FORM.

So i was wondering if anyone had experience this issue before? Im attaching a img to show what i meen!

In advance i give you big thanks for any help on this

[KK]

Hi,

Regarding the toolbar buttons, please see -
https://www.couchcms.com/forum/viewtopic.php?f=4&t=7918
https://www.couchcms.com/forum/viewtopic.php?f=2&t=8961

As for the overlapping issue, although I haven't encountered this before, it seems to be a CSS issue to me. Perhaps tweaking the style of the target element a bit would help?

Thanks for reply

As for the overlapping issue, although I haven't encountered this before, it seems to be a CSS issue to me. Perhaps tweaking the style of the target element a bit would help?

When it comes to css i cant see why this should be the problem, here is code

Code: Select all

<p class="content-group" <cms:inline_edit 'doc_desc' trust-mode='1' toolbar='full' /> ><cms:show doc_desc /></p>

[KK]

Could you please grant me access to your setup? I'd like to see the issue first-hand.
Thanks.

[KK]

Thanks for the creds, Kim.

I had a look at the 'overlapping' issue you mentioned.

I had to set the 'no_border' of <cms:load_edit no_border='1' /> in your template to '0' to find what portion of the page was inline-editable.

With that change, following image shows that the area outlined in yellow is your editable region -

0.jpg (6.89 KiB) Viewed 1988 times

And following image shows how the toolbar appears when we click on the editable region -

1.jpg (14.56 KiB) Viewed 1988 times

After some text entry -

2.jpg (46.63 KiB) Viewed 1988 times

So, as far as I can see, things are working exactly as expected

The yellow outlined area is your <p class="content-group"> and the toolbar appears above it as it should. It is overlapping a part of the page that is *not* its editable area. If, assuming that overlapped part has some important text that you need to read while editing, you can always click away from the yellow region and the toolbar will disappear.

So, could you please let me know what you think is the problem here and why?

Thanks.

HI KK,

Thanks for taking time to look at this!

First thing is that the TOOLBAR is diffrent when used in <cms:input> and <cms:inline_edit>

See attached image! The top img is from INLINE_EDIT and the bottom image is from cms:input



The buttons im missing is marked with red color! So if i use some of the buttons missing then the issue comes and the Inline_edit border show outside. See attached image!

[KK]

Regarding the missing toolbar buttons, I have already tried to explain (posted links) that CKEditor decides which buttons to show depending on the context.

As for the other issue, could you please PM me the link to the exact page on your site where I can see the problem you are describing? Do take the time to setup the page in a way that demonstrates the 'overlap' problem.

Thanks.

[KK]

OK Kim, so *finally* I think I get what you have been trying to convey
The following image you PMed me helped be get there -

Inline-edit.png (33.33 KiB) Viewed 1967 times

So, to paraphrase the problem - the 'TESTING' heading and the table below it are not hardcoded in the template. Rather, they have been inputted (from elsewhere) within the editable region now being inline-edited. But the inline-edit is, for some reason, making those content show outside it.

The reason, I think, is that in your code you have made a <P> element inline-editable -

<div class="content-group">
<p class="content-group" <cms:inline_edit 'prop_desc' toolbar="full" trust-mode='1' /> ><cms:show prop_desc /></p>
</div>

And according to w3c specs, a <P> element *cannot* contain other block-level elements -

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

A <TABLE>, ofcourse, is a block level element so while rendering the page, the browser tries to rectify your invalid markup and closes the <P> before the table element begins, causing the table to render outside the editable <P> block.

I'd suggest you make the parent DIV of the P editable instead.

Hope this explanation helps

Thats so true I did not think about this! Thanks so mutch for the help and pointing this out for me and others

Again thumbs up for good support here on the forum

[KK]

You are welcome

Incidentally, that limitation of P will also explain why the toolbar was missing those elements - CKFinder is smart enough to show only buttons for elements that are allowed within the container being edited.