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


Tags: javascript,html,css,iframe

Problem :

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>


Solution :

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);    
    }
}

    CSS Howto..

    how to vertically align div opposite to each other

    Hovering over navigation link to show a separate div

    How to use a Video as text background in css

    hide/show html div with javascript

    How can i apply css stylesheet to single specific element?

    How change color of text and image before print with css? [closed]

    How to use body_class to change css according to page hierarchy

    How to make a small icon using css?

    How to define a Click handler function for multiple elements at the same time

    How to display mouseover effect in GridView rows using only CSS?

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    how can I do this space between tables? [closed]

    Custom Javascript and css added to Wordpress, however, still not working

    How to select XML element by xlink:href attribute with CSS?

    How to make vertical lines between list items using CSS?

    Slideshow won't accept fixed height

    How do I use “:nth-of-type” to select an element after the element is updated by jQuery?

    How should I override hover style of a div in an anchor tag?

    how to get kendo ui mobile style silver

    How to center div while keeping inside divs on same line in css?

    How do you set the background color for a variable height page?

    css float: left clash/collision, how to avoid?

    How to change a div top margin without leaving a white space?

    How do I get the border-radius from an element using jQuery?

    how to bring ul element to the center of the div? CSS

    How to select a non unique element through CSS

    How to serve different size SVG graphic in css background image?

    How to remove/ignore :hover css style on touch devices

    How to define absolute positioned element's anchor point?

    How to put image tiles properly without colum gap or row gap in between using only CSS?