HTML、Javascript—拆分单词，即'；它比iFrame宽，而不是生成滚动条_Javascript_Html_Iframe_Designmode_Execcommand

HTML、Javascript—拆分单词，即'；它比iFrame宽，而不是生成滚动条

javascript html iframe

HTML、Javascript—拆分单词，即'；它比iFrame宽，而不是生成滚动条,javascript,html,iframe,designmode,execcommand,Javascript,Html,Iframe,Designmode,Execcommand,我正在使用ExecCommand制作一个非常基本的WYSIWYG编辑器，因为未来的项目将需要我制作一个（因此，对于像CKEditor或tinyMCE这样的东西，请不要告诉我）。正常使用时，一切正常。但如果输入的单词比iFrame宽，则该单词不会拆分。相反，只在iFrame中添加了一个滚动条。下面是一段视频，显示了我的问题：所以我想知道最简单的预防方法是什么代码如下： <script language="JavaScript"> $(document).ready(func

我正在使用ExecCommand制作一个非常基本的WYSIWYG编辑器，因为未来的项目将需要我制作一个（因此，对于像CKEditor或tinyMCE这样的东西，请不要告诉我）。正常使用时，一切正常。但如果输入的单词比iFrame宽，则该单词不会拆分。相反，只在iFrame中添加了一个滚动条。下面是一段视频，显示了我的问题：所以我想知道最简单的预防方法是什么

代码如下：

    <script language="JavaScript">
$(document).ready(function(e) { 
    textArea.document.designMode = 'On'; 

    $("#bold").click(makeBold);
    $("#italic").click(makeItalic);

    function makeBold() {
        textArea.document.execCommand('bold', true, null);
        $("#textArea").focus();
    }
    function makeItalic() {
        textArea.document.execCommand('italic', false, null);
        $("#textArea").focus();
    }
});
</script>
<body>

    <iframe id="textArea" style="width: 700px; height:400px;"></iframe>


$（文件）.ready（函数（e）{
textArea.document.designMode='On'；
$（“加粗”）。单击（加粗）；
$（“#斜体”）。单击（makeItalic）；
函数makeBold（）{
textArea.document.execCommand（'bold'，true，null）；
$（“#textArea”）.focus（）；
}
函数makeItalic（）{
textArea.document.execCommand（'italic'，false，null）；
$（“#textArea”）.focus（）；
}
});

基本上，您现有的系统负责第一部分，将单词放在新的行上。您选择了更简单的版本：）

渲染单词时，需要根据单词的长度和字段的宽度将字符串拆分为多个字符串

确保只拆分视图中的单词，而不是数据中的单词！如果用户调整视图的大小，您就不想再次尝试将数据放回一起：p

步骤：

每次渲染时，都会检查每个单词是否超过视图的宽度，如果超过，则将其拆分，按顺序渲染各个部分，然后继续。

是否希望自动打断元素从最后一个单词开始，并在转到新行之前与剩余部分相适应？还是要在自己的行上启动这些自动打断元素？或者你还期待着其他行为？对不起，我不确定我是否理解你，因为我的英语不是最好的。但我希望自动中断能像tinyMCE那样工作。像这样（视频）：当你在这个框中留下评论时，一旦你的“单词”超出了换行前的行宽，它就会转到一个新行。当它超过框的宽度时，它会自动将单词打断到第二行。您希望自动断开的单词保留在第一行（而不是此评论系统所做的），还是移动到新的行（如此评论系统所做的）？谢谢！虽然我不确定我是否知道如何实际做到这一点。你能给我一个代码示例吗？根据不同的布局和语言计算单词字形的宽度不是一件容易的事。您可能可以通过使用少量空格填充来进行字符计数，以防止换行，但字体变化可能会带来麻烦。这是纯英语的文本系统吗？啊，我明白你的意思。我以前没怎么处理过这种东西。我主要使用PHP，而没有使用实时文本处理。但我明白需要做什么，谢谢！不，它主要用于瑞典语。