我已经在编辑器中添加了可调整大小的 jQueryUI,但是我在使用 wordwrap 时遇到了问题。任何人都可以告诉我如何使用 word-wrap: break-word;
以便它会单词之间没有空格时将文本换行。
我试过 #textEditor {word-wrap: break-word;}
或 #textEditor body {word-wrap: break-word;}
但都没有他们工作。
<a id="bold" class="font-bold">B</a> <a id="italic" class="italic">I</a> <select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<br/>
<div id="iframewrapper">
<iframe id="textEditor"></iframe>
</div>
CSS:
#textEditor {word-wrap: break-word;}
.ui-resizable-helper { border: 1px dotted gray; }
.iframewrapper { display: block; width: 100px; height: 400px; padding: 30px; border: 2px solid gray; overflow: hidden; position: relative;word-wrap: break-word; }
.font-bold
{
padding:0px 10px 0px 10px;
font-weight:bold;
}
.italic
{
padding:0px 10px 0px 10px;
font-style:italic;
}
.selected
{
background-color: orange;
}
jQuery 脚本:
$("#iframewrapper").resizable({
alsoResize : '#textEditor'
});
$(document).ready(function(){
document.getElementById('textEditor').contentWindow. document.designMode="on";
document.getElementById('textEditor').contentWindow. document.close();
$("#bold").click(function(){
if($(this).hasClass("selected"))
{
$(this).removeClass("selected");
}else
{
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function(){
if($(this).hasClass("selected"))
{
$(this).removeClass("selected");
}else
{
$(this).addClass("selected");
}ItalicIt();
});
$("#fonts").change(function(){
changeFont($("#fonts").val());
});
});
function boldIt()
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt()
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function changeFont(font)
{
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("FontName", false, font);
edit.focus();
}
最佳答案
break-work
是一个属性,如果其容器元素的宽度小于文本大小,则拆分单词。
在这种情况下,您的容器不是 #textEditor
iframe 元素,而是在其中生成的正文。因此必须在 iframe 内的 body 元素中设置 word-wrap: break-word
属性。
既然生成了,你可以通过javascript设置它,添加$('#textEditor').contents().find('body').css("word-wrap", "break-word");
到您的文档就绪方法。
关于javascript - 无法在 iframe 文本编辑器中使用自动换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23957373/