Request help with some very basic formatting issues:

ESElrond

Hello all,

I'm a recently "ascended" member, still getting my first campaign ready to run -- I've been building wiki pages and trying to learn the ins and outs of the CkEditor.

I've noticed a number of odd formatting behaviors -- things that look as intended from within the "WYSIWYG" editor and yet don't match that appearance in the final, display view.  These are things that I've seen apparently functioning just fine on other campaigns I've peeked at, though, which is very puzzling.

I filed a support request, but thought I'd also ask here in case a user can help me figure out the problems.  Just to be clear, I don't have any custom CSS configured for my campaign.

Here are some examples of issues I've noticed:

1) When using a bullet-point list with some elements indented, the display version inserts an extra line of whitespace directly ahead of each element that starts a new intend level.  It makes multi-level lists look quite bizarre in practice, even though they look fine in the editor.

2) The behavior of "spanning" columns in tables doesn't match between the editor and display views.  If I merge two columns in the editor, they look fine...but the display view appears to ignore the "column span" html completely.  The result also appears rather bizarre.

3) When I use the editor to mark text to underline, it displays as underlined.  In the display view, the <u> tags are actually displayed instead of underlining text.

Here are some screenshots I took of a sample wiki page, as shown in the CkEditor and as displayed when the page is actually saved and viewed.  Note that no changes were made to the page between taking those two screenshots.

In editor:

In viewable webpage:

 

Any help that could be provided would be much appreciated!

Kallak

Hey ESElrond,

The CKEditor is a fairly new addition to Obsidian Portal, so a number of the specifics are still being learned. Formatting issues like the ones you have described are certainly problematic, and this is an area where experimentation and discovery on the part of the users is ongoing at this time.

From my own reading in online searches, some issues that people have noted (such as the automatic insertion of paragraph tags) are things that are configurable on the administration side by the tech team. Others (such as the creation of editor buttons that can insert Obsidian Portal slugs) need to be developed.

All of this means that posts like this one are valuable to the overall effort, so thanks for taking the time. The more information that we can give to the development team, the better.

Having said that, in the meantime there are some things you can try that can help (to varying degrees).

1. The custom css can be used to help alleviate some of these issues. One example that was mentioned in another post was using display none on br tags that were being inserted.

2. I have found that source mode editing with the CKEditor has proven to be a bit more reliable in getting the formatting that I want than the wysiwyg has. Swapping back and forth between source and wysiwyg is one way to get tags auto inserted, so I stay in source.

3. For some things, single line formatting in source works correctly for display. An example would be your nested bullet lists. When I input the HTML for my nested lists on one line in the editor in source mode, they come out correctly in display (I haven't tested yet, but killing the spacing issues with that might be something css can help with).

4. Users have the ability to toggle which editor they wish to use, so some people use the old editor still, or make certain edits with one editor and others with the other. Be careful with that due to the tag insertion that can happen with CKEditor.

In a nutshell, it's still early with regards to the CKEditor so we're all kind of in that boat together. We just need to get specifics sorted and hand it off to the techs, so keep experimenting and keep the info coming.

Hope this has been helpful.

ESElrond

Kallak,

Thank you for your reply.  I had some thoughts in response to a few of your points:

1. I have minimal prior knowledge of html and zero prior experience dealing with CSS, so any fixes that rely on that avenue will be challenging.  So far, I haven't really been able to find a "primer" on commonly useful CSS adjustments that fall into the remedial category; much of the discussion here revolves around fairly complex changes that are beyond my needs at the moment.

2. I tried this, and quickly detected a major issue -- every time you open up the same page again for editing, it automatically uses the WYSIWYG mode in CkEditor...and many (most?) of the tweaks made previously using source mode are undone.  So even if you make your corrections and save them without swapping back to WYSIWYG, the next time you edit the same page they'll be undone.

I suppose this approach to correcting the formatting of a given page might be feasible...but it's certainly cumbersome (since the only "preview" in the CkEditor involves switching to WYSIWYG mode, it'd be necessary to store the page source in an external editor while refining the formatting -- saving periodically -- until the display version looks as intended).

But that approach is untenable for pages that will be changing over time, since the extra work would be necessary every time an edit is made.

3. I can confirm that this works for me, at least to get rid of extra lines in an indented list.  By switching to source mode then removing extra carriage returns and spaces between some levels of my indented list, I was able to suppress the extra whitespace lines being inserted in the display view.  As noted above, the fixes are undone by swapping to WYSIWYG mode and/or re-opening the page for another round of edits, however. 

4. My campaign and membership are both less than a month old, but when I first created it the Textile editor was on by default.  I quickly discovered there were quirks to that editor too -- in particular, some formatting options wouldn't display properly when previewing pages, and I switched myself to the CkEditor to make it easier for the (I hoped) ease of WYSIWYG editing.

If any other users have helpful feedback or suggestions, I'd be more than happy to hear them.

SkidAce

Stick with Textile for now, while there may be preview issues, it doesn't add or delete any code, so one you get used to formatting things the way you like (I save the page and look at it as a sort of advanced preview) it will be consistant.

cgregory

I use only the textile editor.

Personally, I only use the textile editor. I use a mixture of textile and html on my site.

1.) Feel free to ask about even trivial CSS modifications. Someone will provide an answer.

w3schools is a great resource on figuring out some CSS

http://www.w3schools.com/css/default.asp

4) You can use CSS to modify the preview to be far more consistent with what you will see on your page. My guess the biggest issue is the different size of the preview screen and the actual screen? Or perhaps some color issues?

 

edit:

here is a link to a textile resource.

http://redcloth.org/hobix.com/textile/

weasel0

Another great thing to do is what most of us have done over the years. Check out other peoples campaigns and check out code pages some of us have put up. :)

Calion

It amuses me that I am dealing with all of the issues that the OP is having (plus one more: Hitting, say, the Italics button when nothing is selected does absolutely nothing except highlight the Italics button). It frustrates me that none of them have been fixed after most of a year. Is this site actually being worked on anymore?

GamingMegaverse

No, have not had any support in quite a while.