我正在尝试学习如何使用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>
答案 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是小提琴