HTML editor

HTML editor

by Jordi Prats -
Number of replies: 3
Hi,
I'd like to add a customization to my HTML Editor so the Heading option inserts extra code to add a hr.

For instance, when you select a text to act as heading html editor inserts <h1> and </h1> I'd like to insert after </h1> a <hr> tag

Example:

Caption

<h1>Caption</h1>

Caption


<h1>Caption</h1><hr>

It would be usefull for us because they want teachers to maintain some kind of similarity between courses. This way everybody would have <hr> by default so they cannot just say: "Oops, I've forgotten"

The problem is that i can't find the piece of Javascript that inserts <h1> and </h1> to add my <hr>.

Any help?


Thanks!
Average of ratings: -
In reply to Jordi Prats

Re: HTML editor

by Janne Mikkonen -
Picture of Core developers
This goes through HTMLArea.prototype.execCommand which uses browsers built in command "execCommand".

So you have to modify HTMLArea.prototype.execCommand's default: part something like:

default:
    if ( cmdID == "formatblock" ) {

        your code here...
    } else {
        this._doc.execCommand(cmdID, UI, param);
    }

More information from midas-spec.
- Janne -
In reply to Jordi Prats

Re: HTML editor

by Dan Stowell -
It would be slightly neater to use stylesheets to change the appearance of your H1s. Use something like

h1 { border-bottom: 2px solid gray; }

That's a much better way of achieving consistency of appearance.


In reply to Jordi Prats

Re: HTML editor

by Jordi Prats -
I've just tested and it works fine. I will also use this for custom tables and other stuff like different types of hr: We'll need to have <hr class="course">, <hr class="site"> and so on...

Thank you!