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

Posted 2023-05-09

【中文标题】无法在 iframe 文本编辑器中使用自动换行

【英文标题】：Can't get word wrap to work in an iframe text editor

【发布时间】：2014-07-20 09:03:30

【问题描述】：

Fiddle Example

我在编辑器中添加了可调整大小的 jQueryUI，但我无法让自动换行功能正常工作。谁能告诉我如何使用 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();

【参考方案1】：

break-work 是一个属性，如果它的 containert 元素的宽度小于文本大小，则拆分一个单词。

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

既然它已经生成了，你可以通过javascript来设置它，在你的文档准备方法中添加$('#textEditor').contents().find('body').css("word-wrap", "break-word");。

请看这里：http://jsfiddle.net/Kxmaf/514/

【参考方案2】：

最简单的方法：调用 designMode = "on" 时也调用 document.body.style.overflowWrap = "break-word"。在 Css 上，您可以声明 word-wrap: break-word，因此无需在 js 中调用它。只有 iframe 内的主体需要使用overflowWrap 操作...不要使用overflow-wrap...他的语义在js 上无效...使用overflowWrap。

【讨论】：

欢迎来到 ***！ JS、CSS等缩写请大写。您可以使用反引号 ` ` 格式化代码，以使您的答案更易于阅读。在此先感谢:-)