My defined styles for the WYSIWYG editor

My defined styles for the WYSIWYG editor

by Adam Hayward -
Number of replies: 31
Hello all,

I am using Moodle to do internal company training, such as this intro course to Microsoft system (a quick 'book' I'm writing to figure out what I'm doing):
bill_g.jpg
 

I managed to get that right-aligned grey box you see above by defining my own markup styles as follows:
markup.jpg
Selecting " - Figure: < right" from the dropdown list will create a floating div I can use for inline definitions, figures, images etc.

You can see above I created a div (called 'figure-right') that aligns content to the right and displays it in a nice box. Somehow the style defined in mod/book/book_theme.css and in mod/book/book_print.css do not result in the div wrapper being displayed correctly in the editor:
non_markup.jpg

I have tried also putting the extra style information in themes/mythemename/styles.css and in lib/editor/htmlarea.css with no luck.

My CSS information basically looks like this:
.figure-right, .figure-left {
color: #660000;
width: 40%;
float: right;
padding: 5px 5px 5px 5px;
margin: 5px 0px 5px 10px;
border: 1px solid #aaaaaa;
background-color: #cccccc;
clear: right;
}
.figure-right>h3, figure-left>h3 {
padding-top: 0px;
padding-bottom: 3px;
margin-top: 0px;
margin-bottom: 0px;
}

The HTML for the div looks like this:
<div class="figure-right"><h3>William H. Gates III</h3>
The richest man in the world<br />
<center><img width="91" vspace="2" hspace="2" height="134" border="1" align="middle" alt="Bill_Gates1.jpg" src="http://localhost/moodle/file.php/2/Bill_Gates1.jpg" /></a>
</center><br />
<em>... I went to the garbage cans at the Computer Science Center and fished out listings of their operating system.</em></div>

Can anyone help?

Adam
Average of ratings: -
In reply to Adam Hayward

Re: My defined styles for the WYSIWYG editor

by Janne Mikkonen -
Here's how you do it:

create a new stylesheet eg. custom.css and put it in the same directory where htmlarea.css is. Open htmlarea.php file and add line: html += '<link rel="stylesheet" href="<?php echo "$CFG->wwwroot/lib/editor/" ?>custom.css" type="text/css" />'; (somewhere in line: 655)

if (!editor.config.fullPage) {
        html = "<html>\n";
        html += "<head>\n";
        if (editor.config.baseURL)
            html += '<base href="' + editor.config.baseURL + '" />';
        html += '<link rel="stylesheet" href="<?php echo "$CFG->wwwroot/lib/editor/" ?>custom.css" type="text/css" />';
        html += '<style type="text/css">\n' + editor.config.pageStyle + editor.config.customStyle + "td { border: 1px dotted gray; }</style>\n";
        html += "</head>\n";
        html += '<body>\n';
        html += editor._textArea.value;
        html = html.replace(/<nolink>/gi, '<span class="nolink">').
                    replace(/<\/nolink>/gi, '</span>');
        html += "</body>\n";
        html += "</html>";
    }


And that should do it.

- Janne -
In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Is there any reason we can't include the main style sheets in there all the time?

    $stylesheetshtml = '';
    foreach ($CFG->stylesheets as $stylesheet) {
        $stylesheetshtml .= '<link rel="stylesheet" type="text/css" href="'.$stylesheet.'" />'."\n";
    }


In reply to Martin Dougiamas

Re: My defined styles for the WYSIWYG editor

by Janne Mikkonen -
No, it's because editor has it's own page (blank) that is in iframe.
In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by Chardelle Busch -
Picture of Core developers

Hi Janne,

Quick question, I've just been adding my styles to htmlarea.css rather than creating a new stylesheet and so far it is working.  Why didn't the styles above work when added?

Thanks,

Chardelle

In reply to Chardelle Busch

Re: My defined styles for the WYSIWYG editor

