I have been working on an HTML editor using an editable iframe that allows users to create and edit content. I have found that the HTML generated within the iframe varies depending upon the browser being used. For example, in IE and Opera, blocks of text are surrounded by <p> tags;
<p>Hello world!</p>
In Firefox, blocks of texts end with <br> tags;
Hello world!<br>
And in Safari and Chrome, blocks of text are surrounded by <div> tags;
<div>Hello world!</div>
This can be problematic if a user creates content in one browser and tries to edit it in another and can over time lead to inconsistencies in the HTML code.
I have found that some HTML editors can produce the same format of HTML regardless of the browser being used. For example, in CKEditor, blocks of text are always surrounded by <p> tags, allowing the HTML to be cleanly created and edited in any browser.
Is there a way of forcing the iframe to use a specific set of HTML tags, mainly creating only <p> tags when someone creates a new paragraph or block of text regardless of browser? Can anyone offer me any tips, samples of code, or solutions to my problem? I know I could use an existing HTML editor, but it is only this particular aspect that I am interested in.
Any help would be appreciated. Thank you.
There isn’t a simple way. CKEditor and the like do it by adding lots of custom event handling. I would suggest looking at their source code for inspiration.
There is a specification for HTML Editing that has reached a reasonable level of completion but as far as I can tell there has been little effort so far by the browser developers to implement it.