Endless hassles with the editor NOT being WYSIWYG

Endless hassles with the editor NOT being WYSIWYG

by Dom F -
Number of replies: 26

Hi Guys

Its me, the guy that struggles with CSS at the best of times. Im TRYING to make changes the right way by changing the custom css file but Im just getting grief from the WYSIWYG editor. Im at the edge of my knoweldge, the limts of my understanding and my patience with this hassle...

Here it is - changes I make to the custom CSS DONT take effect OUTSIDE of the Editor (which I think is Tiny MCE, whatever that is, or means) see the image attached.

Basically - Im NOT getting what I see is what I get. its NOT WYSIWYG.

Can you help? If so please be prepared to be given an FTP account and take some time helping me as telling em what I need to do will probably result in me responding with "I dont understand what you mean"

Thanks


Attachment editor_hassles.jpg
Average of ratings: -
In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Unless you have a good reason to continue using TinyMCE, then the best way to handle this is probably to simply change your editor back to the default ATTO editor as I believe (thank you David Scotson smile ) that picks up all css, including custom settings and does not require the editor.css file that TinyMCE does.

Otherwise the only way you will get it to work with TinyMCE is that all your customcss changes have to be copied into your editor.css every time you make a change in customcss.

In reply to Richard Oelmann

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

thanks - can i get baby steps instructions on how to do either pf these things? are they reversible if I screw it up totally (as I will) 

In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

I use TinyMCE as I see it as a much better Text Editor than ATTO. The trick is do not add any colour definition. I have used it most of the time in these Forums and dont have any problem as I know what I am doing.

If you add a H1 heading and your theme is set so that all H1 heading are BLACK and you want it RED then you should be able to do this by setting the colour as you type.

Let me try this here as an example:

This is a H1 heading in the default colour that the Moodle theme dictates.

This is a H1 heading in red and underlined

In reply to Mary Evans

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

im totally confused now sad atto or tiny mce? where is the editor,css? what do I *do* to it?

I need a computer science degree for these forums sad

In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Most of what you write in ATTO works well with any Bootstrapbased themes. Not so using TinyMCE unless you know what you are doing. However the decision is yours. If you are using a Bootstrapbased theme, then you are better choosing ATTO as your Text Editor.

If on the other hand your theme is NOT a Bootstrpbased theme then TinyMCE should work OK, but it will depend what the css in your theme's editor.css has in it>

So we are back to the question of what type of theme are you using? Is it Bootstrap or one of the Older Moodle Themes?

Mary

In reply to Mary Evans

Re: Endless hassles with the editor NOT being WYSIWYG

by Derek Chirnside -

I had exactly the same question Dom as Mary.  What theme you are using could make a difference.

-Derek

In reply to Derek Chirnside

Re: Endless hassles with the editor NOT being WYSIWYG

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

When I investigated a couple of weeks ago, Dom's site was using a custom theme with Clean (and bootstrapbase) as a parent, but it also has large amounts of additional css in a style sheet which override various bits of bootstrap styles and apply all kinds of layout and other options being used in the content itself.