by Janne Mikkonen -
Short explanation in image right below (don't know does it make it any clearer?).

- Janne -
Attachment editor_exp.jpg
In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by Chardelle Busch -
Picture of Core developers

Thanks Janne,

So, it has to do with div I guess, thus simple text styles, etc. can be just added to htmlarea.css. 

While I have your attention, though, can I add javascript to the html editor?

Basically, I want to use a "popup" that shows on mouseover (or click), rather than having the info open in a new window from a link (unless I could change the window settings--like you can for adding a resource--so that the window had no toolbars, I could set the size, etc.). 

In reply to Chardelle Busch

Re: My defined styles for the WYSIWYG editor

by Janne Mikkonen -
No It hasn't wink, it's that iframe and a blank document in it (which is a must).

Let's say it like this: The page where you can see the editor and the iframe where the blank page is, are actually in different "rooms" and can't "see" each other. If you put style rules in htmlarea.css, it doesn't affect that blank page because they're not in the same space.

While I have your attention, though, can I add javascript to the html editor?
If I understood this correctly then no. Any javascript inserted into editor gets modified.
In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by James Robertson -

I'm also having trouble with styles.  I followed the instructions above (my added file is Writing101.css).  I returned to the resource, put in the html code (in text mode), switched to wysiwyg mode, and the page displayed as I had hoped (hooray).  But when I saved changes the styles were gone from the redisplayed page, and also missing when I ran the resource either as student or teacher.  But the styles apparently are not really gone: when I return to edit the resource, the display still looks great in the wysiwyg (escpecially if I use the full page option).  So I am puzzled: why does it find the styles in edit but not in run?  I presume I have left something out.

Thanks,

Jim Robertson.

In reply to James Robertson

Re: My defined styles for the WYSIWYG editor

by Janne Mikkonen -
The stylesheet in the editor (which is actually just a editable HTML page) is completely different thing than the page stylesheet.

You can define these stylesheets to match each other, that text in the editor looks like the same as in actual html page.

Only style information that's been saved is within html tags (like <p style="text-align: right">Text here</p>)
In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by James Robertson -

So I should add my styles to the stylesheet for the pages as well, but which file is that?  Or is there someplace I should reference my stylesheet that will include my styles in the page stylesheet, similar to the line I added in htmlarea.php (as described in your March 23 post)?

Thanks,

Jim.

In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by Werner van Staden -
I have tried the various suggestions above and have been able to get a <pre class="file"> tag working from the styles dropdown list. I did this by installing the patched htmlarea.php and specifying "File" : "<pre>#file" - the latter class being declared in mod/book/book_theme.css as follows:

pre .file
{
font-size: 1.3em;
color: black;
background-color: ivory;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
}

However, I am having problems getting a custom <code> tag to work from the dropdown list. It is defined in my theme stylesheet as:

code
{
font-size: 1.3em;
background-color: maroon;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
}

How do I declare this in htmlarea.php in order for it to be aplied to highlighted text via the styles dropdown list? It seems the HTML editor only works with <h1>, <h2>... <pre> and <p>. Yet I see a custom 'address' tag in the drop down as well as a <code> tag implemented in many other editors and forum interfaces.

Surely its not impossible to highlight, choose 'Code' from the dropdown and have my selected text styled <code>mytext</code> ?



In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by Werner van Staden -
I have tried the various suggestions above and have been able to get a <pre class="file"> tag working from the styles dropdown list. I did this by installing the patched htmlarea.php and specifying "File" : "<pre>#file" - the latter class being declared in mod/book/book_theme.css as follows:

pre .file
{
font-size: 1.3em;
color: black;
background-color: ivory;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
}

However, I am having problems getting a custom <code> tag to work from the dropdown list. It is defined in my theme stylesheet as:

code
{
font-size: 1.3em;
background-color: maroon;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
}

How do I declare this in htmlarea.php in order for it to be aplied to highlighted text via the styles dropdown list? It seems the HTML editor only works with <h1>, <h2>... <pre> and <p>. Yet I see a custom 'address' tag in the drop down as well as a <code> tag implemented in many other editors and forum interfaces.

Surely its not impossible to highlight, choose 'Code' from the dropdown and have my selected text styled <code>mytext</code> ?



In reply to Werner van Staden

Re: My defined styles for the WYSIWYG editor

by Tariq Adel Al Ammadi -
I guess you're referring to my patch?

If so you should have:
 "File" : "pre#file"
If the style sheet isn't set to show up in the htmleditor than you'll still be able to see which class is in use from the status bar's Path.

In reply to Tariq Adel Al Ammadi

Re: My defined styles for the WYSIWYG editor

by Werner van Staden -
Thanks for your reply Tariq.

What I am trying to accomplish is to have <code></code> tags inserted around my selected text. The <pre> tag is not suitable because it applies to the entire block of code and not only to single words I select within a paragraph.

I firmly believe that this should be possible smile
Am I wrong?
In reply to Werner van Staden

Re: My defined styles for the WYSIWYG editor

by Tariq Adel Al Ammadi -
Everything is possible smile! You need to delve further into the javascript code (perilless) to see what is going on. A div will probably work like you want it to.







In reply to Tariq Adel Al Ammadi

Re: My defined styles for the WYSIWYG editor

by Werner van Staden -
My objective is to convert a training manual of about 10,000 words from an old .swf file (now .odt format) to an online html Moodle book. The file contains a lot of styling tags (inherited from .swf) and even when converted to html it contains tags that are ridiculously long and nested several layers deep.

My initial solution was to copy&paste plain text into the html editor and then to style it. My custom styles include tags to style console code, file contents and table headers. Unable to find a way for htmlarea to allow me to select custom styles and apply them to selected text (not paragraphs or entire lines) I have decided to use an external html editor.

Kompozer is an html editor which is similar to Dreamweaver, but more pragmatic and fully standards compliant. You import your Moodle CSS files into Kompozer and quickly and easily compose, style and edit your text (400 pages in my case). When you are satisfied you simply import your styled html into Moodle's book module or copy and paste into the html editor window.

Thanks for the help above. Seems that for large scale html editing a dedicated application is a smart choice.
In reply to Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

by sohail aslam -

I have applied the above technique/code to include my custom css file and also made changes in htmlarea.php below mentioned code block

   this.formatblock = {

        "":"", "Quotes":"p#quotes",

        "<?php echo $strheading ?> 1": "h1",

        "<?php echo $strheading ?> 2": "h2",

        "<?php echo $strheading ?> 3": "h3",

        "<?php echo $strheading ?> 4": "h4",

        "<?php echo $strheading ?> 5": "h5",

        "<?php echo $strheading ?> 6": "h6",

        "<?php echo $strnormal ?>": "p",

        "<?php echo $straddress ?>": "address",

        "<?php echo $strpreformatted ?>": "pre",

        "heading1_custom": "p#heading1_sohail",

        "heading2_custom": "div"

    };

 After applying these I can see my headings in editor drop down list but when select these styles does not make any difference.

My objective is to define some custom styles which user can apply straight away by selecting from drop down menu.

Any suggestions, what I am doing wrong?

Note: I am running moodle 1.9.8.

 

 

In reply to Adam Hayward

Re: My defined styles for the WYSIWYG editor

by Tom H -

Hi, I was just wondering, how did you edit the WYSIWYG editor to add the listings for warning, definition, etc. under the style drop down? Where in htmlarea.php did you put your definitions? Just some pointers would be helpful.

Thanks

Thomas

In reply to Tom H

Re: My defined styles for the WYSIWYG editor

by Adam Hayward -
Hi Thomas,

you can change it in htmlarea.php - the function this.formatblock as follows:

this.formatblock = {
"<?php echo $strheading ?> 1": "h1",
"<?php echo $strheading ?> 2": "h2",
[ ...etc... ]
"Note": "div class=\"note\"",
"Warning": "div class=\"warning\""
}
HTH

Adam
In reply to Adam Hayward

Re: My defined styles for the WYSIWYG editor

by Tom H -
Which css file contains the definitions for note and warning classes? Thanks.
In reply to Adam Hayward

Re: My defined styles for the WYSIWYG editor

by Ruben Stein -
It works the way you described it, but the text gets changed only after some kind of refreshment.
When selecting one of the added text-formats it isn't displayed until the "Redisplay Page" button is pressed or editor mode switched between HTML- and WYSIWYG-Editor. Is there any method to force the Editor applying the format instantly even if this means performance loss?

Another topic on that:
For my purposes, I have to select some text and apply the custom format, in order to get this text contained in my custom or
tag. So it would be usefull to have the functionality the entry in the dropdown format-box grants in a button, because once I have selected the dropdown entry, I have to deselect it to get its tag applied on another independent part of the text. Any suggestions on that?

thank you, Ruben
In reply to Adam Hayward

Re: My defined styles for the WYSIWYG editor

by Tariq Adel Al Ammadi -
This is not quite adequate as HTMLArea will interpret this by adding <div class="xxx">SELECTED</div class="xxx"> to the html. When the editor is refreshed like when going from WYSIWYG to html and back to WYSIWYG it will correct the html by noticing that the end tag is illegal.

I have a pretty good fix that allows you to set the styles you want to use from the Appearance -> HTML Editor page, just like for fonts. It works very well and I am testing it at the moment. If I get the chance I will post the changes here.
In reply to Tariq Adel Al Ammadi

Re: My defined styles for the WYSIWYG editor

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Hi Tariq,
Have you made progress on this enhancement? I am very interested...
Joseph
In reply to Tariq Adel Al Ammadi

Re: My defined styles for the WYSIWYG editor

by Michael Woods -
Picture of Core developers
Hi Tariq,
I'm also interested in how you have done this if you are willing to share it? It seems that firefox is able to resolve the "illegal" end tags, but IE6 won't. Any suggestions from anyone?
Thanks,
Michael
In reply to Michael Woods

Re: My defined styles for the WYSIWYG editor

by Andrey Kolchugin -

I try to add new styles to the editor's drop-down box as described above.

There is no problems with styles defined as simple tags, for example:

        "user-defined style": "div",

But styles defined with "class" attributes are not applied at all.

For example, I try to add style for right-aligned paragraph:

        "right paragr": "p class="\rightpar"\",

I define CSS class as:

p.rightpar {
  text-align: right;
}

in file myownstyles.css and modify iframe content generation in htmlarea.php in proper way.

New style really appears in drop-down box, but nothing changes (no tags in HTML source and no visible changes) when I pick this style in it.

How can I solve my problem?

P.S.: I use Moodle 1.9.14.1

In reply to Andrey Kolchugin

Re: My defined styles for the WYSIWYG editor

by Tariq Adel Al Ammadi -
If only it where that simple ;-P

Attached is a patched htmlarea.php from the latest 1.9.2 weekly build. It allows you te specify your styles as
"<Label>": "<html_tag>#<style_classname>",
As this code is patched I haven't really tested it, but it did seem to add the classes correctly. I do have something which allows styles to be added to the HTMLeditor from the administrator interface these settings get loaded into htmlarea like this:
// Load custom CSS.
    $str = '   this.formatblock = {
     "": ""';
    if(isset($CFG->editorformatlist)) {
        $items = unserialize(base64_decode($CFG->editorformatlist));
    } else {
        require_once($CFG->libdir.'/adminlib.php');
        $items = admin_setting_special_editorformatlist::get_defaults_editor();
    }
    if ($items) {
        foreach($items as $key => $value) {
            $str .= ",\n".'      "'.$key.'": "'.$value.'"';
        }
    }
    $str .= '
    };';
    echo $str;
