javascriptcsswebkitwysiwygdesignmode

Set default to <p> instead of <br> in 'designMode' On Iframe


Greetings from a future caveman,

I'm trying to build a simple wysiwyg and unfortunately I cannot get it to use paragraph by default instead of a simple line break. Then I read this:

Force browser to insert <p> tag when pressing Enter in a designMode IFrame

This question was asked more than year ago. Going through the links I've see that some things in webkit have been 'resolved': https://bugs.webkit.org/show_bug.cgi?id=59961 Resolved: http://trac.webkit.org/changeset/109529

Sorry I'm not up to speed but what does this mean: Has it been solved and is there a way to do this or not without going into JS and monitoring keystrokes?

If not, then what would be the JS solution for this? Monitor for "enter" and then how would you wrap the selection in a paragraph tag?? So far I tried this but it does not work

$("#richTextField").keydown(function(e) {
alert("you pressed something");
if (e.keyCode == 13) {
alert("you pressed ENTER"); 
richTextField.document.execCommand('formatblock',false,"P");
}
});

Does not work at all - even the alerts aren't thrown.

Just to clarify... I want:

This is my first paragraph
<br>
This is my second paragraph
<br> 

Which is what is happening now, to become a normal

<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

Thank you


Solution

  • Actually I've figured it out using JS. Although the method below is simple, it does lead to complications such as inserting paragraph tags into list items and a lot of line breaks etc... I guess you can strip that out later in php. Here's the code for anybody that needs it:

    $("#richTextField").contents().keydown(function(e) {
    if (e.keyCode === 13) {
    richTextField.document.execCommand('formatblock',false,"P");
    }
    });
    

    Or you can just do it like this, which works better in my opinion because with the code above if write something in but don't hit enter, you get no paragraph tags at all.

    $("#richTextField").contents().keydown(function(e) {
    richTextField.document.execCommand('formatblock',false,"P");
    });
    

    Only way to do it that I could find. If anybody know of another without going into javascript and monitoring for the 'enter' key please post.