I looked through the issues Dom had at the time and gave a breakdown as far as I was able in a limited time. A number of them were related to not having an editor.css while using TinyMCE (which like Mary I also tend to prefer, but which needs that editor.css if you want it to be truly WYSIWYG, something that doesn't actually bother me, so long as I know in my mind what a heading or whatever will actually look like - but I understand why others want/need it). But I am not able to put in the time commitment that Dom requires to sort these issues out for him the way he wants to get it done.

The alternative to applying an editor.css - which will not pick up customcss or theme setttings anyway - is to use ATTO which does pick up the theme styles and settings without a separate style sheet of its own, for all its other weaknesses. As a quick fix, to resolve a number of the WYSIWYG issues of not having an editor.css, that would be my recommendation to Dom - although fixing/creating a proper editor.css would be better.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

As I feared I have lots of suggestions (which of course I appreciate) but they are split evenly between two very different points of view, and as I struggle with the complexity and consequences of both, it leaves me completely stuck.

I think this illustrates my initial point that "having a go" and tinkering with one issue and hoping it will fix the other issues is unlikely to move this forward, and why I live in hope that I can find someone willing to take a big picture look at things.

From the very VERY little I know, it sounds like the right way to fix this is the editor.css method (and I have no idea what that means or what the process is) so again, I have to hope someone might be willing to have a look at the big picture as trying to address this looking at one area alone (or worse still, me fiddling with that one area blindly without understanding what I am doing or the consequences)  will leave me in even more of a hole.

To return to my original post several weeks back - if that sounds like something you're willing to put  a little time aside to help with - I would be very grateful. If not, I remain stuck.

In reply to Richard Oelmann

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

Hi Richard,

Im kind of left with these million dollar questions, o try and dig myself out of this hole (unless or until someone who knows what they're doing happens along) 

Given that ditching Tiny MCE is not an option...

  1. Where is this mystery editor.css stored?
  2. How come I have got this far without even having one? 
  3. What do I need to do to with (put in)  that file to address these headaches?
  4. Will this module fix all or any of these problems?

http://tinyurl.com/zk3eb9z

Any suggestions welcome. I have tried to sort this out but clearly (and to no great surprise) muddling along myself has left me running into a problem that even the welcome expertise in this forum are telling me is not straight forward.


In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Can I ask why you cannot ditch TinyMCE?  I hung on to that editor for a long time and still use it as default on my site but Atto has come a long way.  Unless you have a TinyMCE plugin that you need, switching to Atto will be the easiest.  Even if you just switched to make your changes and then switched back, that would take care of your issue for now.  It sounds like the editor.css file needs to be added any time that you use the editor - that obviously is not practical at all. 

In reply to Emma Richardson

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

Hi Emma,

Yes I can try and answer that....

  1. the TinyMCE has a drop down combo of custom styles that I sue and I have no idea if they will suddenly vanish
  2. Originally i was told that Tiny MCE was the way to go because of problems we were having NOT using it, but what those issues were, I cannot say
  3. I have no idea how to swap these things (I am likely to wreck the whole site - given my lack of knowledge) 
  4. I have even less idea what he change - however temporary - might do to the sites operation and.or content - especially given point number 3 (above)

Basically (and as I am happy to keep telling people who are far more technical than I am) I am very much our of my depth here and need what is sometimes called real time handholding - in the event that a) I actually understand any of the suggestions I have been given here (and I dont) and b) in case I mess up and have to tread very carefully backwards through the minefield.

I never cease to be amazed how willing people are to have amateurs fiddle with websites without knowing what they are doing - in a way that would never be suggested with a car engine, a gas boiler or any other number of far simpler technologies... WHat I need is a short term helping hand , a a volunteer, but Ive yet to find one on the moodle forums (I dont know why)

In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Changing the editor should have no site impact at all. In fact the editor can be changed from user preferences so you don't even need to change it site wide.  You can safely switch editors in you user preferences and try it out. If it seems to work better then you can change the default editor at the site level in the site admin/plugins/editor settings. There is lots of documentation here about editors and how to change them.

I would suggest going to your user preferences and switching your text editor to atto and then trying it out.

Average of ratings: Useful (1)
In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

"I never cease to be amazed how willing people are to have amateurs fiddle with websites without knowing what they are doing - in a way that would never be suggested with a car engine, a gas boiler or any other number of far simpler technologies... WHat I need is a short term helping hand , a a volunteer, but Ive yet to find one on the moodle forums (I dont know why)"

Yes, but to follow your own analogy, I'd be prepared to pay the mechanic, gas engineer, etc and you are asking for free one-one support! I'd also be asking for help with a specific single task, which we are trying to give you, where previously you have been asking for 'there's something wrong with my car. I dont know how to do anything but drive it. Can you come over, see whats wrong and fix it all for me?' If I asked my neighbour (who is an expert with his car) I would fully expect him to be showing me how to do it myself in future, not just expecting him to do it for me.

Average of ratings: Useful (2)
In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
1. editor.css should be in yourtheme/style folder
2. editor.css is not involved in the actual running and styling of the theme, only your use of the TinyMCE editor, which is what you are having problems with. It is quite possible to run your site perfectly adequately without one if you are comfortable knowing what it will look like on the theme itself.
3. you need an editor.css file - this should have anything to do with typography and creating content replicated from the theme css. However, as you have started using customcss you need to be aware that the editor.css will not apply those styles anyway. There is no way (that I am aware of) to get TinyMCE to recognise custom settings and styles that are not part of the editor.css file and editor.css is not part of the processing of settings, so those settings will not be displayed as WYSIWYG in TinyMCE anyway.
4. no - it still wont affect editor.css and it is not supported beyond Moodle2.2 anyway, so i wouldn't advise installing it.

