Question

我已经将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>&nbsp;&nbsp;&nbsp;<a id="italic" class="italic">I</a>&nbsp;&nbsp;&nbsp;&nbsp;<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();
}

Answer 1

break-work是一个属性，如果其容器元素的宽度小于文本大小，则会对其进行拆分。

在这种情况下，您的容器不是#textEditor iframe元素，而是在其中生成的正文。因此，必须在iframe内的body元素中设置word-wrap: break-word属性。

自生成以来，您可以通过javascript进行设置，将$('#textEditor').contents().find('body').css("word-wrap", "break-word");添加到您的文档就绪方法中。

见这里：http://jsfiddle.net/Kxmaf/514/

Answer 2

最简单的方法：当调用designMode =“ on”时，还要调用document.body.style.overflowWrap =“ break-word”。在CSS上，您可以声明自动换行：断行，因此无需在js中调用它。仅需要使用iframe内部的主体才能使用overflowWrap ...不要使用overflow-wrap ...他的语义在js上是无效的...请使用overflowWrap。

无法在iframe文本编辑器中使用自动换行功能

2 个答案: