如何强制输入键在iframe编辑器中进行换行

时间:2013-12-27 05:23:17

标签: javascript html css iframe

我正在尝试学习如何使用javascript制作文本编辑器(我是JavaScript的新手)。在这里我使用“para”按钮创建一个段落,在段落中会有一个引用。每次按'输入在此段落中,创建了一个新段落,而不是用于键入文本的新行。如何强制创建换行符而不是段落元素呢?如果我在引号外单击它也不允许我在段落内写入

<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>

这是我的HTML代码,

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

这是我的CSS样式,

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

    q {
        color:;
    }

    #idContent{
        background-color:pink;
    }

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

2 个答案:

答案 0 :(得分:1)

您可以这样做:

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

答案 1 :(得分:1)

问题是q不是通用HTML元素(如果你没有引号,你将无法编辑)尝试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是小提琴