There are a few parts to this so if I get time I'll try to put together a complete patch.

There where issues under IE6, worked perfectly in FF2 (IIRC), but because of the IE issues I don't think it ever got used.
In reply to Michael Woods

Re: My defined styles for the WYSIWYG editor

by Andrew Hawes -
Any answers to this yet?
In reply to Andrew Hawes

Re: My defined styles for the WYSIWYG editor

by Alexander Corrochano -
Yes, a unfortunate answer...

I'm try to do on 1.9 + (Build: 20080325), and have the same result. I think that something was happend with the preformated html spell check, couse if you use a typical html tag, the result is correct (apear the tags in the html code), but if you defined a not html tag (diva, for example) the selected text not will included into a <diva> tags.

It's true?
In reply to Adam Hayward

Re: My defined styles for the WYSIWYG editor

by Mark Pearson -

Just a wee comment about the style defintion you used:

.figure-right, .figure-left {
color: #660000;
width: 40%;
float: right;
padding: 5px 5px 5px 5px;
margin: 5px 0px 5px 10px;
border: 1px solid #aaaaaa;
background-color: #cccccc;
clear: right;
}

  1. would you not be better with clear:all in the .figure definition since clear:right won't have any effect when .figure-right is applied?

  2. .figure-right>h3, figure-left>h3  {

    Am I right in thinking that Internet Exploder cannot handle the 'inherit' property, ie '>' in a stylesheet? Does the padding you have used on the h3 tag actually work in I.E?

Bloody great idea and implementation though! It's a pity that HTMLArea is so naff.

Mark
In reply to Mark Pearson

Re: My defined styles for the WYSIWYG editor

by sohail aslam -

I have tried everything explained here but still unable to get/apply my custom styles from custom style sheet.

I can see my style in drop down list but when select those does not make any difference.

When I view source the page, I can't see my custom.css added in the header.

Anyone suggestions....