CODEWITHSUNDEEP
javascripthtmlcssiframe
AL-zami
AL-zami

Reputation: 9076

How to force enter key to make a line break inside iframe editor

I am trying to learn how to make a text editor using javascript(I am new to JavaScript).Here I create a paragraph using "para" button and inside the paragraph there will be a quote.Every time I press 'enter' within this paragraph, a new paragraph is created, rather than a new line for typing texts. How can I force a line break to be created instead of a paragraph element?also if I clicked outside of the quotation mark it wont allow me to write inside the paragraph

<script>
    function loads(){
        idContent.document.designMode="On";
    }

    function para(){
        var m=document.createElement("p");
        m.setAttribute('style',"border:1px solid black;height:100px;width:500px;position:relative;background-color:white;");   
        m.setAttribute('designMode',"on");
        m.setAttribute('contenteditable',"true");   
        var t=document.createElement("q");
        t.innerHTML="quote here";   
        m.appendChild(t);
        idContent.document.body.appendChild(m);
    }
</script>

Here is my html code,

<body onLoad="loads();" style="position:relative;">
    <iframe id="idContent" width="600" height="280" contenteditable="true" ></iframe>
    <input type="button" value="para" onClick="para();">
</body>

Here is my css styles,

<style>
    * {
        margin:0px;
        padding:0px;
    }

    q {
        color:;
    }

    #idContent{
        background-color:pink;
    }

    div{
        border:1px solid black;
    }
</style>

Upvotes: 2

Views: 1408

Answers (2)

Hariprasad
Hariprasad

Reputation: 3640

The problem is q is not a general purpose HTML element ( if you go out of quotes, you will not be able to edit ) try a div:

function para(){
    var m=document.createElement("p");
    m.setAttribute('style',"border:1px solid black;height:100px;width:500px;position:relative;background-color:white;");   
    m.setAttribute('designMode',"on");
    m.setAttribute('contenteditable',"true");   
    var t=document.createElement("div"); //"div" instead of "q"
    t.innerHTML="\"quote here\"";   
    m.appendChild(t);
    idContent.document.body.appendChild(m);
}

Here is the fiddle

Upvotes: 1

Baby
Baby

Reputation: 5102

You can do something like this:

function appendPara(e) {
    if (e.keyCode == 13) {  //13 is javascript key-code for Enter
        .....
        idContent.document.body.appendChild(m);    
    }
}

Upvotes: 1

Related Questions