For your points to Emma:
1. Well, they wont disappear from your content, but you would need to recreate them in Atto - probably using the customstyles atto plugin https://moodle.org/plugins/atto_styles (Atto has a number of very useful plugins which make it a lot better than the core default atto setup)
2. There are reasons why I prefer TinyMCE too, but Atto has improved no end in the last few years, especially with those plugins
3. You can change the editor site wide on http://yourmoodlesite/admin/settings.php?section=manageeditors, or as Emma suggests, just for yourself through your profile options (on the most recent Moodles its on your preferences page http://yourmoodlesite/user/preferences.php
4. changing your editor has no effect at all on the operation of the site, only on the editor used to create the content - once the content is created the editor used to create it is not relevant, in fact you (a user comfortable with the html) could switch to a simple text editor and hand edit any html, it still wouldn't have any effect on the look of the site once the content is created.

Recommendation - switch to Atto and use the custom_styles plugin to recreate any of your own personal styles as needed. To be honest that is a far simpler way forward than creating an editor.css file for TinyMCE and trying to keep it constantly updated with anything you add to customcss or theme settings.


Richard

In reply to Mary Evans

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

i apologise but i dont know what you mean

I have 500+ sections with a heading colour i need to change from a to b  Later on I may change my mind. if youre suggesting doing that by hand ("by setting the colour as you type.") then thats not going to work - i cant spend 3 weeks making the changes slowly. I thought this is what css is for?

the changes are not taking place OUTSIDE the editor. i would really like to know but clearly it involves in depth knowledge (as usual) of not just css but the horrendously complex way that it works with the editor?

all i know is that im not getting what the wysiwyg editor says - its NOT WYSIWYG it is in fact WYSI-NOT-WYG

Maddening for content-not-coder users


In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Use ATTO and see if that changes anything?

In reply to Mary Evans

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

OK everyone. So I changed to ATTO.

What am I supposed to see? Nothing has changed. The custom.css changes I NEED to see in the USER pages are not showing but worse still they are NOW not even showing INSIDE the WYSIWYG editor, so Im taking backward steps here, not forward.

And on top of all this, half the buttons I need have gone, so  I changed back to tiny MCE so Im not going backwards at least. AGain I dont see how changing a VIEWER (which is what these editors are) is going to change how the pages are displayed.

I think the grand secret to this infernal mystery (apart from finding a kindly soul to actually take a look with eyes that unlike mine, know what all these hieroglyphics mean) lies with this mystery editor.css file but I have no idea what it is, where it goes or what I need to put into it.

Welcome any suggestions, help, interventions... aka people who know what theyre doing unlike amateur clueless fiddlers like me out of my depth...

In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

and it gets worse. Now that I "fiddled" with making ATTO my editor (briefly) I am now seeing a new page error in chrome inspector... see image below.

I *knew* I shouldn't have fiddled < sigh x 100 >

Attachment tineMCE_error.jpg
In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Dom,

Changing to ATTO and back again would not have caused the tinymce.css file 404 in that folder.  So either you've not noticed it before or somebody has messed up FTP wise at that location.

With regards to 'editor.css' and all that has transpired now and in the past, Moodle is not a trivial program.  Like all professionalisms it takes time and skill to learn.  Think of it like a plumber (as Software Engineers have the same sort of rates and indeed higher per hour).  When you have a leaking tap either you call a plumber or you try and fix it yourself - sometimes with disastrous effects.  If in the future you don't want to pay the plumber then you go on a course (possibly paid for) and learn how to do plumbing yourself.  The same is true here, but with respect I don't believe you realise the level and 'value' of technical skill required.  There seems to be an expectation that just because you can't do it that you should get help and assistance without the economic balance at the other end.  Would you call a plumber, ask them to fix your tap and tell them you can't pay them for their time?  I'm sure the conversation would last another three seconds with gob smacked laughter at the other end before it did.

I have an idea (like quite a few people here) how to fix 'editor.css' and what is going on.  But it is a skill.  It is a result of years and years (decades) of hard work, learning (some self funded) to even get to this point.  I would investigate and fix it for you but I would need paying.  Simple economic fact.  I know you are a charity, but unfortunately I have no more time with all the other charity work I do already.

For 'editor.css' the workflow you need is:

  1. Identify all the things that change and make a list.
  2. Specify what the look should be for each item on the list.
  3. Either change the main CSS set used by the theme or 'editor.css' to have the style missing from the other set for each item.

So all I can say is 'good luck', keep trying and learning.  I will answer when I can when it is a quick reply (as above).

Kind regards,

Gareth

Average of ratings: Useful (2)
In reply to Gareth J Barnard

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

