Q: How to make an article display as it does in the WYSIWIG editor?

[siliconbrits]

To be honest, this may just be something I have not understood, but one of the main reasons my customers dont accept Joomla during trials is that articles they write in the WYSIWIG editor do not appear on the site the same as within the editor.

The problem is that in many cases all a client wants to do is add a new story and have it appear as they 'draw' it in the editor.  More than 90% of the time, it is this functionality that the client will experience.

It may be that the templates used are not well written, or some other setting that I'm just not aware of, but it's frustrating for me when I sell Joomla constantly and then the customer backs out on their experience of using the editor.

This was a problem in 1.4, and I'm sort of disappointed that it hasn't been resolved in 1.5.  Just to give an example, in a raw, out of the box installation of the current beta, there is an article 'Joomla Features' which includes an statement in the HTML.  This does not appear on the user site.  I expect it's something to do with the CSS rule applied to the , but customers are not interested in CSS or the underlying HTML, they just want it to appear.

Would it be possible to provide an explanation of how to make sure that a page designed in the WYSIWYG editor appears exactly as 'drawn' by someone with no HTML experience whatsoever?

Cheers - 1.5 is looking fantastic by the way.

C

[infograf768]

Looks to me that a demonstration site proposed to customers should indeed include ALL necessary CSS in function of the template used.

It is the responsibility of the designers/sellers to make sure this is the case.
It is also their responsibility to teach the customers how to use what they sell.

It is not depending on Joomla! out of the box in my opinion, but on the designer know-how.

The beta is just a beta and some definitions maybe missing.
In this case though, the hr tag is specific to Joomla and not used in the code produced when displaying the content.
It serves one specific purpose, which is to include a readmore break in the content when that content is displayed in a blog.
The code looked in the editor provides a visual aid to show where this function is placed in content

This is what the "Readmore" button is for at bottom of the editor.
(Pagebreak is similar.)
code produced (in editor only) is

CSS is specific to TinyMce in

/plugins/editors/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_content.css

/* Joomla! Specific */
hr#system-readmore {
border-top: 2px dashed #f00;
height: 5px;
}

hr.system-pagebreak {
border-top: 2px dashed #ccc;
height: 5px;
}

This is definitely a new feature to teach to users.

Hope this helps.

[siliconbrits]

While I appreciate your candidness, I don't agree with the first part of your answer.

This feature of Joomla is described on ths joomla.org site (What Is Joomla?) as follows:

..it is simple for even non-technical users to add or edit content, update images, and to manage the critical data that makes your company or organization go. Anybody with basic word processing skills can easily learn to manage a Joomla! site.

Now, I appreciate that there is some responsibility on the part of myself as a 'supplier' to deal with these issues, and I also accept that there may be some gap in my knowledge, but your answer does not really help.

The only thing you have dealt with in your reply is the example I have about the tag.  I am not criticising that tag in the Joomla distro, I just thought I would try to post an example - perhaps I did not pick the best one.  To be clear, I don't need an explanation about why that tag is configured in the way that it is.


What will be more useful is an explanation of how to ensure that what the customer designs in TinyMCE will appear exactly the same in the article area.

It might be that I have to tell the customer to work within certain limitations, or that there is one WYSIWIG editor that is particularly suited to the task, or some other guidelines that more experienced Joomla developers might know about.  With this sort of information, I will be better placed to ensure that a 3rd Party Template meets our requirements and to train our clients to use the product more efficiently.

Without this information, I am facing a few weeks of trial and error sessions before I can be certain I can 'train' customers to use Joomla.

Can you help me rather than tell me what my responsibilities are?

[Eelke]

If you want for the contents of the WYSIWYG editor to be absolutely identical to what you see on the site, you need to make sure that the CSS rules applied to the site and those applied to the contents of the editor are identical. AFAIK, there is no out of the box way to synchronize those rules, or otherwise make sure that the editor uses the rules from the frontend (and I think that's not because Joomla wouldn't want to do that, but because it would be a very complex problem to automate, because frontend template designers basically are completely free in the way they define their stylesheets).

I am not sure how WYSIWYG editors handle their editor area, so you either need to find out or hope someone else will explain that to you.

However, I'm not certain how reasonable this expectation is. Are there any other CMSs with online content editing that offer true, full WYSIWYG, on-par with a full-fledged web editor like Dreamweaver (which is what you seem to be requesting)? I'd personally consider to simply explain that the WYSIWYG-ness of the editor is only to a certain extent. It shows you basic text styles such as bold and italic, it allows you to create links without having to write raw HTML, it allows you to control image placement, etc. To see exactly what it looks like on the site, there's the preview function (that's safer anyway, if you need to keep CSS-rules in sync, you might still get some surprises when something is not quite right).

[infograf768]

Can you help me rather than tell me what my responsibilities are?

  OK, OK, you are right. My apologies.

This is what I do personally:

1. I make sure —using JCE— that my users have access to only a few selected CSS that I place in the editor.content.css. JCE is set to use that file for display when editing. These CSS are obviously also present in the template_css.css

And I tell them to use these ALWAYS systematically when entering any text. Never use the other "Formatting" options offered by JCE/Tiny (Bold, underline, color, background, etc). In the last job I did for a corporate, I even edited out most of the JCE icons I did not want to show as a choice to users. This lets the site looks as it should whoever the user editing.
I take off the Font-size, Font-Family (defined through CSS). I leave the Format but I define the h1, h2, etc. in CSS.

This makes me add for example CSS like
.bold {font-weight: bold;}
.size12 {font-size:12px;}
#center h1 {font-family: Times New Roman, Times, serif; font-size: 16px;} // the MainBody is in a div with the id="center"
etc.

2. I tell them to use the advanced image capacities of JCE and NEVER use {mosimage}.

3. I tell them to always Preview the content after Applying changes.

This is a reasonable approach which does not provide a full WYSIWYG (Would they get that in Word?  ), but is really good enough and does the job.

I would not sell a Joomla! site without being sure all this is done beforehand.

[siliconbrits]

Uber long time since I read this post, but just wanted to say that this answer was much more helpful, and is the technique that we use today..

..although we define a larger set of CSS rules available to the user than you have in your example here.

Many thanks for turning around in your reply.