wymeditor - formatting headings in stylesheet

Question

I'm trying to use within wymeditor the same styles that are on my website. Unfortunately this editor is barely documented, so I don't really know how to do it.

The documentation implies something like you can use a stylesheet where you define everything in some form, and it will be parsed and used in the editor. I could do this, but only with the classes (second box on the right panel). The documentation gives an example, but only for the classes, not for the containers. There's a link to a full stylesheet, but it's a dead link, and the stylesheet used in the examples only define classes and no containers.

So how would I make for example a red h1 in the editor? Or at least in the preview.

I would be really glad if someone linked or gave a full example of a stylesheet where containers like h1 and p are also formatted and used in editor. If this is not possible, what are other ways to do it?

---

EDIT:

I could inject CSS to the iframe with postInit:

postInit: function(wym) {
    var $head = $(wym._box).find('iframe').contents().find("head");
    $head.append($("<link/>", { 
        rel: "stylesheet",
        href: costumIframeCss,
        type: "text/css"
     }));
}

Now the only thing that I need is to do a similar thing to the preview dialog. Maybe with the postInitDialog(wym,wdw). I don't really know how yet. The big problem there is that I need to differentiate the preview dialog from the other dialogs.

Answer 1

As you see those are just the samples. You can't use that as an editor online. You 'll have to download that and try using it.

http://files.wymeditor.org/wymeditor-0.5/examples/

The above shows the list of examples. In that you have tried with the first link.

To download it go to this link.

http://www.wymeditor.org/download/

Select the recent stable versions for less flaws.

Hope this helps.

And as you have asked it works very well in the preview, when submitting nothing is getting reflected.

To achieve that in the preview, click on the HTML icon that is present at the second last position.

Write your own code, clicking on preview gets your result in a new pop up window.

Answer 2

Update:

I saw that you have access to dialog window as wdw, when using postInitDialog. Thats cool. The way you did it (looking at your update) the same you you can for Diaolog too

Look at the following image. I debugged the Preview dialog, as it opens.
Look at line no. 41

Following what you did to the editor, the same can be done to the Preview At line no. 41, you can get the head and append the style in the same way

var $head = $(wdw.document.body);
$head.append($("<link/>", { 
    rel: "stylesheet",
    href: customPreviewCss, // CSS for Preview Dialog
    type: "text/css"
}));

Initial Answer:

As I understand, you want the styles to take effect while you are editing. Ideally, for making an h1 red in color while editing (or any such customization), you have only the following options:

• Use the proper classes, as explained by the documentation - The very purpose of an editor is this. Customization should be done on top of what is there
• Edit the default stylesheet which you have linked or is loaded when editor is active (you can check that using inspect element) This is explained below

I see that when you are using the editor, it loads in an iframe. An iframe has its own styles. Now, inspect the element. In your case its an h1, but I am using the p tag from the example

See that it loads the styles from another file - wymiframe.css, line no. 51 for a p tag

So if you want to change or add your own styles, go to that file. (If you hover own it, you get the file path, or right click and open in new tab and check from the address bar)
Add or edit the style of h1 there. Done.
Also, you can go to the respective html file in the wymeditor/iframe/default folder. Add your custom link to your own css file. In this file, do all desired customization :)

Hope it helped !