Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-39591

Make the WYSIWYG editor really WYSIWYG

XMLWordPrintable

    • MOODLE_23_STABLE, MOODLE_24_STABLE, MOODLE_25_STABLE

      TinyMCE comes with a a default style sheet that affects everything within the editor window.

      It should be somewhere around here (version number may be different):

      lib/editor/tinymce/tiny_mce/3.5.1.1/themes/advanced/skins/o2k7/content.css

      These styles are not applied to the content after you save it so any style here makes the editor less WYSIWYG. Some of the styles are for the use of the editor e.g. to show dotted lines around tables that are being edited. But some are a bit more intrusive e.g. setting a (quite small) font size on body, td, and code.

      So A) to make the editor more WYSIWYG the styles that aren't needed for editing should be removed.

      Moodle also allows you to specify extra stylesheets that can be added to the editor, depending on other settings in the config.php these may or may not be included with the main theme.

      For the included themes in Moodle this file is either empty/missing or contains a very short file that contains only a tiny fraction of the styles applied by the theme after the editor is saved.

      So B) each theme should add (at least) the core styles that it uses

      C) If 'A' isn't done then extra styles might need to be added in B) in order to override styles that clash e.g. setting a body font size in one place would normally get inhereted by various child elements, but the TinyMCE styles specify it for the body and tables and code, so you need to specifically override every such style declaration in the TinyMCE file.

      This has already begun for the Bootstrapbase theme. Rather than do C) to fix the size of text in tables just for Bootsrapbase and themes that inherit from it we'd like to try and fix it in one place for all themes as it's a bit cleaner that way.

            moodle.com Moodle HQ
            bawjaws David Scotson
            Votes:
            5 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.