My defined styles for the WYSIWYG editor

My defined styles for the WYSIWYG editor

de Adam Hayward -
Número de respuestas: 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
Promedio de valoraciones: -
En respuesta a Adam Hayward

Re: My defined styles for the WYSIWYG editor

de Janne Mikkonen -
Imagen de Core developers
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 -
En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de Martin Dougiamas -
Imagen de Core developers Imagen de Documentation writers Imagen de Moodle HQ Imagen de Particularly helpful Moodlers Imagen de Plugin developers Imagen de 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";
    }


En respuesta a Martin Dougiamas

Re: My defined styles for the WYSIWYG editor

de Janne Mikkonen -
Imagen de Core developers
No, it's because editor has it's own page (blank) that is in iframe.
En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de Chardelle Busch -
Imagen de 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

En respuesta a Chardelle Busch

Re: My defined styles for the WYSIWYG editor

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

- Janne -
Adjunto editor_exp.jpg
En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de Chardelle Busch -
Imagen de 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.). 

En respuesta a Chardelle Busch

Re: My defined styles for the WYSIWYG editor

de Janne Mikkonen -
Imagen de Core developers
No It hasn't Guiño, 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.
En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de 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.

En respuesta a James Robertson

Re: My defined styles for the WYSIWYG editor

de Janne Mikkonen -
Imagen de Core developers
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>)
En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de 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.

En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de 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> ?



En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de 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> ?



En respuesta a Werner van Staden

Re: My defined styles for the WYSIWYG editor

de 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.

En respuesta a Tariq Adel Al Ammadi

Re: My defined styles for the WYSIWYG editor

de 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 Sonrisa
Am I wrong?
En respuesta a Werner van Staden

Re: My defined styles for the WYSIWYG editor

de Tariq Adel Al Ammadi -
Everything is possible Sonrisa! 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.







En respuesta a Tariq Adel Al Ammadi

Re: My defined styles for the WYSIWYG editor

de 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.
En respuesta a Janne Mikkonen

Re: My defined styles for the WYSIWYG editor

de 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.

 

 

En respuesta a Adam Hayward

Re: My defined styles for the WYSIWYG editor

de 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

En respuesta a Tom H

Re: My defined styles for the WYSIWYG editor

de 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
En respuesta a Adam Hayward

Re: My defined styles for the WYSIWYG editor

de 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
En respuesta a Adam Hayward

Re: My defined styles for the WYSIWYG editor

de 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.
En respuesta a Tariq Adel Al Ammadi

Re: My defined styles for the WYSIWYG editor

de Michael Woods -
Imagen de 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
En respuesta a Michael Woods

Re: My defined styles for the WYSIWYG editor

de 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

En respuesta a Andrey Kolchugin

Re: My defined styles for the WYSIWYG editor

de 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.
En respuesta a Michael Woods

Re: My defined styles for the WYSIWYG editor

de Andrew Hawes -
Any answers to this yet?
En respuesta a Andrew Hawes

Re: My defined styles for the WYSIWYG editor

de 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?
En respuesta a Adam Hayward

Re: My defined styles for the WYSIWYG editor

de 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
En respuesta a Mark Pearson

Re: My defined styles for the WYSIWYG editor

de 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....