Hi Gareth

I want to avoid the "expects something for nothing" discussion angle if we could - as this is a non profit project and until there is funding I have very little choice but to rely on any and all help I can get.

The point about plumbers is VERY MUCH that they are highly skilled professionals just like coders, and yes there are plumbers that do kind deeds and those that dont just like coders. (in fact code experts are probably more sympathetic) but I dont want to get too tied up that line, as I am doing my best to try and figure this out (UNTIL we get funding) and anyone that is helping is being offered paid work when that happens in months not years...  

I think yiu  really hit the nail on the head when you said "I know you are a charity, but unfortunately I have no more time with all the other charity work I do already." You are so right, and I need to find *my* Gareth - to help us - just as you are clearly generous enough to help others. But you'll forgive me I'm sure - if I leave those discussions to the Moodle lounge?

And now back to your core comments...


  1. Identify all the things that change and make a list.

Isnt this our custom css file? We have that already. So we have that list you refer to.

  1. Specify what the look should be for each item on the list.

I think that is inherent in the custom css file, right? its implicit. eg color: #b2FFF etc

  1. Either change the main CSS set used by the theme or 'editor.css' to have the style missing from the other set for each item.

This last point is the million dollar question. Knowing how to do THAT is where the solution lies, and a crash course in stopping all other work the project does whilst I do that - would have obvious consequences,  so you are absolutely 100% right. We need to find our own "Gareth" either hear - through the many posts that clearly show a very confused individual who is struggling, or through a relentless search beyond the forums for that general purpose (though sadly not moodle specialised) help.




In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok, mk2:

  1. Identify all the things that change (between editor view and not editor view) and make a list.  Non technical task.  Think pen and paper.
  2. Specify what the look should be for each item on the list.  Think write down what I want.
  3. Either change the main CSS set used by the theme or 'editor.css' to have the style missing from the other set each item.  Think 'kickstarter campaign' to raise the funds to pay somebody who knows what they are doing.  Plus this is a Catch-22.  There is no specific guidance on this as you have a bespoke theme that works in the way it works.  You need somebody with skill, the human element.  The process can only be written down when its finished.  It needs to be figured out first by somebody who has access to all the code and understands the implications of the issues of the first two points.  It will take many times longer here to solve the problem through questioning and you as a non-programmer being guided step by step for that process, i.e. what I can find and solve in a minute will take hours of back and forth here with the additional explanations and checking you've done it right in the first place.  So, Catch-22 you need help and guidance but no money and the people who can really do this need money as it is not trivial.  Therefore find your own form of yellow inflatable and row to Norway (was it Norway?) and certainly don't hire from M&M Enterprises.

In reply to Gareth J Barnard

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

I think there may be some confusion. (unless I misunderstand - which I dont think is the case)

I know  clearly what the css styling is I need - it is 98% done. I can go further. Im even able to use Chrome (painfully slowly) to show me what the element is, and test out the change in chrome and then upload that to the very modest CSS custom file hosted in the right place for standard moodle.

The PROBLEM comes when - having done that - and learned slowly how to do it (I might add!) that when its done the moodle cache is purged the page loaded and.... "oh great it didnt take effect OUTSIDE the WYSIWYG editor" (it works BEAUTIFULLY just as I want INSIDE the editor -  and no-one seems to know why (or at least I genuinely regret that I remain unclear after explaining the problem in as many different ways that I can think of!) LOL smile

Do I dont think its a case of deciding what I want, it seems to be "Why isnt Moodle behaving as it should given that I have ammended the custom css file as I want it.

The Kickstarter campaign is certainly an option - very creative thinking - except that according to their website "Kickstarter does not allow projects to fundraise for charity or offer financial incentives. Check out our rules for details. 

Plus the amounts involved (a few hundred pounds to fix the editor issue) I sense would kind of be like spending a month (kickstarter average recommended fundraising time - even it it was permitted) building a sledgehammer to crack a walnut.

It is interesting though. Some comments feel "its something you can fix if only you can be bothered to learn Dom" and the other camp that seems to say "this is a complex issue - you need to hire in"

I think the truth is a little bit of both - and again I really do want to remain focussed on the solution and not debating the philosophy of unfunded projects as it just divides opinions and starts flame wars which I just want to avoid.  

Given a few hours  (perhaps even a day) I think this could be solved, if I could find an expert sponsor in the mould of Gareth (!) - but that of course is the trick. Not all projects find their Gareths. I have one. But he happens to be working flat out for the EU on a project that finishes long after this problem needs to be fixed. So I need to find a Mark2. They are very rare!  There are people willing to help on a pro bono basis - afterall this particular project has required 12,500 volunteer man hours over the last 7 years (about half of those were my hours in the area of film production!) (and the coders - found many of them in Drupal land for some reason - but for reasons exhaustively discussed to death elsewhere, asking for the same in Moodle is more "problematic" (I wont go into detail - lets not re-open that discussion please! The Moodle community works in a very different way - no real time chat like Drupal IRC which is terrific)

I'll leave the thread open in case something falls out of the tree. There isnt much I can do otherwise smile


In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

OK well this issue is now fixed - But I have no clear idea how.

But it is good forum etiquette to attempt to, though its late and Im exhausted as of course this web malarkey is one of 27 other jibs I have to do every day!

Another user in the theme forum Rick, asked fo some details on themes. I couldnt answer the questionconfidentally but whilst I was looking on the settings to try and answer some of his question to help him to help us, I came across the settings for the CLEAN theme, and there is a GUI that llows various colours to be changed by idiots like me without editing the CSS

I noticed that the setting for link colours wasnt quite right - so I changed it to CSS firebrick, but was amazed to see that suddenly all my H3 headings that WERE correctly taking on the setting for this colour before, in the EDITOR, were NOT taking it on before now OUTSIDE THE editor (and thus there were loads of suggestions about tinyMCE, ATTO and so on)

NOW however the H3 firebrick color setting for the H3 headings IS working. But I assume that it must be working due to the LINK colour setting - which then begs another key question.

Is the CLEAN theme LINK colour setting somehow getting mixed up with the H3 heading style? I find this odd as of course my H3 heading styles are not LINKS they are just heading styles (see the css file below) but why then has changing the LINK heading in the CLEAN theme "idiots colour settting tool" fixed the H3 problem IN and OUT of the wysiwyg editor page, (ie it was shoing correclty as firebrick due to my custom css file (below) - but OUTSIDE the editor it wasnt.

If ANY of this makes sense to anyone, or it suddenly throws light on what is (was?) going wrong I would love to know - 

But as I say it is very odd that changing the LINK colour in CLEAN suddenly allows my firebrick colour setting in the custom theme controling the H3 headings to start working...

In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Dom F -

P.S. Maybe this is related to the concept of inheritance nut I can only guess what that means, and still even less know what to do to fix it...

Now I just need to figure out why all my moodle page admin small icons are ridiculously small and why my dictionary appears in THIS moodle wensite but no words and corrections are offered 9though spotted!) on my website - but thats another thread...

In reply to Dom F

Re: Endless hassles with the editor NOT being WYSIWYG

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

OK - review based on your posts

These custom styles you are using in TinyMCE - how have they been created? What are they actually applying? Where are they picking up the styles/css from that is not then being matched in your theme css?

Have gone back into your site this evening Dom. It appears that someone has used a custom configuration on your TinyMCE - hence the reason some of what you were expecting to see disappeared when you switched to Atto.
{
"theme_advanced_blockformats" : "p,div,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp",
"content_css" : ["/learning/theme/styles_debug.php?theme=ukfilmnet&amp;type=parent&amp;subtype=bootstrapbase&amp;sheet=moodle","/learning/theme/styles_debug.php?theme=ukfilmnet&amp;type=parent&amp;subtype=clean&amp;sheet=custom","/learning/theme/styles_debug.php?sheet=ukfilmnet&theme=ukfilmnet&type=theme","/learning/theme/ukfilmnet/style/tinymce.css"],
"style_formats" : [
   {"title" : "Grey background", "block" : "div", "classes" : "grey_background"},
   {"title" : "Stripe background", "inline" : "span" , "classes" : "stripe_background"},
   {"title" : "Caption", "inline" : "span" , "classes" : "caption_style"}
]
}

To be honest that's outside my area of expertise but...

What it looks like to me is that someone has avoided the use of the editor.css by applying custom configuration to TinyMCE, so we can probably ignore that.

BUT in doing so, they have created some drop down styles for you that do not seem to be reflected in your main theme styles and also that custom configuration is looking for a style file ukfilmnet/style/tinymce.css which does not exist in your theme - hence the 404 error.

I hope thats a small step forward, and something that others in the community and pick up - I am fully aware that it is not the kind of step by step guide you need, but maybe someone can use the information to move closer to that for you as I wont be able to look at it in detail again until at least the weekend.